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

2018-02-09 17:44:09 人阅读

案例查看有问题?
全屏试试!

案例解析

 学习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="/lib/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>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多