2. 程式人生 > >ThreeJS學習筆記（6）- 讓場景動起來

ThreeJS學習筆記（6）- 讓場景動起來

阿新 • • 發佈：2019-02-19
場景中的物體怎麼才能運動起來。我們這裡從《古蘭經》講起，這樣，你永遠不會忘記。

《古蘭經》上有這樣一個故事：一天穆罕穆德告訴人們說大山會向我們走來。於是人們就遠望大山，看它怎麼走過來，可是等了好長時間大山還是紋絲不動的在那裡，人們就問穆罕穆德，大山也沒向我們走來啊。默罕默德告訴人們：既然大山沒向我們走來，那我們就向大山走去吧。於是人們來到了大山的山頂，人們征服了那座大山。

這個故事揭示了場景動起來的方法，第一種方法是讓物體在座標系裡面移動，攝像機不動。第二種方法是讓攝像機在座標系裡面移動，物體不動。這樣場景就能夠動起來了。攝像機可以理解我們自己的眼睛。

<1> 讓攝像機在座標系裡面移動

<!DOCTYPE html>

<html>
<head>
	<title>
	</title>
	<style type="text/css">
		body{
			margin:0;
		}
		div#canvas-frame {
			border: none;
			cursor: pointer;
			width: 100%;
			height: 600px;
			background-color: #EEEEEE;
		}
	</style>
	<script src="js/three.js"></script>
	<script src="js/jquery.js"></script>
	<script>
		//定義場景並初始化
		var scene;
		function initScene(){
			scene = new THREE.Scene();
		}
		
		//定義相機並初始化
		var camera;
		function initCamera(){
			camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
			camera.position.set(0,100,500);
			camera.lookAt(new THREE.Vector3(0,0,0));
		}
		
		//定義渲染器並初始化
		var renderer;
		function initRenderer(){
			renderer= new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);
			$("#canvas-frame").append(renderer.domElement);
			renderer.setClearColor(0x39609b,1);
		}
		
		//定義燈光並初始化
		var light;
		function initLight(){
			light=new THREE.DirectionalLight(0xFF0000,1.0,0);
			light.position.set(100,100,200);
			scene.add(light);
		}
		
		//新增漸變線
		function initObject(){
			var geometry = new THREE.Geometry();
			var material = new THREE.MeshBasicMaterial({ vertexColors: true });
			var color1=new THREE.Color(0x444444);
			var color2=new THREE.Color(0xFF0000);
			
			var p1=new THREE.Vector3(-100,0,100);
			var p2=new THREE.Vector3(100,0,-100);
			
			geometry.vertices.push(p1);
			geometry.vertices.push(p2);
			geometry.colors.push(color1,color2);
			
			var line=new THREE.Line(geometry,material);
			
			scene.add(line);
		}
		
		//新增3D文字
		function init3DText(fontloader){
			var fontloader;
			fontloader = new THREE.FontLoader();
			fontloader.load('fonts/helvetiker_bold.typeface.json',function(font){
				var text="FOX";
				var g=new THREE.TextGeometry(text,{
					font:font,
					size:50,
					height:30,
				});
				
				g.computeBoundingBox();
				//3D文字材質
				var m = new THREE.MeshBasicMaterial({color:0xffff00});
				var mesh = new THREE.Mesh(g,m);			
				// 加入到場景中
				scene.add(mesh);  
			});
		}
		
		//新增網路線
		function initNetLine(){
			    var geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

                for ( var i = 0; i <= 100; i ++ ) {

                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );
                    line.position.z = ( i * 10 ) - 500;
                    scene.add( line );

                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );
                    line.position.x = ( i * 10 ) - 500;
                    line.rotation.y = 90 * Math.PI / 180;
                    scene.add( line );

                }
		}
	
		function threeStart(){
			initScene();
			initCamera();
			initRenderer();
			initLight();
			//initObject();
			//init3DText();
			initNetLine();
			// 渲染
			animate();
		}
		
        function animate(){
			camera.position.z =camera.position.z - 1;
            requestAnimationFrame( animate );
             // 渲染
            renderer.render(scene,camera);   
        }
	</script>
</head>
<body onload="threeStart();">
	<div id="canvas-frame"></div>
</body>
</html>
<2>物體在座標系裡面移動，攝像機不動 
<!DOCTYPE html>

