1. 程式人生 > >ThreeJS建立3D的基本步驟及相關知識

ThreeJS建立3D的基本步驟及相關知識

ThreeJS建立3D的基本步驟

scene

建立場景

新增物體

新增光源

camera

建立攝像機

設定位置

//新增相機到場景中

renderer

建立渲染器

設定渲染器的大小

設定渲染器的背景

將渲染器的DOM元素新增到頁面容器

進行渲染(renderer.render(scene, camera))

-----------------------------------------

light

建立光源

設定光源的位置

新增光源到場景中

物體/角色

建立角色(var cube = new THREE.Mesh(geometry, material);)

新增角色到場景中

=========================================

光源:

THREE.Light(hex);//光源基類(引數hex,一個16進位制的顏色值)

如:var redLight = new THREE.Light(0xFF0000);//紅光

------------

常見光源有:

環境光 —— THREE.AmbientLight( hex );

點光源 —— THREE.PointLight( hex, intensity, distance );//hex:顏色,intensity:強度,distance:距離

聚光燈 —— THREE.SpotLight( hex, intensity, distance, angle, exponent );//hex:顏色,intensity:強度,distance:距離,angel:著色角度(弧度),expoent:衰減指數

方向光 —— THREE.DirectionalLight(hex, intensity);//又稱平行光。hex:顏色,intensity:強度

區域光 —— THREE.AreaLight(hex, intensity);//hex:顏色,intensity:強度

=========================================

紋理:

THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );

var texture = THREE.ImageUtils.loadTexture("textures/a.jpg",null,function(t){

        });