WebGL three.js學習筆記陰影與實現物體的動畫

時間 2019-11-07

標籤 webgl three.js 學習筆記陰影實現物體動畫欄目 JavaScript 简体版

原文原文鏈接

實現物體的旋轉、跳動以及場景陰影的開啓與優化

本程序將建立一個場景，並實現物體的動畫效果
運行的結果如圖：javascript

完整代碼以下：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <title>Three.js</title>
 6    <script src="../../../Import/three.js"></script>
 7    <script src="../../../Import/stats.js"></script>
 8    <script src="../../../Import/Setting.js"></script>
 9    <script src="../../../Import/OrbitControls.js"></script>
 10    <script src="../../../Import/dat.gui.min.js"></script>
 11    <style type="text/css">
 12        div#canvas-frame {
 13            border: none;
 14            cursor: pointer;
 15            width: 100%;
 16            height: 850px;
 17            background-color: #333333;
 18        }
 19    </style>
 20</head>
 21<body onload="threeStart()">
 22<div id="canvas-frame"></div>
 23<script>
 24    //控制面板中須要的兩個數據
 25    let control = new function () {
 26        this.rotationSpeed = 0.01;
 27        this.jumpSpeed = 0.03;
 28    };
 29    let renderer, camera, scene;
 30    let controller;
 31    let width,height;
 32
 33    //初始化渲染器
 34    function initThree() {
 35        width = document.getElementById('canvas-frame').clientWidth;
 36        height = document.getElementById('canvas-frame').clientHeight;
 37        renderer = new THREE.WebGLRenderer({
 38            antialias: true
 39        });//定義渲染器
 40        renderer.setSize(width, height);//設置渲染的寬度和高度
 41        document.getElementById("canvas-frame").appendChild(renderer.domElement);//將渲染器加在html中的div裏面
 42        renderer.setClearColor(0x333333, 1.0);//渲染的顏色設置
 43        renderer.shadowMapEnabled = true;//開啓陰影，默認是關閉的，太影響性能
 44        renderer.shadowMapType = THREE.PCFSoftShadowMap;//陰影的一個類型，能夠不設置對比看效果
 45    }
 46    //初始化攝像機
 47    function initCamera() {
 48        camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//perspective是透視攝像機，這種攝像機看上去畫面有3D效果
 49
 50        //攝像機的位置
 51        camera.position.x = 50;
 52        camera.position.y = 50;
 53        camera.position.z = 50;
 54        camera.up.x = 0;
 55        camera.up.y = 1;//攝像機的上方向是Y軸
 56        camera.up.z = 0;
 57        camera.lookAt(0, 0, 0);//攝像機對焦的位置
 58        //這三個參數共同做用才能決定畫面
 59    }
 60    //初始化場景
 61    function initScene() {
 62        scene = new THREE.Scene();
 63    }
 64    //攝像機的控制，能夠採用鼠標拖動來控制視野
 65    function cameraControl() {
 66        controller = new THREE.OrbitControls(camera, renderer.domElement);
 67        controller.target = new THREE.Vector3(0, 0, 0);
 68    }
 69    //一個很方便的控制面板，方便更改程序的參數
 70    function datGUI() {
 71        let gui = new dat.GUI();
 72        //能夠設置能夠調動的範圍
 73        gui.add(control, "rotationSpeed", 0, 0.05);
 74        gui.add(control, "jumpSpeed", 0, 0.08);
 75    }
 76    //初始化燈光
 77    function initLight() {
 78        let light = new THREE.SpotLight(0xffffff, 1.0, 0);//點光源
 79        light.position.set(-40, 60, -10);
 80        light.castShadow = true;//開啓陰影
 81        light.shadowMapWidth = 8192;//陰影的分辨率
 82        light.shadowMapHeight = 8192;
 83        scene.add(light);
 84        light = new THREE.AmbientLight(0xffffff, 0.2);//環境光，若是不加，點光源照不到的地方就徹底是黑色的
 85        scene.add(light);
 86    }
 87
 88    let cube;
 89    let sphere;
 90
 91    //初始化物體
 92    function initObject() {
 93        //定義了一個地面
 94        let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
 95        let planeMaterial = new THREE.MeshLambertMaterial({
 96            color: 0xcccccc,
 97        });
 98        let plane = new THREE.Mesh(planeGeometry, planeMaterial);
 99        plane.rotation.x = -0.5 * Math.PI;
100        plane.position.x = 15;
101        plane.receiveShadow = true;//開啓地面的接收陰影
102        scene.add(plane);//添加到場景中
103
104        //定義了一個方塊
105        let cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
106        let cubeMaterial = new THREE.MeshLambertMaterial({
107            color: 0xff1111,
108        });
109        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
110        cube.position.x = -4;
111        cube.position.y = 3;
112        cube.position.z = 0;
113        cube.castShadow = true;//開啓陰影
114        scene.add(cube);
115
116        //定義了一個球體
117        let sphereGeometry = new THREE.SphereGeometry(4, 100, 100);
118        let sphereMaterial = new THREE.MeshLambertMaterial({
119            color: 0xba7890,
120        });
121        sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
122        sphere.position.x = 20;
123        sphere.position.y = 4;
124        sphere.position.z = 2;
125        sphere.castShadow = true;//開啓陰影
126        scene.add(sphere);
127    }
128    //方塊的自動旋轉
129    function cubeRotation() {
130        cube.rotation.x += control.rotationSpeed;
131        cube.rotation.y += control.rotationSpeed;
132        cube.rotation.z += control.rotationSpeed;
133    }
134
135    let step = 0;
136    //球體的拋物線運動軌跡
137    function boxJump() {
138        step += control.jumpSpeed;
139        sphere.position.x = 20 + 10 * (Math.cos(step));
140        sphere.position.y = 4 + 10 * (Math.abs(Math.sin(step)));
141    }
142    //定義的一個功能文件
143    function initSetting() {
144        loadAutoScreen(camera,renderer);
145        loadFullScreen();
146        loadStats();
147    }
148    //主函數
149    function threeStart() {
150        initThree();
151        initCamera();
152        initScene();
153        initLight();
154        initObject();
155        cameraControl();
156        datGUI();
157        initSetting();
158        animation();
159    }
160    //動畫
161    function animation() {
162        cubeRotation();//方塊旋轉函數
163        boxJump();//球體運動函數
164        stats.update();//更新性能檢測器
165
166        renderer.clear();
167        renderer.render(scene, camera);//開始渲染
168
169        requestAnimationFrame(animation);//重複執行此函數，不停的渲染，達到動畫的效果
170    }
171</script>
172</body>
173</html>
複製代碼

