WebGL three.js學習筆記 加載外部模型以及Tween.js動畫
WebGL three.js學習筆記 加載外部模型以及Tween.js動畫
本文的程序實現了加載外部stl格式的模型，以及學習瞭如何把加載的模型變爲一個粒子系統，並使用Tween.js對該粒子系統進行動畫設置javascript
模型動畫demo演示(網頁加載速度可能會比較慢)
demo地址：https://nsytsqdtn.github.io/demo/naval_craft/naval_craftcss
demo截圖以下：
html
原模型截圖：
java
在咱們寫three.js的網頁的時候，大多時候並不須要咱們去手動創建模型，一些複雜的模型都是經過建模軟件去完成，因此在這裏去學習如何去將外部的模型加載到咱們的網頁中來。git
three.js支持導入的模型有不少，包括咱們常見的OBJ、FBX、STL、PLY、JSON等等格式，在這個程序中，我選擇了使用STL模型來進行學習。github
.stl 文件是在計算機圖形應用系統中，用於表示三角形網格的一種文件格式，經常使用於3d打印技術使用，由於STL格式的文件在網上能夠免費不用註冊的下載，比較方便。這裏推薦一個還不錯的網站，http://www.3dhoo.com/model ，裏面有不少免費直接下載STL格式的模型。web
加載外部模型
在three.js中，咱們要加載外部模型，就須要引入相應的js文件。好比我須要引入STL格式的文件，我就引入「three.js\examples\js\loaders\STLLoader.js」，其餘格式的js文件在loaders文件夾也都能找到，若是是three.js沒有支持導入的模型格式，就須要本身寫一個加載器，網上也有許多的教程。canvas
引入相應js文件之後，咱們首先要作的事建立一個加載器。數組
1let loader = new THREE.STLLoader();//建立stl的加載器，用加載器來加載stl模型
複製代碼
咱們要使用該加載器加載模型，就須要調用loader .load(filename,onSuccess(bufferGeometry),onProgress(xhr),onError(error))這個方法
其中：
filename是模型的路徑 onSuccess(bufferGeometry)是加載成功後回調處理(參數爲生成的模型的幾何體)，app
注意：這裏的幾何體不是咱們經常使用的geometry，而是bufferGeometry，它和geometry仍是有一些的區別，可是也均可以做爲THREE.Mesh（）的第一個參數穿進去。具體能夠進行百度。
onProgress(xhr)是加載過程當中回調處理(xhr對象屬性可計算出已完成加載百分比) onError(error)是失敗回調處理方法
通常咱們只須要使用前兩個參數就能夠完成工做。
1let loader = new THREE.STLLoader();//建立stl的加載器，用加載器來加載stl模型
2let loader.load("../../../asset/ship.stl", function (bufferGeometry) {//加載模型的方法，
3//第一個參數是模型的路徑，第二個參數時候咱們定義的回調函數，一旦模型加載成功，回調函數就會被調用
4let material = new THREE.MeshBasicMaterial();
5let mesh = new THREE.Mesh(bufferGeometry,material);
6scene.add(mesh);
7}
複製代碼
通常只須要這樣寫回調函數，模型就能夠成功加載。
但我在這裏想根據該模型去建立一個粒子系統，像本文開頭的那樣，因此咱們須要改一下代碼。
1 let loader = new THREE.STLLoader();//建立stl的加載器，用加載器來加載stl模型
2 group = new THREE.Object3D();
3 loader.load("../../../asset/ship.stl", function (bufferGeometry) {//加載模型的方法，第一個參數是模型的路徑，第二個參數時候咱們定義的回調函數，一旦模型加載成功，回調函數就會被調用
4 let geometry = new THREE.Geometry().fromBufferGeometry(bufferGeometry);//stl模型加載到js裏就會變成bufferGeometry類型，咱們先用一個方法把它變成Geometry類型
5 loadGeometry = geometry.clone();//建立該geometry的克隆體，後面會用到
6 let material = new THREE.PointsMaterial({//點雲的材質
7 color: 0xffffff,
8 transparent: true,
9 opacity: 1,
10 size: 0.5,//可自由修改看看效果
11 blending: THREE.AdditiveBlending,
12 map: generateSprite()//自定義畫布圖案來充當每個粒子的材質
13 });
14 //建立點雲，以及設置它的位置及旋轉角度，調整到最好看的地方
15 group = new THREE.Points(geometry, material);
16 group.sortParticles = true;
17 group.position.set(0,0,0);
18 group.position.x -=70;
19 group.rotation.x = Math.PI*3/2;
複製代碼
其中： 咱們使用THREE.Geometry().fromBufferGeometry(bufferGeometry)函數把bufferGeometry類型改成geometry類型，由於該類型咱們更加熟悉，後面使用起來也比較方便。
generateSprite()函數是在以前的文章也介紹過的，建立一個顏色漸變的畫布，來充當粒子系統紋理，這裏就再也不贅述了。具體代碼以下：
1//自定義漸變顏色的畫布，前面的文章有介紹，這個方法在寫three.js程序很經常使用
2 function generateSprite() {
3
4 var canvas = document.createElement('canvas');
5 canvas.width = 16;
6 canvas.height = 16;
7
8 var context = canvas.getContext('2d');
9 var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
10 gradient.addColorStop(0, 'rgba(255,255,255,1)');
11 gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
12 gradient.addColorStop(0.4, 'rgba(0,0,255,1)');
13 gradient.addColorStop(1, 'rgba(0,0,0,1)');
14
15 context.fillStyle = gradient;
16 context.fillRect(0, 0, canvas.width, canvas.height);
17
18 var texture = new THREE.Texture(canvas);
19 texture.needsUpdate = true;
20 return texture;
21 }
複製代碼
Tween.js動畫
tweenjs 是使用 JavaScript 中的一個簡單的補間動畫庫，支持數字、對象的屬性和 CSS 樣式屬性的賦值。
tweenjs 以平滑的方式修改元素的屬性值，須要傳遞給 tween 要修改的值、動畫結束時的最終值和動畫花費時間，以後 tween 引擎就能夠計算從開始動畫點到結束動畫點之間值，從而產平生滑的動畫效果。
咱們首先須要引入tween.js文件，該文件的路徑是「three.js\examples\js\libs\tween.min.js」，也能夠直接百度搜索tween.js去下載。
具體的用法是：
1let posSrc = {pos: 0};//建立一個posSrc的對象，該對象裏面有pos的屬性，並初始化該屬性爲0
2let tween = new TWEEN.Tween(posSrc).to({pos: 1}, 5000);//建立tween的補間動畫，使posSrc中的pos屬性的值在5000ms內從0到1變化
3tween.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
複製代碼
咱們建立了TWEEN.Tween對象，這個對象會確保x屬性值在5000毫秒內從0變化到1。經過Tweenjs,你還能夠指定屬性值是如何變化的，是線性的、指數性的，仍是其餘任何可能的方式。屬性值在指定時間內的變化被稱爲easing(緩動)，在Tween.js中你可使用easing()方法來配置緩動效果。咱們還能夠建立更多的TWEEN.Tween對象，並使用chain(TWEEN.Tween)函數連接多個補間動畫。
咱們還須要一個update的函數，在每次更新補間的時候，均可以去更新每一個粒子的位置，來實現的動畫效果。
1 let posSrc = {pos: 0};//建立一個posSrc的對象，該對象裏面有pos的屬性
2 //並初始化該屬性爲0
3 let tween = new TWEEN.Tween(posSrc).to({pos: 1}, 5000);//建立tween的補間動畫
4 //使posSrc中的pos屬性的值在5000ms內從0到1變化
5 tween.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
6 let tweenStand = new TWEEN.Tween(posSrc).to({pos: 1}, 2000);//讓動畫在pos的值
7 //變爲1後中止一段時間，方便咱們觀察，因此再建立一個tween，讓pos從1到1（即不變）
8 tween.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
9 let tweenBack = new TWEEN.Tween(posSrc).to({pos: 0}, 5000);//建立tweenBack的
10 //補間動畫，和初始相反，使posSrc中的pos屬性的值在5000ms內從1到0變化
11 tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
12 //每個補間動畫之間使用chain()鏈接起來
13 tween.chain(tweenStand);
14 tweenStand.chain(tweenBack);
15 tweenBack.chain(tween);
16
17 //在補間的過程當中，讓全部的粒子開始移動
18 let onUpdate = function () {
19 let pos = posSrc.pos;//定義一個pos，賦值爲posSrc對象的pos屬性
20 let count = 0;
21 loadGeometry.vertices.forEach(function (e) {//遍歷每一個頂點
22 //這裏須要遍歷剛剛克隆的geometry
23 //（暫時不是很明白這點，反正若是遍歷group.geometry.vertices
24 //動畫系統會讓整個物體一塊兒移動，沒有伸展開來的效果）。
25 var newZ = e.z * pos;//獲得新的Z值，根據當前的pos值去改變
26 group.geometry.vertices[count++].set(e.x, e.y, newZ);//設置每一個頂點的位置
27 //group.geometry.vertices是數組類型，因此用count做爲索引
28 group.geometry.verticesNeedUpdate = true;//重要，否則會沒有動畫效果
29 });
30 group.sortParticles = true;
31 };
32 //tween在每次更新後會執行tween.onUpdate()函數
33 //裏面的參數就是咱們自定義要讓它若是去運動的函數，即上面寫的onUpdate
34 tween.onUpdate(onUpdate);
35 tweenStand.onUpdate(onUpdate);
36 tweenBack.onUpdate(onUpdate);
37
38 tween.start();//開啓tween
複製代碼
在這段代碼中，咱們建立了三個個補間: tween、tweenStand、tweenBack。第一個補間定義了position屬性如何從1過渡到0,第三個恰好相反，第二個是讓動畫暫時停下。經過chain(方法能夠將這三個補間銜接起來，這樣當動畫啓動以後，程序就會在這三個補間循環。代碼最後定義的是onUpdate()方法，這個方法遍歷粒子系統中的全部頂點，並使用補間(this.pos)提供的位置更新頂點的位置。
補間動畫須要在模型加載完成後就啓動，因此咱們在下面的函數末尾調用tween.start()方法:
若是以前沒有把bufferGeometry轉化爲Geometry類型，要去更改每一個頂點的位置會變得比較麻煩。
最後還須要告知three.js何時刷新全部的補間動畫，因此在render()函數里加上TWEEN.update();
1 function render() {
2 TWEEN.update();//通知TWEEN在何時去刷新補間動畫，重要，不然會沒有動畫
3 //性能監控器的更新
4 stats.update();
5 renderer.clear();
6 requestAnimationFrame(render);
7 renderer.render(scene, camera);
8 }
複製代碼
到了這裏，程序的大致就已經完成，剩下的就是建立場景，攝像機，渲染器等等東西以及調整模型的位置。這裏再也不贅述。
完整的代碼以下:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Naval Craft Sprite</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/tween.min.js"></script>
11 <script src="../../import/STLLoader.js"></script>
12 <style type="text/css">
13 div#WebGL-output {
14 border: none;
15 cursor: pointer;
16 width: 100%;
17 height: 850px;
18 background-color: #333333;
19 }
20 </style>
21</head>
22<body onload="threeStart()">
23<div id="WebGL-output"></div>
24<script>
25 let camera, renderer, scene,controller;
26 function initThree() {
27 //渲染器初始化
28 renderer = new THREE.WebGLRenderer({
29 antialias: true//抗鋸齒開啓
30 });
31 //設置渲染的大小
32 renderer.setSize(window.innerWidth, window.innerHeight);
33 //設置渲染的顏色
34 renderer.setClearColor(0x333333);
35 renderer.shadowMapEnabled = true;//開啓陰影的渲染
36 renderer.shadowMapType = THREE.PCFSoftShadowMap;//設置陰影類型爲柔和
37 document.getElementById("WebGL-output").appendChild(renderer.domElement);//將渲染添加到div中
38
39 //初始化攝像機，這裏使用透視投影攝像機
40 camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);
41 camera.position.set(35, 35, 75);//相機的位置，自由調整
42 camera.up.x = 0;//設置攝像機的上方向爲哪一個方向，這裏定義攝像的上方爲Y軸正方向
43 camera.up.y = 1;
44 camera.up.z = 0;
45 //攝像機對準的地方
46 camera.lookAt(0, 0, 0);
47
48 //初始化場景
49 scene = new THREE.Scene();
50
51 //相機的移動
52 controller = new THREE.OrbitControls(camera, renderer.domElement);
53 //相機圍繞旋轉的目標，設置爲原點
54 controller.target = new THREE.Vector3(0, 0, 0);
55
56 }
57
58 let loadGeometry;
59 let group;
60
61 function initObject() {
62 let loader = new THREE.STLLoader();//建立stl的加載器，用加載器來加載stl模型
63 group = new THREE.Object3D();
64 loader.load("../../asset/naval_craft.stl", function (bufferGeometry) {//加載模型的方法，第一個參數是模型的路徑，第二個參數時候咱們定義的回調函數，一旦模型加載成功，回調函數就會被調用
65 let geometry = new THREE.Geometry().fromBufferGeometry(bufferGeometry);//stl模型加載到js裏就會變成bufferGeometry類型，咱們先用一個方法把它變成Geometry類型
66 loadGeometry = geometry.clone();//建立該geometry的克隆體，後面會用到
67 let material = new THREE.PointsMaterial({//點雲的材質
68 color: 0xffffff,
69 transparent: true,
70 opacity: 1,
71 size: 0.5,//可自由修改看看效果
72 blending: THREE.AdditiveBlending,
73 map: generateSprite()//自定義畫布圖案來充當每個粒子的材質
74 });
75 //建立點雲，以及設置它的位置及旋轉角度，調整到最好看的地方
76 group = new THREE.Points(geometry, material);
77 group.sortParticles = true;
78 group.position.set(0,0,0);
79 group.position.x -=70;
80 group.rotation.x = Math.PI*3/2;
81
82 let posSrc = {pos: 0};//建立一個posSrc的對象，該對象裏面有pos的屬性，並初始化該屬性爲0
83 let tween = new TWEEN.Tween(posSrc).to({pos: 1}, 5000);//建立tween的補間動畫，使posSrc中的pos屬性的值在5000ms內從0到1變化
84 tween.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
85 let tweenStand = new TWEEN.Tween(posSrc).to({pos: 1}, 2000);//讓動畫在pos的值變爲1後中止一段時間，方便咱們觀察，因此再建立一個tween，讓pos從1到1（即不變）
86 tween.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
87 let tweenBack = new TWEEN.Tween(posSrc).to({pos: 0}, 5000);//建立tweenBack的補間動畫，和初始相反，使posSrc中的pos屬性的值在5000ms內從1到0變化
88 tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);//配置緩動效果
89 //每個補間動畫之間使用chain()鏈接起來
90 tween.chain(tweenStand);
91 tweenStand.chain(tweenBack);
92 tweenBack.chain(tween);
93
94 //在補間的過程當中，讓全部的粒子開始移動
95 let onUpdate = function () {
96 let pos = posSrc.pos;//定義一個pos，賦值爲posSrc對象的pos屬性
97 let count = 0;
98 loadGeometry.vertices.forEach(function (e) {//遍歷每一個頂點，這裏須要遍歷剛剛克隆的geometry
99 var newZ = e.z * pos;//獲得新的Z值，根據當前的pos值去改變
100 group.geometry.vertices[count++].set(e.x, e.y, newZ);//設置每一個頂點的位置，group.geometry.vertices是數組類型，因此用count做爲索引
101 group.geometry.verticesNeedUpdate = true;//重要，否則會沒有動畫效果
102 });
103 group.sortParticles = true;
104 };
105 //tween在每次更新後會執行tween.onUpdate()函數，裏面的參數就是咱們自定義要讓它若是去運動的函數，即上面寫的onUpdate
106 tween.onUpdate(onUpdate);
107 tweenStand.onUpdate(onUpdate);
108 tweenBack.onUpdate(onUpdate);
109
110 tween.start();//開啓tween
111 scene.add(group);
112 });
113 }
114
115 //自定義漸變顏色的畫布，前面的文章有介紹，這個方法在寫three.js程序很經常使用
116 function generateSprite() {
117
118 var canvas = document.createElement('canvas');
119 canvas.width = 16;
120 canvas.height = 16;
121
122 var context = canvas.getContext('2d');
123 var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
124 gradient.addColorStop(0, 'rgba(255,255,255,1)');
125 gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
126 gradient.addColorStop(0.4, 'rgba(0,0,255,1)');
127 gradient.addColorStop(1, 'rgba(0,0,0,1)');
128
129 context.fillStyle = gradient;
130 context.fillRect(0, 0, canvas.width, canvas.height);
131
132 var texture = new THREE.Texture(canvas);
133 texture.needsUpdate = true;
134 return texture;
135
136 }
137
138 //渲染函數
139 function render() {
140 TWEEN.update();//通知TWEEN在何時去刷新補間動畫，重要，不然會沒有動畫
141 //性能監控器的更新
142 stats.update();
143 renderer.clear();
144 requestAnimationFrame(render);
145 renderer.render(scene, camera);
146 }
147
148 //功能函數
149 function setting() {
150 loadFullScreen();
151 loadAutoScreen(camera, renderer);
152 loadStats();
153 }
154
155 //運行主函數
156 function threeStart() {
157 initThree();
158 initObject();
159 setting();
160 render();
161 }
162</script>
163</body>
164</html>
複製代碼
相關文章
- 1. WebGL three.js學習筆記 加載外部模型以及Tween.js動畫
- 2. Three.js學習筆記
- 3. vue中three.js加載外部模型
- 4. WebGL three.js學習筆記 陰影與實現物體的動畫
- 5. 55 - three.js 筆記 - 使用 Tween.js 實現動畫效果
- 6. 《Three.js學習筆記01》認識three.js
- 7. three.js加載obj模型 鍵盤控制模型局部動做
- 8. WebGL three.js學習筆記 建立three.js代碼的基本框架
- 9. UE4學習筆記（一）加載模型動畫
- 10. WebGL學習筆記（十二）：加載模型文件
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • ionic 加載動作 - ionic 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章