<html>
<head>
	<title>
	</title>
	<style type="text/css">
		body{
			margin:0;
		}
		div#canvas-frame {
			border: none;
			cursor: pointer;
			width: 100%;
			height: 600px;
			background-color: #EEEEEE;
		}
	</style>
	<script src="js/three.js"></script>
	<script src="js/jquery.js"></script>
	<script>
		//定義場景並初始化
		var scene;
		function initScene(){
			scene = new THREE.Scene();
		}
		
		//定義相機並初始化
		var camera;
		function initCamera(){
			camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
			camera.position.set(0,100,500);
			camera.lookAt(new THREE.Vector3(0,0,0));
		}
		
		//定義渲染器並初始化
		var renderer;
		function initRenderer(){
			renderer= new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);
			$("#canvas-frame").append(renderer.domElement);
			renderer.setClearColor(0x39609b,1);
		}
		
		//定義燈光並初始化
		var light;
		function initLight(){
			light=new THREE.DirectionalLight(0xFF0000,1.0,0);
			light.position.set(100,100,200);
			scene.add(light);
		}
		
		var line;
		//新增漸變線
		function initObject(){
			var geometry = new THREE.Geometry();
			var material = new THREE.MeshBasicMaterial({ vertexColors: true });
			var color1=new THREE.Color(0x444444);
			var color2=new THREE.Color(0xFF0000);
			
			var p1=new THREE.Vector3(-100,0,100);
			var p2=new THREE.Vector3(100,0,-100);
			
			geometry.vertices.push(p1);
			geometry.vertices.push(p2);
			geometry.colors.push(color1,color2);
			
			line=new THREE.Line(geometry,material);
			
			scene.add(line);
		}
		
		var mesh;
		//新增3D文字
		function init3DText(fontloader){
			var fontloader;
			fontloader = new THREE.FontLoader();
			fontloader.load('fonts/helvetiker_bold.typeface.json',function(font){
				var text="FOX";
				var g=new THREE.TextGeometry(text,{
					font:font,
					size:50,
					height:30,
				});
				
				g.computeBoundingBox();
				//3D文字材質
				var m = new THREE.MeshBasicMaterial({color:0xffff00});
				mesh = new THREE.Mesh(g,m);			
				// 加入到場景中
				scene.add(mesh);  
			});
		}
		
		//新增網路線
		function initNetLine(){
			    var geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

                for ( var i = 0; i <= 100; i ++ ) {

                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );
                    line.position.z = ( i * 10 ) - 500;
                    scene.add( line );

                    var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );
                    line.position.x = ( i * 10 ) - 500;
                    line.rotation.y = 90 * Math.PI / 180;
                    scene.add( line );

                }
		}
	
		function threeStart(){
			initScene();
			initCamera();
			initRenderer();
			initLight();
			initObject();
			//init3DText();
			//initNetLine();
			// 渲染
			animate();
		}
		
        function animate(){
			line.position.y -= 1;
            requestAnimationFrame( animate );
             // 渲染
            renderer.render(scene,camera);   
        }
	</script>
</head>
<body onload="threeStart();">
	<div id="canvas-frame"></div>
</body>
</html>


相關推薦

ThreeJS學習筆記（6）- 讓場景動起來

場景中的物體怎麼才能運動起來。我們這裡從《古蘭經》講起，這樣，你永遠不會忘記。 《古蘭經》上有這樣一個故事：一天穆罕穆德告訴人們說大山會向我們走來。於是人們就遠望大山，看它怎麼走過來，可是等了好長時間大山還是紋絲不動的在那裡，人們就問穆罕穆德，大山也沒向我們走來啊。默罕默德

ASP.NET學習筆記（6）——jQuery的Ajax基本操作

stat password ash page serve () c# content scrip 說明（2017-11-5 15:49:29）： 1. jQuery裏封裝了三個方法，$.get,$.post和$.ajax,其中$.ajax是返回原生的XMLHttpReque

Linux第二周學習筆記（6）

font anaconda 如果 使用 oot zhong 提示 就是 bsp Linux第二周學習筆記（6）2.12.MV命令mv命令：用來對文件或目錄重新命名，或者將文件從一個目錄移到另一個目錄中。------------------------------------

TensorFlow學習筆記（6）讀取數據

官網 com 記錄 mat target 項目 AD 包含 技術 Overview 之前幾次推送的全部例程，使用的都是tensorflow預處理過的數據集，直接載入即可。例如： 然而實際中我們使用的通常不會是這種超級經典的數據集，如果我們有一組圖像存儲在磁盤上

python學習筆記（6）--循環語句

start 循環語句 odi 語句 python學習 col end body AR 循環語句如下： for i in range(start, end): //註意 前閉後開 coding for i in 列表名： coding while 條

Rust語言學習筆記（6）

course lin key ati clas mem nsh lis The Traits（特質） // 特質 pub trait Summary { fn summarize(&self) -> String; } pub struct NewsA

Cocos2d-x學習筆記（九）例項——場景自動切換

