ThreeJS学习笔记（3）-简单画线

来源：互联网发布：闽南语歌曲心事谁人知编辑：程序博客网时间：2024/05/29 05:02

画线具体代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <script src="js/three.js" type="text/javascript"></script>            </head>    <body>    <script  type="text/javascript" >        // 老三样 场景scene，相机camera，渲染器render        var scene=new THREE.Scene();        // 相机        var camera = new THREE.PerspectiveCamera(45,1,1,1000);        camera.position.set(0,0,100);        camera.lookAt(new THREE.Vector3(0,0,0));         // 渲染器        var renderer=new THREE.WebGLRenderer();        renderer.setSize(window.innerWidth,window.innerHeight);        //显示在窗体        document.body.appendChild(renderer.domElement);               //定义材质THREE.LineBasicMaterial . MeshBasicMaterial...都可以        var material = new THREE.LineBasicMaterial({color:0x0000ff});        // 空几何体，里面没有点的信息,不想BoxGeometry已经有一系列点，组成方形了。        var geometry = new THREE.Geometry();        // 给空白几何体添加点信息，这里写3个点，geometry会把这些点自动组合成线，面。        geometry.vertices.push(new THREE.Vector3(-10,0,0));        geometry.vertices.push(new THREE.Vector3(0,10,0));        geometry.vertices.push(new THREE.Vector3(0,5,0));        //线构造        var line=new THREE.Line(geometry,material);        // 加入到场景中        scene.add(line);                          // 渲染        renderer.render(scene,camera);                    </script>    </body></html>

通过修改，编写了一个比较规范的架构：

<!DOCTYPE html><html><head><title></title><style type="text/css">div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}</style><script src="js/three.js"></script><script src="js/jquery.js"></script><script>//定义场景并初始化var scene;function initScene(){scene = new THREE.Scene();}//定义相机并初始化var camera;function initCamera(){camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);camera.position.set(0,1000,0);camera.lookAt(new THREE.Vector3(0,0,0));}//定义渲染器并初始化var renderer;function initRenderer(){renderer= new THREE.WebGLRenderer();width=$("#canvas-frame").width();height=$("#canvas-frame").height();renderer.setSize(width,height);$("#canvas-frame").append(renderer.domElement);renderer.setClearColor(0x39609b,1);}//定义灯光并初始化var light;function initLight(){light=new THREE.DirectionalLight(0xFF0000,1.0,0);light.position.set(100,100,200);scene.add(light);}function initObject(){var geometry = new THREE.Geometry();var material = new THREE.MeshBasicMaterial({ vertexColors: true });var color1=new THREE.Color(0x444444);var color2=new THREE.Color(0xFF0000);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);scene.add(line);}function threeStart(){initScene();initCamera();initRenderer();initLight();initObject();// 渲染renderer.render(scene,camera); }</script></head><body onload="threeStart();"><div id="canvas-frame"></div></body></html>

阅读全文

0 0