学习ThreeJS 11 小技巧
2018-01-03 本文已影响0人
Zszen
- 自由场景观测
找到项目例子中的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
