学习ThreeJS 11 小技巧

• 自由场景观测
  找到项目例子中的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

• 各种立体几何结构
  http://www.cnblogs.com/xulei1992/p/5714429.html
  http://www.cnblogs.com/xulei1992/p/5715381.html
  自定义结构 (文字下方)
  http://www.cnblogs.com/xulei1992/p/5717790.html

• 文字的3d化
  http://www.cnblogs.com/xulei1992/p/5717790.html

• 纹理
  http://www.cnblogs.com/xulei1992/p/5740442.html

• 网格
  http://www.cnblogs.com/xulei1992/p/5753320.html

• 动画
  http://www.cnblogs.com/xulei1992/p/5757505.html
  tween
  https://www.2cto.com/kf/201407/317820.html