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;

转载于:https://juejin.im/post/5cadacb0f265da034d29fb70

three.js场景中看不到模型/看不到阴影相关推荐

Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...
Three.js（十四）—— 模型文件加载
文章目录 14.Three.js 加载外部模型文件 14.1 Three.js 数据结构.导入导出 Threejs导出模型信息自定义模型加载器文件加载Three.js导出的模型数据 14.2 加载 ...
Three.js场景过暗
Three.js场景过暗如果你通过Three.js创建一个三维场景或者加载一个stl.obj.fbx等三维模型,可能会遇到整个场景非常暗情况,这一般和场景中的光源有关,如果光源强度过大,场景会太亮, ...
Three.js（十）—— 精灵模型和粒子系统
文章目录 10.精灵模型和粒子系统 10.1 精灵模型Sprite Sprite和SpriteMaterial .scale 和 .position Sprite用途 10.2 中国城市PM2.5可视 ...
58 Three.js 通过THREE.Raycaster给模型绑定点击事件
简介由于浏览器是一个2d视口,而在里面显示three.js的内容是3d场景,所以,现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标.好在three.js已经有了解决 ...
js添加网页水印和three.js场景中加水印
我们在日常网页开发的时候,可能想给自己的网页或者canvas里面添加水印,增添个人标记,我这里分为普通静态html页面和threejs中3d场景里面添加水印功能. 一静态html页面添加水印你只需 ...
在浏览器中进行深度学习：TensorFlow.js (四）用基本模型对MNIST数据进行识别
2019独角兽企业重金招聘Python工程师标准>>> 在了解了TensorflowJS的一些基本模型的后,大家会问,这究竟有什么用呢?我们就用深度学习中被广泛使用的MINST数据集 ...
领域适配前沿研究——场景、方法与模型选择
下期内容:岂凡超<义原知识库的应用和扩充> 报名请点击「阅读原文」在线直播时间:12月31日19:30-20:30 12月24日, 在智源论坛Live第2期活动中,我们邀请了2019年清 ...

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

three.js场景中看不到模型/看不到阴影相关推荐

最新文章

热门文章