5 Three.js一个好的结构书写-CFANZ编程社区

学习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,width,height;

        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 = 900;

            camera.position.z = 0;

            camera.lookAt(new THREE.Vector3(0,0,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 object = new THREE.AxesHelper(500);

            scene.add(object);



            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);



            }



            console.log(scene);

        }



        //绘制

        function draw() {

            initRender();

            initCamera();

            initScene();

            initLight();

            initModel();

            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>