Three.js學習筆記

20171112 發布于2019-08-21 15:12 / 2935人閱讀

摘要：和使用的坐標系是右手坐標系。與都是指到照相機位置在深度平面的位置，而照相機不應該拍攝到其后方的物體，因此這兩個值應該均為正值。

Three.js是一個3D JavaScript庫。Three.js封裝了底層的圖形接口，使得程序員能夠在無需掌握繁冗的圖形學知識的情況下，也能用簡單的代碼實現三維場景的渲染。

一個典型的Three.js程序至少要包括渲染器（Renderer）、場景（Scene）、照相機（Camera），以及你在場景中創建的物體。

渲染器（Renerer）

渲染器將和Canvas元素進行綁定，在HTML中手動定義了id為mainCanvas的Canvas元素，那么Renderer可以這樣寫：

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("mainCanvas")
    });

將背景色（用于清除畫面的顏色）設置為黑色：

renderer.setClearColor(0x000000);

場景（Scene）

在Three.js中添加的物體都是添加到場景中的，因此它相當于一個大容器。一般說，場景里沒有很復雜的操作，在程序最開始的時候進行實例化，然后將物體添加到場景中即可。

var scene = new THREE.Scene();

照相機（Camera）

我們使用Three.js創建的場景是三維的，而通常情況下顯示屏是二維的，那么三維的場景如何顯示到二維的顯示屏上呢？照相機就是這樣一個抽象，它定義了三維空間到二維屏幕的投影方式。
WebGL和Three.js使用的坐標系是右手坐標系。

var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
//我們把 camera 放在 XYZ 坐標為 (50, 50, 50) 的位置上，并且朝向坐標原點。
camera.position.set(50, 50, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

正交投影照相機（Orthographic Camera）的構造函數是：

THREE.OrthographicCamera(left, right, top, bottom, near, far)

這六個參數分別代表正交投影照相機拍攝到的空間的六個面的位置，這六個面圍成一個長方體，我們稱其為視景體（Frustum）。只有在視景體內部（下圖中的灰色部分）的物體才可能顯示在屏幕上，而視景體外的物體會在顯示之前被裁減掉。

為了保持照相機的橫豎比例，需要保證(right - left)與(top - bottom)的比例與Canvas寬度與高度的比例一致。
near與far都是指到照相機位置在深度平面的位置，而照相機不應該拍攝到其后方的物體，因此這兩個值應該均為正值。為了保證場景中的物體不會因為太近或太遠而被照相機忽略，一般near的值設置得較小，far的值設置得較大，具體值視場景中物體的位置等決定。

渲染

在定義了場景中的物體，設置好的照相機之后，渲染器就知道如何渲染出二維的結果了。這時候，我們只需要調用渲染器的渲染函數，就能使其渲染一次了。

renderer.render(scene, camera);

GPU云服務器云服務器 three.js three.js極客 three.js教程 three.js cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88125.html

WebGL three.js學習筆記創建three.js代碼的基本框架

摘要：學習學習筆記介紹是一種繪圖協議，它把和結合在一起，通過增加的一個綁定，可以為提供硬件加速渲染。環境搭建為了以后的學習方便，首先是搭建一個萬能框架，所有的開發都可以在此框架上進行。 WebGL學習----Three.js學習筆記（1） webgl介紹 WebGL是一種3D繪圖協議，它把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個Ja...

mtunique 2019-08-23 17:06 評論0 收藏0
WebGL three.js學習筆記自定義頂點建立幾何體

摘要：自定義頂點建立幾何體與克隆本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，也是可以的。并且不僅要更新頂點，還要更新線條的連接方式，否則是沒有效果的。自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的。基本效果...

joyvw 2019-08-23 17:06 評論0 收藏0
【three.js學習筆記】場景

摘要：對象是所有不同對象的容器，也就是說該對象保存所有物體光源攝像機以及渲染所需的其他對象。對象又是被稱為場景圖，它不僅僅是一個對象數組，還包含了整個場景圖樹形結構中的所有節點每個添加到場景的對象，甚至包括本身都是繼承自一個名為的對象。 THREE.Scene THREE.Scene 對象是所有不同對象的容器，也就是說該對象保存所有物體、光源、攝像機以及渲染所需的其他對象。 THREE.S...

codecraft 2019-08-22 16:02 評論0 收藏0
【three.js學習筆記】幾何體

摘要：構造函數分別是長寬高是對應長寬高的分段，在使用線模式進行渲染的時候，可以看到效果如下。長寬高分別被截為段，段，段。球體構造函數球體半徑水平方向和垂直方向上分段數。最小值為，默認值為。構造函數形狀數組可選的參數對象，可配置參數。 Geometry api Geometry var geometry = new THREE.Geometry(); 立方體（BoxGeometry）老版本...

dendoink 2019-08-22 16:04 評論0 收藏0
【three.js學習筆記】光

摘要：環境光的位置對呈現的效果無任何效果環境光的構造函數只有一個參數進制的顏色值。半球光點光源點光源的光線來自同一點，并向外發射。點光源的構造函數有三個參數，比平行光多了一個距離參數，光會從光源經過的距離一路衰減為。 Lightapi 光源的基類。 Light( color, intensity ) color 光源顏色的RGB數值 intensity 光源強度的數值。看到的顏色使...

YancyYe 2019-08-22 16:21 評論0 收藏0