在 Three.js 中的 MeshPhongMaterial 或 MeshLambertMaterial 上投射阴影

2024-03-16

我觉得我在这里缺少一些简单的东西。

I used JSFiddle 作者:@WestLangley http://jsfiddle.net/4Txgp/234/,它演示了如何将物体的阴影投射到平面上。

当飞机只填充颜色时,一切都会按预期进行:

var groundMaterial = new THREE.MeshLambertMaterial({
  color: 0xFF0000
});

然后我将其更改为使用纹理:

var groundMaterial = new THREE.MeshLambertMaterial({
  // color: 0xFF0000,
  map: texture
});

..突然间,影子消失了:

两者都会发生这种情况MeshPhongMaterial and MeshLambertMaterial.

请注意,相机位置和阴影配置均未更改。一切都还是原来的样子,但影子却消失了。

纹理应该被“告知”接收光线还是别的什么?

在 r61、r66、r67 上测试。


这是一个相当老的问题,但为了提供一些结论,我想指出,存在此问题的版本已经得到修复。小提琴使用 Three.js r66,但最新版本(截至撰写本文时为 r107)不再存在此问题:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Three.js 中的 MeshPhongMaterial 或 MeshLambertMaterial 上投射阴影 的相关文章

  • 如何在 Three.js 中从三角面获取多边形?

    我在网上查了一下是否有人遇到同样的问题 我正在使用 Three js 我有一个 3DObject 其中可能包含孔 面是三角形的 假设我想从上面看到它 我的目标是获得一个代表顶面周长的多边形 这对我来说意味着不再有三角面 而只有 1 个多边形
  • 如何沿着简单的路径移动相机

    如何沿着简单的路径 由顶点 点数组创建 移动相机 我需要自动移动它 而不是像第一人称射击游戏那样通过键盘 鼠标事件来移动它 找了这个例子 http trijs org examples webgl geometry extrude spli
  • 深度图三.js

    Three js中有没有办法获取深度图 我感兴趣的是制作类似于 Kinect 为给定场景制作的东西 我遇到了一种不使用颜色和雾来模仿这一点的黑客方法 但这并不理想 因为它会使用两个不同的场景并且会因光照而变化 我认为执行此操作的另一种方法是
  • 重复凹凸贴图

    我正在尝试使用 Three js r55 将凹凸贴图应用到平面上 以创建一个模糊的感觉表面 这是我的代码 var mapHeight THREE ImageUtils loadTexture images felt png mapHeigh
  • 在 Three.js 中渲染具有大量对象的多个场景的最佳方式

    想象一下 您想要绘制两个场景 每个场景都有数百个球体 并提供在这些场景之间切换的功能 做到这一点的最佳方法是什么 目前 一个开关大约需要 4 到 5 秒 因为我要删除 创建和绘制每个开关上的所有球体 下面是在场景切换上运行的代码示例 cle
  • 在 UIImageView 后面创建阴影的最佳方法是什么

    我有一个 UIImageView 我想在它后面添加阴影 我希望苹果公司拥有这一财产 但他们必须让我们程序员做很多事情变得困难 所以我需要问这个问题 有一种更好 更简单的方法可以做到这一点 UIImageView继承自UIView 因此它具有
  • 如何计算给定坐标处相机可见矩形的大小? [复制]

    这个问题在这里已经有答案了 我制作了一个小型的 Three js 应用程序 它将一堆圆圈从画布的底部移动到顶部 let renderer scene light circles camera initialize animate funct
  • 使用 ThreeJS 获取球体纹理上的点击位置

    目前 我有一个带有纹理的球体 它绕 y 轴旋转 我还有在 3D 空间中单击的位置 以及球体上的旋转位置 我认为 目标 获取纹理上的位置 例如 我想获取我点击的图像的哪个方块 参见示例球体和下图 在实践中 我不会使用此图像 但我觉得这将是一个
  • ThreeJS bufferGeometry 位置属性在应用翻译时不会更新

    我使用 STLLoader 将 stl 加载到返回 BufferGeometry 的 ThreeJS 场景中 然后我用了 myMesh position set x y z myMesh rotation setFromQuaternion
  • Three.js :face4 生成三角形而不是正方形

    我正在尝试使用 tree js 自定义几何图形生成一个正方形 但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几
  • 在 Three.js 中从 Web Worker 加载纹理

    当将大纹理图像应用到网格上一段明显的时间时 Three js 会锁定浏览器的主线程 让我们考虑以下示例 var texLoader new THREE TextureLoader texLoader load someLargeTextur
  • 在SwiftUI中,如何高性能地绘制阴影?

    我用 shadow color radius x y 在我的应用程序中绘制阴影 这是我所知道的在 SwiftUI 中绘制应用程序的唯一方法 我用 sheet isPresented content 方法弹出一个视图 其中包含很多阴影 当我调
  • 如何在react-三纤维中提取并播放动画

    嗯 我有 gltf 动画模型 我成功加载模型 但无法播放嵌入的动画 我想知道是否可以以任何方式解决它 顺便说一句 我正在反应中工作 先感谢您 在这里您可以找到型号https drive google com file d 1ZVyklaQu
  • 是否可以使用 CardView 为浮动操作按钮制作阴影?

    I know CardView不是为此而设计的 但理论上如果cardCornerRadius view size 2它应该导致圆圈 我错过了什么吗 绘制真实的动画阴影并不困难 您可以尝试在 Froyo 等任何 Android 设备上实现 L
  • 平铺单纯形噪声?

    我 作为业余爱好者 对伪随机噪声生成很感兴趣 特别是 Perlin 和 Simplex 算法 Simplex 的优点是速度 尤其是在更高的维度上 但 Perlin 可以相对容易地平铺 我想知道是否有人知道平铺单纯形算法 固定维度就好 泛型更
  • 如何在 Three.js 中从 3D 点创建 3D 表面?

    我正在制作一个项目来制作带有点和线 弯曲或非弯曲 的简单 3D 模型 对于第一个版本 我使用 SVG 元素进行简单渲染 平滑曲线和鼠标事件 现在我正在尝试使用Three js渲染器而不是 SVG 我必须创建 3d 管来替换曲线 但我不知道如
  • 如何使用三个JS导出然后导入场景?

    我有一个用三个 JS 和大量 Javascript 代码构建的复杂 3D 场景 我需要将此场景导出为一个文件 然后通过简单的 ThreeJS 场景播放器在我的网站上使用它 我尝试过 ObjectExporter 和 SceneExporte
  • 从matrix4()获取翻译

    对于大多数 Three js 开发人员来说 这可能看起来像是一个虚拟问题 但是如何从转换矩阵中提取翻译呢 实际上 我手动提取它指向 矩阵数组位置 12 13 14 提前致谢 如果要从矩阵中提取平移分量 请使用以下模式 var vec new
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len

随机推荐