5 Three.js一个好的结构书写

来源：互联网发布：网络猫和路由器的区别编辑：程序博客网时间：2024/06/13 05:36

学习three.js也有两天了，现在也在不间断的学习相关知识，了解three.js的规则。也做了两个简单的案例，感受到了three.js的强大，研究了一些别人的代码，现在想找到一种适合自己的书写代码。

今天，还真的找到了一种感觉特别适合自己的方法，自己写js的时候貌似也这么写。但是由于学了两个月的WebGL的基础，学的有点懵逼，感觉自己书写正常js的能力都快忘记了。今天，看到这个案例，感觉自己的灵感直接来到了。

每个three.js案例基本上都会包括渲染器、相机、场景、光源和模型。我以后书写相关代码会把它们封装成一个个的方法，然后等待页面加载完后，调用一下即可。

下面是我自己定义的方法名：

初始化渲染器：initRender

初始化相机：initCamera

初始化场景：initScene

初始化灯源：initLight

初始化模型：initModel

动画：animate

绘制：draw

下面是一个案例，生成了42条线，垂直交错：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Three框架</title>    <script src="build/three.js"></script>    <style type="text/css">        html, body {            margin: 0;            height: 100%;        }        div#canvas-frame {            border: none;            cursor: pointer;            width: 100%;            height: 100%;            background-color: #EEEEEE;        }        canvas {            display: block;        }    </style>    <script>        //渲染器        var renderer;        function initRender() {            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(70, width / height, 1, 1000);            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);        }        //模型        function initModel() {            var geometry = new THREE.Geometry();            geometry.vertices.push(new THREE.Vector3(-500, 0, 0));            geometry.vertices.push(new THREE.Vector3(500, 0, 0));            for (var i = 0; i <= 20; i++) {                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));                line.position.z = ( i * 50 ) - 500;                scene.add(line);                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));                line.position.x = ( i * 50 ) - 500;                line.rotation.y = 90 * Math.PI / 180;                scene.add(line);            }        }        //绘制        function draw() {            initRender();            initCamera();            initScene();            initLight();            initModel();            renderer.clear();            renderer.render(scene, camera);        }        //生成随机颜色        function randomColor() {            var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],                strHex = "0x",                index;            for (var i = 0; i < 6; i++) {                index = Math.round(Math.random() * 15);                strHex += arrHex[index];            }            return eval(strHex);        }    </script></head><body onload="draw();"><div id="canvas-frame"></div></body></html>

阅读全文

0 0