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
HarmonyOS三方件開發指南(15)-LoadingView功能介紹
2021-03-29
View
Three.js開發指南（7）：粒子和粒子系統
2018-04-22
JS
Three.js開發指南（2）：使用構建Three.js場景的基本元件
2018-04-22
JS元件
Three.js開發指南隨書原始碼下載地址
2018-08-23
JS原始碼
Three.js開發指南（10）：載入和使用紋理
2018-04-22
JS
Elasticsearch 參考指南（介紹）
2018-10-11
Elasticsearch
鏈動2+1系統開發詳細介紹
2023-04-10
BookKeeper 介紹(1)--簡介
2024-05-26
iOS開發- reloadData方法介紹
2024-07-24
iOS
陀螺世界商城開發（介紹）
2022-03-02
ModStartCMS模組開發介紹
2021-12-17
鏈動2+1模式開發費用詳情介紹
2023-04-26
模式
Web專案開發介紹及實戰專案介紹
2019-03-26
Web
Three.js開發指南（9）：建立動畫和移動相機
2018-04-22
JS動畫
1. VUE介紹
2021-02-19
Vue
Android開發 - 掌握ConstraintLayout（二）介紹
2018-10-31
AndroidAI
Kotlin on Android 開發環境介紹
2018-09-15
KotlinAndroid開發環境
Web開發小工具介紹
2018-07-01
Web
Apple開發者賬號介紹
2020-10-14
APP
SOLIDWORKS二次開發介紹
2022-10-13
Solid
☕[Java技術指南]（1）Class類檔案的結構介紹（上篇）
2021-06-09
Java
Three.js開發指南（12）：用Physijs在場景中新增物理效果
2018-04-22
JS
VS Code外掛開發介紹（二）
2019-02-16
iOS混合開發庫(GICXMLLayout)一、介紹
2019-01-04
iOSXML
介紹一個軟體開發工具
2019-07-12
Flutter混合開發二-FlutterBoost使用介紹
2019-05-30
Flutter
Harmony 應用開發常用元件介紹
2024-11-19
元件
iOS開發-UITabbarController的介紹與使用
2024-06-30
iOSUItabBarController
元宇宙鏈遊開發與介紹
2022-06-06
元宇宙
rk3568核心板開發介紹
2021-12-01
1、Oracle 基礎介紹
2024-04-14
Oracle
Docker_Docker介紹1
2024-05-28
Docker
Laravel: Up and Running （1）：介紹
2018-04-02
Laravel