zoukankan      html  css  js  c++  java
  • Threejs的学习 2、点,线,面

    在Threejs中定义一个点

    在three.js中,点可以在右手坐标系中表示:空间几何中,点可以用一个向量来表示,在Three.js中也是用一个向量来表示的,代码如下所示:

    THREE.Vector3 = function ( x, y, z ) {
    
    this.x = x || 0;
    this.y = y || 0;
    this.z = z || 0;
    
    };

    THREE.Vector3被赋值为一个函数。这个函数有3个参数,分别代表x坐标,y坐标和z坐标的分量。函数体内的代码将他们分别赋值给成员变量x,y,z。看看上面的代码,中间使用了一个“||”(或)运算符,就是当x=null或者undefine时,this.x的值应该取0。

    点的操作

    现在来看看怎么定义个点,假设有一个点x=4,y=8,z=9。你可以这样定义它:

    var point1 = new THREE.Vecotr3(4,8,9);
    
    //或者
    
    var point1 = new THREE.Vector3();
    point1.set(4,8,9);

    画一条彩色线

    <!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>

    1、首先,我们声明了一个几何体geometry,如下:

    var geometry = new THREE.Geometry();

    几何体里面有一个vertices变量,可以用来存放点。

    2、定义一种线条的材质,使用THREE.LineBasicMaterial类型来定义,它接受一个集合作为参数,其原型如下:

    LineBasicMaterial( parameters )

    Parameters是一个定义材质外观的对象,它包含多个属性来定义材质,这些属性是:

    Color:线条的颜色,用16进制来表示,默认的颜色是白色。

    Linewidth:线条的宽度,默认时候1个单位宽度。

    Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看得出效果,如果线条很细,那么你几乎看不出效果了。

    Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。

    VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。(如果关于插值不是很明白,可以QQ问我,QQ在前言中你一定能够找到,嘿嘿,虽然没有明确写出)。

    Fog:定义材质的颜色是否受全局雾效的影响。

    我们这里使用了顶点颜色vertexColors: THREE.VertexColors,就是线条的颜色会根据顶点来计算。

    var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

    3、定义两种颜色,分别表示线条两个端点的颜色

    var color1 = new THREE.Color( 0x444444 ),
    color2 = new THREE.Color( 0xFF0000 );

    4、定义2个顶点的位置,并放到geometry中

    var p1 = new THREE.Vector3( -100, 0, 100 );
    var p2 = new THREE.Vector3(  100, 0, -100 );
    
    geometry.vertices.push(p1);
    geometry.vertices.push(p2);

    5、为4中定义的2个顶点,设置不同的颜色

    geometry.colors.push( color1, color2 );

    6、定义一条线

    定义线条,使用THREE.Line类

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

    第一个参数是几何体geometry,里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质,或者是线条的属性,表示线条以哪种方式取色。第三个参数是一组点的连接方式

    然后,将这条线加入到场景中

    scene.add(line);

    这样,场景中就会出现刚才的那条线段了

  • 相关阅读:
    nowcoderD Xieldy And His Password
    Codeforces681D Gifts by the List
    nowcoder80D applese的生日
    Codeforces961E Tufurama
    Codeforces957 Mahmoud and Ehab and yet another xor task
    nowcoder82E 无向图中的最短距离
    nowcoder82B 区间的连续段
    Codeforces903E Swapping Characters
    Codeforces614C Peter and Snow Blower
    Codeforces614D Skills
  • 原文地址:https://www.cnblogs.com/tipsydr/p/12505250.html
Copyright © 2011-2022 走看看