Three.js開發指南（1）：介紹

CopperDong發表於2018-04-20

https://github.com/josdirksen/learning-threejs

本地Web伺服器的不同環境：

用Python > python -m SimpleHTTPServer

用NPM > npm install -g http-server > http-server

用Mongoose -- 在Mac/Windows上可以移植

將書本程式碼放入Web服務根目錄

本書使用Three.js r60

HTML框架

<!DOCTYPE html>
<html>
    <head>
	  	<title>Example 01.01 - Basic skeleton </title>
	  	<script type="text/javascript" src="../libs/three.js"></script>
	  	<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
	  	<style>
	  		body{
	  			margin: 0;
	  			overflow: hidden;
	  		}
	    </style>
	    </head>
    <body>
    	<div id="WebGL-output">
    	</div>
    	<script type="text/javascript">
    		$(function () {
    			// here we'll put the Three.js stuff
    		});
    	</script>
    </body>
</html>

1.4 渲染並展示三維物件

建立第一個場景，新增幾個物體和一個相機

    	<script type="text/javascript">
    		$(function () {
    			// here we'll put the Three.js stuff
    			var scene = new THREE.Scene();  //場景
    			//相機
    			var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    			//渲染器
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setClearColorHex(0xEEEEEE);
    			renderer.setSize(window.innerWidth, window.innerHeight);
    			//座標軸
    			var axes = new THREE.AxisHelper(20);
    			scene.add(axes);
    			//平面
    			var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    			var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc} ); //材質
    			var plane = new THREE.Mesh(planeGeometry, planeMaterial);  //合併到網格物件
    			plane.rotation.x = -0.5*Math.PI;
    			plane.position.x = 15;
    			plane.position.y = 0;
    			plane.position.z = 0;
    			scene.add(plane);
    			//方塊
    			var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
    			var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true} );
    			var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    			cube.position.x = -4;
    			cube.position.y = 3;
    			cube.position.z = 0;
    			scene.add(cube);
    			//球體
    			var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    			var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: true} );
    			var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    			sphere.position.x = 20;
    			sphere.position.y = 4;
    			sphere.position.z = 2;
    			scene.add(sphere);
    			//相機
    			camera.position.x = -30;
    			camera.position.y = 40;
    			camera.position.z = 30;
    			camera.lookAt(scene.position);  //指向場景的中心
                //將renderer掛接到<div>元素
    			$("#WebGL-output").append(renderer.domElement);
    			renderer.render(scene, camera);
    		});
    	</script>

1.5 新增材質、燈光和陰影

光源

//光源
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );

1.6 用動畫擴充套件你的首個場景

setInterval( function, interval ); 並沒有跟顯示器的重畫同步，這可能會導致較高的CPU使用率，降低系統效率，引入requestAnimationFrame()方法

1.7 使用dat.GUI庫簡化試驗

Google建立的dat.GUI的庫

// GUI
var controls = new function() {
	this.rotationSpeed = 0.02;
	this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);

1.8 使用ASCII效果

使用ASCII效果，你可以把漂亮的動畫場景變成一個復古的、文字畫風格的動畫，而這隻需要幾行程式碼

