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

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

1、未渲染

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

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;

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据