【關於場景自動切換】 如何實現場景的自動切換？我嘗試過很多種方法，比如在AppDelegate.cpp檔案中的applicationDidFinishLaunching()函式中， 想在pDirector->runWithScene(pLandlords);中直接使用replace

Cocos2d-x學習筆記（五）例項——場景切換

【1】首先設計場景需要許多的圖片資源，往resource資料夾裡新增資原始檔： 【2】新建Cocos2d-x工程時預設的是HelloWord場景，在此只做先顯示佈景層中相關精靈圖片以及選單圖片的修改： 【3】在剛剛的init()函式中有兩個選單回撥函式，主要

cesium 學習筆記（6）2018.11.08

1.新增傾斜攝影3DTiles var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: url, //資料路徑 maximumScreenSpaceError: 2,

shiro學習筆記（6）--spring整合及可能遇到的問題小結

上篇spring整合shiro後續… spring整合shiro主要是org.apache.shiro.web.filter.authc.FormAuthenticationFilter類。 1、controller @Controller public class HelloSsm {

MongoDB學習筆記（6）--find

MongoDB 查詢文件 MongoDB 查詢文件使用 find() 方法。 find() 方法以非結構化的方式來顯示所有文件。 語法 MongoDB 查詢資料的語法格式如下： db.collection.find(query, projection) query ：可選，使用查詢

python Deep learning 學習筆記（6）

本節介紹迴圈神經網路及其優化 迴圈神經網路（RNN，recurrent neural network）處理序列的方式是，遍歷所有序列元素，並儲存一個狀態（state），其中包含與已檢視內容相關的資訊。在處理兩個不同的獨立序列（比如兩條不同的 IMDB 評論）之間，RNN 狀態會被重置，因此，你仍可以將一個序列

Linux學習筆記（6）磁碟分割槽（LVM）

1.邏輯管理技術LVM的概念 1.1 LVM ，邏輯卷管理，以便擴充套件管理碟符。 　　PV：物理卷 　　VG：卷組 　　LV：邏輯卷 　　PE（physical Extend）：物理擴充套件（預設4M），就是我們邏輯卷管理的最小單位。 1.2 關係如下： 　   N個PV組

Java核心技術 卷I 基礎知識 學習筆記（6）

參考：Java核心技術 卷I 基礎知識 介面，主要用來描述類具有什麼功能，而並不給出每個功能的具體實現。一個類可以實現一個或多個介面，並在需要介面的地方，隨時使用實現了相應介面的物件。介面不是類，是對類的一組需求描述，這些類要遵從介面描述的統一格式進行定義。 介面中的所有方法自

Javascript高級編程學習筆記（6）—— 流程控制語句

新的 初始化 大量 導致 原因 能力 操作符 循環 對象屬性 話不多說，我們直接開始進入今天的主題 流程控制語句 首先什麽是流程控制語句呢？ 顧名思義，就是控制流程的語句。 在JS中語句定義了ECMAScript中的主要語法，讓我們可以使用一系列的關鍵字來完成指定任務。 語

Javascript高階程式設計學習筆記（6）—— 流程控制語句

話不多說，我們直接開始進入今天的主題 流程控制語句 首先什麼是流程控制語句呢？ 顧名思義，就是控制流程的語句。 在JS中語句定義了ECMAScript中的主要語法，讓我們可以使用一系列的關鍵字來完成指定任務。 語句也是構成一門程式語言旳基礎，所以還是有必要記錄一下的。 雖然有些語句不常用，但存在即

Python時間序列LSTM預測系列學習筆記（6）-單變數

本文是對： https://machinelearningmastery.com/time-series-forecasting-long-short-term-memory-network-python/ https://blog.csdn.net/iyangdi/article/deta

Lua學習筆記（6）: 函式

Lua的函式 函式用於簡化程式，當某些工作需要重複執行的時候就可以使用函式減輕工作量(雖然複製貼上也行) 語法： function 函式名(引數列表) 函式體 return 返回值 end --結束標誌 function識別符號用於宣告函式，函式的返回

OpenCV學習筆記（6）--Image Gradients影象梯度

opencv提供了三種梯度過濾器或高通過濾器Sobel、Scharr、Laplacian.（高通濾波器high-pass fliter(HPF) 尋找圖片的邊界） 1.Sobel and Scharr Derivatives(衍生）     Sobel operators

C++基礎教程面向物件（學習筆記（6））

解構函式 一個解構函式是另一個特殊的類的成員函式，這個函式只有在類的一個物件被銷燬時執行。建構函式旨在初始化類，而解構函式旨在幫助清理累的物件。 當物件正常超出範圍，或者使用delete關鍵字顯式刪除動態分配的物件時，會自動呼叫類解構函式（如果存在），以便在從記