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

时间：2022-11-01 19:36:39

学习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>




标签：

相关文章