ThreeJS基本坐标设置

1    绘制基本的场景面板，XY平面绘制网格线，建立起基本的坐标。左右为为X轴，右为正；前后为Y轴，前为正；山下为Z轴，上为正。

2     ThreeJS中的点对象，比如：默认都用 camera.lookAt(scene.position);其实，也可以自己修改： camera.lookAt(new THREE.Vector3(0, 0, 0));

 3     线条绘制：

       var geometryX = new THREE.Geometry();
        geometryX.vertices.push(new THREE.Vector3(-12,0,0),new THREE.Vector3( 12,0,0));
        var materialX = new THREE.LineBasicMaterial({ color: 0xff0000 });
        var lineX = new THREE.Line(geometryX, materialX);   
        scene.add(lineX);

        也可以绘制多条线段，Line：单纯线条；LineLoop：封闭区间；LineSegments：每两个顶点一条线段

4   直接上代码

最后是效果图 ,

           //创建一个WebGL渲染器并设置其大小,设置抗锯齿设置
            var renderer = new THREE.WebGLRenderer({antialias: true });
            renderer.setClearColor(new THREE.Color(0x7696f1));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置 

  锯齿处理前后，效果很明显

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！