- 自由場景觀測
找到項目例子中的OrbitControls.js類并導入
在代碼中植入
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 10;
controls.maxDistance = 75;
controls.target.set( 0, 2.5, 0 );
controls.update();
- 如何創建平地
var groundMaterial = new THREE.MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
mesh.rotation.x = - Math.PI / 2;
scene.add( mesh );
- 如何開啟陰影
//渲染開啟
renderer.shadowMap.enabled = true;
//加入支持陰影的光源
var light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
light.position.set( 2, 8, 4 );
light.castShadow = true;
light.shadow.mapSize.width = 500;
light.shadow.mapSize.height = 500;
light.shadow.camera.far = 20;
scene.add( light );
//輔助光源提示
scene.add( new THREE.CameraHelper( light.shadow.camera ) );
//需要產生陰影的物體
mesh.castShadow = true;
//需要接受投影的物體
mesh.receiveShadow = true;
材質MeshBasicMaterial 并不能和光源陰影互動
MeshLambertMaterial 非金屬物體
MeshPhongMaterial 金屬類物體
https://www.cnblogs.com/xulei1992/p/5737138.html
color - 材質本身的顏色
ambient - 環境光互動, 只與AmbientLight互動
emissive - 材質發光色, 會泛起和光源顏色不同的光
specular - (金屬)反光系數
shininess - (金屬)值越大高光范圍越小, 配合specular
