three.js场景中看不到模型/看不到阴影

参考文章

一、three.js渲染的场景中看不到模型的几种可能：

1、未渲染
你可能并未加载渲染函数，或者未将场景渲染出来，虽然这个可能性很小很小，但初期我真的犯过……

function animate() {
	requestAnimationFrame(animate);
        renderer.render(scene, camera);
}

2、场景中未加灯光
未加灯光还有可能造成看不到模型的贴图，即你看到的是一个漆黑的物体

3、模型和相机的位置不对
相机类型分为好几种，具体类型可以看three.js的官网。当你的模型加载位置不在相机的可视区域内，你是看不到模型的。

4、模型的大小不合适，可能过大或者过小
模型过大，可能会导致相机在模型体内，过小会导致看不到。建议在初期建立场景的时候，都调用control的插件，方便缩放和移动，可以多方面观察

二、场景中物体没有阴影

1 灯光类型不对
产生阴影的：
THREE.DirectionLight() 平型光
THREE.PointLight() 点光源
THREE.SpotLight() 聚光灯
不产生阴影的：
THREE.AmbientLight() 环境光
THREE.HemiphereLight() 半球光
THREE.RectAreaLight() 平面光源
2 方向不对 添加光辅助helper
3 场景或者模型没有开启接收阴影参数
首先，我们需要在初始化时，告诉渲染器渲染阴影：renderer.shadowMap.enabled = true;

然后，对于光源以及所有要产生阴影的物体调用：mesh.castShadow = true;

最后，对于接收阴影的物体调用：ground.receiveShadow = true;