THREEJS渲染七要素

渲染兩步驟：

1. 初始化；
2. 定義用戶接口；
3. 開啟渲染循環；
4. 調用用戶接口。

渲染循環七要素：

1. 定義渲染器和渲染窗口；
2. 定義場景；
3. 定義攝像機；
4. 定義光照；
5. 定義幾何體；
6. 定義材質貼圖；
7. 將所有物體添加到場景中。

下面是上述過程的具體代碼（注意其中的框架結構）：

import * as THREE from './threejs_lib/build/three.module.js';

        var camera, cube, scene, renderer;
        var defaultMaterial;

        init();
        renderLoop();



        function init() {
            // renderer definition
            renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000); // black

            // scene definition
            scene = new THREE.Scene();

            // camera definition
            //camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); // or THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera = new THREE.PerspectiveCamera(-2, 2, 1.5, -1.5, 1, 10); // or THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(0, 0, 5);
            scene.add(camera);


            // 2. material definition
            defaultMaterial = new THREE.MeshBasicMaterial({ color: 0xff0055, flatShading: true, vertexColors: THREE.VertexColors });
            // 1. geometry definition
            cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                defaultMaterial
            );
            cube.position.x = 0;
            cube.position.y = 0;
            cube.position.z = 0;
            cube.rotation.x = 0;
            cube.rotation.y = 0;
            cube.rotation.z = 0;
            scene.add(cube);
        }


        function operation() {

            cube.rotation.y += 0.1;
            console.log(cube.position.x);
            if (cube.position.x < 0) {
                cube.position.x += 0.01;
            } else if (cube.position.x >= 0) {
                cube.position.x -= 0.5;
            }
            if (cube.position.x >= 2) {
                cube.position.x -= 0.01;
            }
        }


        function renderLoop() {
            // operate via user interaction
            operation();

            // render
            renderer.render(scene, camera);

            requestAnimationFrame(renderLoop);
        }

[將上方代碼添加到HTML文件中即可查看效果]

作者：艾孜爾江