<!DOCTYPE html>
<html>
    <head>
	  	<title>Example 01.01 - Basic skeleton </title>
	  	<script type="text/javascript" src="../libs/three.js"></script>
	  	<script type="text/javascript" src="../libs/stats.js"></script>
	  	<script type="text/javascript" src="../libs/dat.gui.js"></script>
	  	<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
	  	<style>
	  		body{
	  			margin: 0;
	  			overflow: hidden;
	  		}
	    </style>
	    </head>
    <body>
    	<div id="Stats-output"></div>
    	<div id="WebGL-output"></div>
    	<script type="text/javascript">
    		function initStats() {
    			var stats = new Stats();
    			stats.setMode(0);
    			stats.domElement.style.position = 'absolute';
    			stats.domElement.style.left = '0px';
    			stats.domElement.style.top = '0px';
    			$("#Stats-output").append( stats.domElement );
    			return stats;
    		}
    		$(function () {
    			// 統計圖
    			var stats = initStats();
    			// here we'll put the Three.js stuff
    			var scene = new THREE.Scene();  //場景
    			//相機
    			var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    			//渲染器
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setClearColorHex(0xEEEEEE);
    			renderer.setSize(window.innerWidth, window.innerHeight);
    			//座標軸
    			var axes = new THREE.AxisHelper(20);
    			scene.add(axes);
    			//平面
    			var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    			//var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc} ); //材質
    			var planeMaterial = new THREE.MeshLambertMaterial( {color: 0xffffff} ); //材質
    			var plane = new THREE.Mesh(planeGeometry, planeMaterial);  //合併到網格物件
    			plane.rotation.x = -0.5*Math.PI;
    			plane.position.x = 15;
    			plane.position.y = 0;
    			plane.position.z = 0;
    			scene.add(plane);
    			//方塊
    			var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
    			//var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true} );
    			var cubeMaterial = new THREE.MeshLambertMaterial( {color: 0xff0000 } );
    			var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    			cube.position.x = -4;
    			cube.position.y = 3;
    			cube.position.z = 0;
    			scene.add(cube);
    			//球體
    			var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    			//var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: true} );
    			var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff} );
    			var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    			sphere.position.x = 20;
    			sphere.position.y = 4;
    			sphere.position.z = 2;
    			scene.add(sphere);
    			//相機
    			camera.position.x = -30;
    			camera.position.y = 40;
    			camera.position.z = 30;
    			camera.lookAt(scene.position);  //指向場景的中心
    			//光源
    			var spotLight = new THREE.SpotLight( 0xffffff );
    			spotLight.position.set( -40, 60, -10 );
    			scene.add( spotLight );
    			// 渲染
	    		function renderScene() {
	    			stats.update();
	    			requestAnimationFrame(renderScene);
	    			renderer.render(scene, camera);
	    		}
	    		// GUI
	    		var controls = new function() {
	    			this.rotationSpeed = 0.02;
	    			this.bouncingSpeed = 0.03;
	    		}
	    		var gui = new dat.GUI();
	    		gui.add(controls, 'rotationSpeed', 0, 0.5);
	    		gui.add(controls, 'bouncingSpeed', 0, 0.5);
	    		//動畫
	    		var step = 0;
	    		function render() {
	    			//轉動方塊
	    			cube.rotation.x += controls.rotationSpeed;
	    			cube.rotation.y += controls.rotationSpeed;
	    			cube.rotation.z += controls.rotationSpeed;
	    			//彈跳球
	    			step += controls.bouncingSpeed;
	    			sphere.position.x = 20 + (10*(Math.cos(step)));   //建立一條光滑的軌跡
	    			sphere.position.y = 2 + (10*Math.abs(Math.sin(step)));
	    			requestAnimationFrame(render);
	    			renderer.render(scene, camera);
	    		}

                //將renderer掛接到<div>元素
    			$("#WebGL-output").append(renderer.domElement);
    			renderScene();
    			render();
    		});
    		
    	</script>
    </body>
</html>

應用模型開發指南上新介紹
2023-03-02
模型
Three.js開發指南（4）：使用Three.js的材質
2018-04-22
JS
Three.js開發指南（3）：使用Three.js裡的各種光源
2018-04-22
JS
Three.js開發指南（5 6）：使用Three.js的幾何體
2018-04-22
JS
three.js中的相機介紹
2020-12-25
JS
Three.js開發指南（7）：粒子和粒子系統
2018-04-22
JS
Oracle11G-SQL開發指南-1-簡介
2017-02-23
OracleSQL
PHP核心介紹及擴充套件開發指南—類和物件
2017-11-15
PHP套件物件
Three.js開發指南（2）：使用構建Three.js場景的基本元件
2018-04-22
JS元件
Three.js開發指南隨書原始碼下載地址
2018-08-23
JS原始碼
Three.js開發指南（10）：載入和使用紋理
2018-04-22
JS
ModStartCMS模組開發介紹
2021-12-17
HarmonyOS三方件開發指南(15)-LoadingView功能介紹
2021-03-29
View
鏈動2+1系統開發詳細介紹
2023-04-10
Three.js開發指南（9）：建立動畫和移動相機
2018-04-22
JS動畫
Elasticsearch 參考指南（介紹）
2018-10-11
Elasticsearch
陀螺世界商城開發（介紹）
2022-03-02
SJL 開發包1.0介紹
2004-10-14
鏈動2+1模式開發費用詳情介紹
2023-04-26
模式
基於xmpp openfire smack開發之openfire介紹和部署[1]
2015-01-12
Mac
Web專案開發介紹及實戰專案介紹
2019-03-26
Web
Web開發小工具介紹
2018-07-01
Web
Java/JavaWeb/開發環境介紹
2017-08-07
JavaWeb開發環境
微信公眾介面開發介紹
2014-04-30
Android開發 MeasureSpec介紹
2014-07-30
Android
Android開發之WebService介紹
2013-04-20
AndroidWeb
Android API 開發包介紹
2012-03-04
AndroidAPI
AngularJS 樣式指南介紹
2016-05-19
AngularJS
1. VUE介紹
2021-02-19
Vue
代理 1 背景介紹
2017-04-23
JNI/NDK開發指南(1)：JNI開發流程及HelloWorld
2015-03-19
☕[Java技術指南]（1）Class類檔案的結構介紹（上篇）
2021-06-09
Java
《CiscoASA裝置使用指南》一第1章　安全技術介紹
2017-05-02
Three.js開發指南（11）：定製著色器和渲染後期處理
2018-04-22
JS
Three.js開發指南（12）：用Physijs在場景中新增物理效果
2018-04-22
JS
12 Three.js官方文件介紹的相關物件功能列表
2017-07-21
JS物件
Flutter混合開發二-FlutterBoost使用介紹
2019-05-30
Flutter
介紹一個軟體開發工具
2019-07-12