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

参考文章： 火辣辣前端博客

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

 一、未渲染 

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

 

function animate() {
	requestAnimationFrame(animate);
        renderer.render(scene, camera);
} 复制代码

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

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

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

 2、场景中物体没有阴影

 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;