threejs初探

一,組成

scene-主容器
material&texture -貼圖
geometry
object
light
renderer&shader
loader

二, 語(yǔ)法

var scene = new THREE.Scene();
var mat = THREE.MeshBasicMaterial({color: 0x60f60f})
var gem = new BoxGeometry()

攝像機(jī)

正交投影:等同平行投影
透視投影

其他

blender 軟件,3d建模

光源

點(diǎn)光 pointLight
錐形光 spotLight
環(huán)境光 AmbientLight

材質(zhì)

完全不反射 MeshBasicMaterial
漫反射 Lambert
鏡面反射 Phong

輔助線

光源輔助線:
var spotLightHelper = new THREE.DirectionalLightHelper( light );
scene.add( spotLightHelper );
坐標(biāo)系:
var axisHelper = new THREE.AxisHelper(15000);
scene.add(axisHelper);
鏡頭控制:
orbitControl

容器

new THREE.Group();
new THREE.Object3D();

擠壓

THREE.Vector2
2d vector
new THREE.ExtrudeGeometry()

多復(fù)制幾個(gè)門

mesh.clone()

持續(xù)前進(jìn),循環(huán)

鏡頭、光源、跑道、建筑,貓門;都循環(huán)前進(jìn)。
設(shè)置最遠(yuǎn)比較基線
參考:http://codepen.io/shelbeniskb/pen/dpYRWN

如何調(diào)整光源的朝向?(難以打光打成設(shè)計(jì)稿的樣子)

direcLight.target.position.set( 200, -180, 100 ); 無(wú)效
lookAt() 也無(wú)效
總是tagert是原點(diǎn)

如何使用交互控制欄?

var gui = new dat.GUI()
gui.add({}, name, param1, param2...)
onChange( ... )

如何使用貼圖?

加載:var texture = THREE.ImageUtils.loadTexture(data.url)
new THREE.MeshLambertMaterial({ map: texture });

如何把 2d svg path 轉(zhuǎn)成 3d path ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 之前用qunee做了一個(gè)2.5d的機(jī)房監(jiān)控,丑的閃瞎我的卡姿蘭大眼,后來(lái)含淚用three.js做個(gè)3d的換...
    我得有妖氣閱讀 1,615評(píng)論 1 2
  • This article is a record of my journey to learn Game Deve...
    蔡子聰閱讀 3,875評(píng)論 0 9
  • 這個(gè)是我剛剛整理出的Unity面試題,為了幫助大家面試,同時(shí)幫助大家更好地復(fù)習(xí)Unity知識(shí)點(diǎn),如果大家發(fā)現(xiàn)有什么...
    編程小火雞閱讀 3,917評(píng)論 2 34
  • Unity技術(shù)面試題 一:什么是協(xié)同程序? 答:在主線程運(yùn)行時(shí)同時(shí)開(kāi)啟另一段邏輯處理,來(lái)協(xié)助當(dāng)前程序的執(zhí)行。換句話...
    沐冉閱讀 2,912評(píng)論 1 19
  • 別人已月薪上萬(wàn),我卻還在啃老,怎么淪落到這種地步呢……
    Sara_馨閱讀 230評(píng)論 0 0