THREEJS載入必要五要素

2021-10-09 20:01:58 字數 1711 閱讀 2131

threejs載入3d模型 就像人的眼睛去看這個世界，需要有所處的環境，眼睛，看的物體，有光等等

場景就像人所處的環境一樣，所有的模型 都是在這個場景中去展示 去活動

this


.scene =


newthree.scene


()
攝像機就像人的眼睛

var k = width / height // 視窗寬高比


// 建立相機物件


this


.camera =


newthree.perspectivecamera(40


, k,1,


10000


)this


.camera.position.


set(


100,


300,


1000


)// 設定相機位置


this


.camera.up.x =


0this


.camera.up.z =


0this


.camera.up.y =


1//預設攝像機是y軸朝上（比如攝像機是正向拍攝的 不是頭朝下的 可以這麼理解）


this


.camera.


lookat


(new


three.vector3(0


,0,0


))// 設定相機方向(指向的場景物件)
沒有燈光整個環境就會一片黑暗，就像人所處乙個沒有任何光的環境中，什麼也看不到的，所以需要light 。光分很多種，有環境光，點光源，聚光燈，平行光等等，不同的光的照亮效果不一樣，此處不做贅述

//環境光


letambient =


newthree.ambientlight


(0xffffff


)ambient.intensity =


0.8this


.scene.


add(ambient)


//新增點光源


var spotlight =


newthree.pointlight


(0xffffff);


spotlight.position.


set(


100,


800,


100)


;spotlight.castshadow =


true


;this


.scene.


add(spotlight)


;
這個就像你的大腦神經控制器，控制著整個場景裡面的所有

// 場景控制器


this


.controls =


neworbitcontrols


(this


.camera,


this


.renderer.domelement


)
這個就類似將眼睛看到的實際物體成像的乙個過程，渲染到整個場景中

//註冊渲染器


this


.renderer =


newthree.webglrenderer()


//渲染


render()


,
以上就是threejs載入必要的五要素了，載入任何模型 都需要這幾個來做鋪設，然後在這個的基礎上載入需要的obj模型，gltf模型，面板等

THREEJS渲染七要素

渲染兩步驟 初始化 定義使用者介面 開啟渲染迴圈 呼叫使用者介面。渲染迴圈七要素 定義渲染器和渲染視窗 定義場景 定義攝像機 定義光照 定義幾何體 定義材質貼圖 將所有物體新增到場景中。下面是上述過程的具體 注意其中的框架結構 import as three from threejs lib bui...

Threejs載入外部glb檔案模型不顯示

二.問題分析 三 後期補充總結 doctype html en utf 8 viewport content width device width,initial scale 1.0 軍營展示 title zhuyemian 引入three.js三維引擎 build three.js script ...

threejs學習（五） canvas入門學習

前言 最近專案中使用到了threejs中的sprite元件 為了更好實現sprite元件的介面效果 以及我們在h5中繪製圖表，都需要用到canvas這個標籤 所以需要對canvas有較為深入的學習 canvas是乙個html5的標籤，這個標籤可以被瀏覽器渲染為畫布 canvas只是乙個容器 這個容器...