【three.js学习笔记】线

系统管理员 2021-09-18 15:08 363阅读 0赞

# 线 #

一条连续的线

var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });
    
    var geometry = new THREE.Geometry();
    geometry.vertices.push(
        new THREE.Vector3( -10, 0, 0 ),
        new THREE.Vector3( 0, 10, 0 ),
        new THREE.Vector3( 10, 0, 0 )
    );
    
    var line = new THREE.Line( geometry, material,THREE.LineSegments);
    scene.add( line );

## 线条Line [api][] ##

### 构造器 ###

Line( geometry, material, mode );

*  geometry:表示线段的顶点
 *  material:线条材料。默认为 LineBasicMaterial
 *  mode:线条绘制方式(THREE.LineSegments);

### 属性 ###

*  geometry:表示线段的顶点
 *  material:线条材料

### 方法 ###

.raycast ( raycaster, intersects )

得到光线投射和该线条之间的交点。 Raycaster.intersectObject 将调用该方法。

.clone ()

返回该线条对象及其后代的克隆。

## 三维向量(Vector3)[api][api 1] ##

var a = new THREE.Vector3( 1, 0, 0 );
    var b = new THREE.Vector3( 0, 1, 0 );
    
    var c = new THREE.Vector3();
    c.crossVectors( a, b );

### 构造器（Constructor） ###

Vector3( x, y, z )

*  x: Float 向量的x值。
 *  y: Float 向量的y值。
 *  z: Float 向量的z值。

### 使用 ###

创建几何体并将三维向量放入几何体

var geometry = new THREE.Geometry();
    geometry.vertices.push(
        new THREE.Vector3( -10, 0, 0 ),
        new THREE.Vector3( 0, 10, 0 ),
        new THREE.Vector3( 10, 0, 0 )
    );

## 线材质 ##

简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在程序中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

### THREE.LineBasicMaterial ###

THREE.LineBasicMaterial = function ( parameters )

*  Color：线条的颜色，用16进制来表示，默认的颜色是白色。
 *  Linewidth：线条的宽度，默认时候1个单位宽度。
 *  Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
 *  Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
 *  VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。

## 线条绘制 ##

![图片描述][504215213-5acf75be97905_articlex]

### THREE.LinePieces(GL\_LINES) ###

var line = new THREE.Line( geometry, material, THREE.LinePieces );

### THREE.LineSegments(GL\_LINE\_STRIP) ###

var line = new THREE.Line( geometry, material, THREE.LineSegments );

## 实例 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Three框架</title>
            <script src="js/Three.js"></script>
            <style type="text/css">
                div#canvas-frame {
                    border: none;
                    cursor: pointer;
                    width: 100%;
                    height: 600px;
                    background-color: #EEEEEE;
                }
    
            </style>
            <script>
                var renderer;
                function initThree() {
                    width = document.getElementById('canvas-frame').clientWidth;
                    height = document.getElementById('canvas-frame').clientHeight;
                    renderer = new THREE.WebGLRenderer({
                        antialias : true
                    });
                    renderer.setSize(width, height);
                    document.getElementById('canvas-frame').appendChild(renderer.domElement);
                    renderer.setClearColor(0xFFFFFF, 1.0);
                }
    
                var camera;
                function initCamera() {
                    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                    camera.position.x = 0;
                    camera.position.y = 1000;
                    camera.position.z = 0;
                    camera.up.x = 0;
                    camera.up.y = 0;
                    camera.up.z = 1;
                    camera.lookAt({
                        x : 0,
                        y : 0,
                        z : 0
                    });
                }
    
                var scene;
                function initScene() {
                    scene = new THREE.Scene();
                }
    
                var light;
                function initLight() {
                    light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
                    light.position.set(100, 100, 200);
                    scene.add(light);
                }
    
                var cube;
                function initObject() {
    
                    var geometry = new THREE.Geometry();
                    var material = new THREE.LineBasicMaterial( { vertexColors: true } );
                    var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
    
                    // 线的材质可以由2点的颜色决定
                    var p1 = new THREE.Vector3( -100, 0, 100 );
                    var p2 = new THREE.Vector3(  100, 0, -100 );
                    geometry.vertices.push(p1);
                    geometry.vertices.push(p2);
                    geometry.colors.push( color1, color2 );
    
                    var line = new THREE.Line( geometry, material, THREE.LinePieces );
                    scene.add(line);
                }
    
                function threeStart() {
                    initThree();
                    initCamera();
                    initScene();
                    initLight();
                    initObject();
                    renderer.clear();
                    renderer.render(scene, camera);
                }
    
            </script>
        </head>
    
        <body onload="threeStart();">
            <div id="canvas-frame"></div>
        </body>
    </html>

[api]: http://techbrood.com/threejs/docs/#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E5%AF%B9%E8%B1%A1%28Objects%29/%E7%BA%BF%E6%9D%A1%28Line%29
[api 1]: http://techbrood.com/threejs/docs/#%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C/%E6%95%B0%E5%AD%A6%E5%B7%A5%E5%85%B7%E5%BA%93%28Math%29/%E4%B8%89%E7%BB%B4%E5%90%91%E9%87%8F%28Vector3%29
[504215213-5acf75be97905_articlex]: /images/20210726/a24c43ec186c432d912decd83bd5020f.png