其中OrbitControls.js和dat.gui.min.js這兩個文件都是Three.js自帶的兩個很好用的工具，第一個是可讓攝像機有軌道地進行移動，而不用再本身寫函數去實現，第二個是一個輕量級的圖形用戶界面庫（GUI 組件），使用這個庫能夠很容易地建立出可以改變代碼變量的界面組件，方便咱們測試程序。css

另外若是想要在程序中開啓陰影的話首先須要把renderer.shadowMapEnabled設置爲true，默認是關閉的，由於實現陰影的效果是比較消耗性能的。同時要把light的投擲陰影開啓light.castShadow = true，可是並非全部的燈光均可以開啓，好比環境光就不能夠。每個須要產生陰影的物體也要開啓陰影，咱們須要用地面來接收陰影，因此也須要開啓地面的接收陰影
plane.receiveShadow = true；
cube.castShadow = true;
sphere.castShadow = true;
如今的效果是這樣的：
html

能夠看到，陰影是比較難看的，因此設置一些陰影的類型，PCFSoftShadowMap能讓邊緣柔和，但只是基於像素顆粒的邊緣柔和。咱們能夠先使用此類型，而後再提升陰影的分辨率light.shadowMapWidth = 8192;
light.shadowMapHeight = 8192;
默認的值應該是1024。
此時的陰影效果是這樣的