Three.js DoubleSided 材质不会在平面参数几何体的两侧投射阴影

2024-01-08

看看这个jsfiddle:http://jsfiddle.net/blwoodley/5Tr4D/1/ http://jsfiddle.net/blwoodley/5Tr4D/1/

我有一个蓝色聚光灯,照射在旋转的旋转正方形上。这会给地下地面投射阴影。只是它只在正方形的一侧投射阴影。

我看到了这样的讨论:https://github.com/mrdoob/ Three.js/issues/3544 https://github.com/mrdoob/three.js/issues/3544这表明平面上的面剔除是原因。建议给我的正方形一些深度,即使它成为一个立方体。

我可以用这个简单的例子来做到这一点,但我在参数几何体(曲面)上遇到了同样的问题。有没有办法让两侧投射阴影,而不必给我的几何体一个没有或不需要的深度?

这是小提琴中复制飞机问题的主要函数:

function init() {

container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
camera.lookAt({x: 0,y: 0,z: 0});

scene = new THREE.Scene();

var groundMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff, side:THREE.DoubleSide 
});
plane = new THREE.Mesh(new THREE.PlaneGeometry(2000,2000,10,10), groundMaterial);
plane.rotation.x = Math.PI / 2;
plane.position.y = -40;
plane.receiveShadow = true;

scene.add(plane);

var light;

light = new THREE.SpotLight(0x0000ff);
light.position.set(40, 40, 0);
light.castShadow = true;
light.shadowCameraVisible = true;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.position.set(24, 20, 0);
light.lookAt(plane);    
light.castShadow = true;
light.angle = .8;
light.intensity = 30;
light.distance=0;
light.shadowCameraNear = 2;
light.shadowCameraFar = 100;
light.shadowCameraFov = 100;
light.shadowDarkness = 1;
light.shadowCameraVisible = true;
scene.add(light);

var planeGeo = new THREE.PlaneGeometry(20,20,20,20)
_planeMesh = new THREE.Mesh(planeGeo, new THREE.MeshLambertMaterial( { color: 0x00ff00, side:THREE.DoubleSide } ) );
_planeMesh.castShadow = true;
scene.add( _planeMesh );


// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
webglRenderer.shadowMapSoft = true;

container.appendChild(webglRenderer.domElement);
window.addEventListener('resize', onWindowResize, false);

}


是的,这是一个功能。

WebGLRenderer默认情况下,渲染阴影时会剔除正面。这是可以的,因为假设物体具有深度。如果您愿意,您可以选择背面:

renderer.shadowMapCullFace = THREE.CullFaceBack;

......但剔除两者都不是一个选择。

The material.side投射阴影时不考虑属性。

三.js r.63

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

Three.js DoubleSided 材质不会在平面参数几何体的两侧投射阴影 的相关文章

  • 向几何体添加细分

    我正在尝试向球体添加细分 如下所示 http stemkoski github com Three js Subdivision Cube html http stemkoski github com Three js Subdivisio
  • 使用 Three.js 在片段着色器中手动选择 mipmap 的 lod

    我正在使用 Three js 中的 glsl es 编写一个基于物理的着色器 为了添加镜面全局照明 我使用内部带有 mipmap 链的立方体贴图 dds 纹理 按照 CubeMapGen 的说明进行预先计算here http seblaga
  • Material.alphaTest 是什么意思?

    在过去的几天里 我一直在非相交对象的透明度方面遇到重大问题 我遇到了设置的建议alphaTest将材料的值调整为0 5 从而解决了问题 太好了 但我想更好地理解它的含义以及它如何如此优雅地解决问题 有人可以建议吗 从一个简单的实验来看 这似
  • 绕局部轴旋转

    我正在尝试实现一个对象 围绕一个位置 POI 兴趣点 飞行并面向它 当您按 WASD 时 您可以更改 POI 的旋转 A 和 D gt 更改 y 轴 W 和 S 更改 x 轴 正如您在演示中看到的 http jsbin com yodusu
  • 如何沿着简单的路径移动相机

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

    我使用 React JS 加载从 sketchfab 下载的 GLTF 文件时遇到问题 当我尝试在不使用React 使用常规index html和index js 的情况下执行此操作时 它可以工作 但是当我将代码带入React应用程序时 它
  • 如何在 Three.js 中将 geoJSON 绘制为网格而不是线条,并填充颜色?

    我正在使用 Three js 制作一个地球仪 并将添加一些数据层 所有图层都将从 geoJSON 创建 我已将其设置为使地球仪 第一个数据文件 包含国家 地区 显示为线条 这使用三GeoJSON https github com jdomi
  • 在 React 中渲染 Three.js 元素?

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac
  • 可点击的精灵标签?

    我一直在玩精灵文本标签 更具体地说是这个例子 http stemkoski github io Three js Sprite Text Labels html http stemkoski github io Three js Sprit
  • 动画 GIF 作为 THREE.js 中的纹理

    我正在寻找一种在 THREE js 中使用 GIF 动画作为纹理的方法 我目前可以加载纹理 甚至是 GIF 格式 但它无法播放动画 有什么办法可以做到吗 我发现了一些像这样的链接 https github com JordiRos GLGi
  • 在 Three.js 中渲染具有大量对象的多个场景的最佳方式

    想象一下 您想要绘制两个场景 每个场景都有数百个球体 并提供在这些场景之间切换的功能 做到这一点的最佳方法是什么 目前 一个开关大约需要 4 到 5 秒 因为我要删除 创建和绘制每个开关上的所有球体 下面是在场景切换上运行的代码示例 cle
  • 无法让 raycaster.intersectObjects() 从远处返回相交的对象

    我有一个包含几个随机数的散点图Sprite用作数据点的对象 我想检测鼠标指针 光标 和Sprite对象 我用来检测交叉点的设置如下 var projector new THREE Projector window addEventListe
  • 一次性渲染阴影

    考虑到阴影投射的成本 我想知道对于动态定位的静态对象 例如 程序城市 是否有一个功能或可能 实验性的方法可以在 Three js 中仅渲染一次阴影贴图 甚至在 webgl 中 因此 结果可以在静态对象的下一帧中免费使用 仅当物体移动时才会进
  • 将颜色渐变应用于网格上的材质 - Three.js

    我有一个 STL 文件加载到我的场景中 并将单一颜色应用于 phong 材质 我想要一种方法 将两种颜色应用于该网格物体的材质 并在 Z 轴上应用渐变效果 如下例所示 渐变花瓶 https i stack imgur com Ty9gq j
  • 如何计算给定坐标处相机可见矩形的大小? [复制]

    这个问题在这里已经有答案了 我制作了一个小型的 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 - 将 WebGL 和 CSS3D 与 iFrame 混合

    我准备了一个混合的工作页面WebGL and CSS3D 在SO的一点帮助下here https stackoverflow com questions 24681170 three js properly blending css3d a
  • Three.js :face4 生成三角形而不是正方形

    我正在尝试使用 tree js 自定义几何图形生成一个正方形 但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
  • OpenCV 2.4.3 中的阴影去除

    我正在使用 OpenCV 2 4 3 最新版本 使用内置的视频流检测前景GMG http docs opencv org modules gpu doc video html highlight gmg gpu 3a 3aGMG GPU算法

随机推荐

  • 获取 HDFS 中 parquet 文件的大小,以便在 Scala 中使用 Spark 重新分区

    我在 HDFS 上有许多 parquet 文件目录 每个目录包含数千个小 大多数 使用以下代码 我可以将本地镶木地板文件重新分区为更少数量的部分 val pqFile sqlContext read parquet file home ha
  • R - 计算列表组件的数量[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我知道在 R 中 您可以通过带有双括号的列表进行索引 即mylist 1 如何计算该列表中的元素数量 不是每个列表项中的元素数量 而是最大
  • 将 C++ 中的所有重音字母更改为普通字母

    问题 如何将 C 或 C 中的所有重音字母更改为普通字母 我的意思是这样的e a c会成为eeeeaaaacc 我已经尝试过的 我尝试过手动解析字符串并一一替换它们 但我认为必须有一种我不知道的更好 更简单的方法 这将保证我不会忘记任何重音
  • Chrome/WebKit 在使用背景、边框半径和顶部/底部边框时创建实心条

    Google Chrome 在边框半径 背景颜色以及顶部和底部边框方面存在问题 这是要重现的证据和代码 http jsfiddle net 6ADtd 4 http jsfiddle net 6ADtd 4 div div div back
  • 如何从登录屏幕进入下一个屏幕? JPanel、JFrame?

    我有一个关于构建 GUI 应用程序的问题 我觉得这个问题的标题不太准确 但我想不出更好的标题 构建应用程序的正确方法是什么 我是否应该只创建一个 JFrame 然后根据需要更改该 JFrame 中的面板 或者当我从一件事转移到另一件事时 我
  • 使用 ndk clang 3.4/3.5 编译 __thread 没有运气

    我试图在这个小程序中使用 thread 但没有运气 知道 ndk 10c clang 3 4 3 5 是否支持此 TLS 相同的程序可以使用 ndk gcc 4 8 4 9 和本机 clang gcc 编译器正常编译 这是程序和编译行 th
  • 将 Firebase 导出到 BigQuery 的数据扁平化为 1 行 = 1 个事件的表(嵌套数据中的嵌套数据)

    我想我可以通过提出一个更简单的问题并引用一个更简单的数据示例来获得我需要的东西here https stackoverflow com questions 38839559 flatten bigquery nested field con
  • C++14 中标准布局类的定义

    A 标准布局class 在 C 14 中的 class 7 中定义 如下 重点是我的 A 标准布局class 是一个类 7 1 没有非标准布局类型的非静态数据成员 类 或此类类型的数组 或引用 7 2 没有虚函数 10 3 也没有虚基类 1
  • 如何通过google帐户快速检查用户是否已经在firebase中注册

    我想为用户执行一个操作首次登录 注册 使用谷歌帐户和另一个操作 如果用户之前已经登录过 如果某个用户已经并且仍然使用他们的 Google 帐户登录 我们可以使用这行代码 Auth auth addStateDidChangeListener
  • JSON.Net读取错误

    我正在尝试使用 Json Net 解析一些 JSON 数据 这是我的数据 UIDClan 1 UIDKnjiga 1 Naslov Title1 DatumZaKada 2013 08 09 00 00 00 DatumIstekRez n
  • 在Java中访问其他类文件

    我们刚刚开始为我的学位学习 Java 我得到了一个文件夹 其中包含各种 Java 类 每个类都有自己的 java 文件 文件名与其所在类的名称相同 有一个文件托管一个公共类 其中包含以下内容 public static void main
  • 修改不是先前提交的提交[重复]

    这个问题在这里已经有答案了 我经常会有如下的工作流程 提交对一组文件的更改 将更改提交到不同的文件组 意识到我错过了一些属于第一次提交的更改 Curse 我无法利用git commit amend因为这不是我需要更改的最新提交 将更改添加到
  • 修复了推回内容的元素

    我正在寻找一种在页面顶部有一个固定元素的方法 该元素会根据页面宽度改变高度 并且还会推回下面的内容 到目前为止我已经解决了一些问题 但我希望有一个更干净的解决方案 我所做的是让两个顶部元素具有相同的内容 一个设置为固定位置 另一个设置为相对
  • 在加载时无需事件即可将数据从子级传递到父级,这在 vue 世界中可能吗?

    我觉得如果没有 click 事件或事件或输入字段或某些需要交互的东西 则不可能将数据从子级传递到父级 只需在加载时通 过使用此数据中的变量和控制将数据从子级数据变量传递到另一个数据变量中的父级父变量 只是加载时 可能吗 将 JSON 数据从
  • 表达式树的后缀表示法

    关于如何将表达式树转换为后缀表示法 有足够的资源 而且并不难 但我必须将后缀表达式解析为表达式树 表达式为 A 2 2 A B B 2 A B 我真的不知道如何解释这个表达式 有人知道如何处理这个问题吗 创建一个包含可能是树一部分的节点的堆
  • 拦截windows打开的文件

    我正在尝试制作一个可以拦截文件打开过程的小程序 目的是当用户双击给定文件夹中的文件时 Windows会向软件发出通知 然后软件处理该请求并将文件的数据返回给Windows 也许还有另一种解决方案 例如监视 Open 消息并强制 Window
  • Android Studio -- 无法编辑文件

    我认为这是一个非常愚蠢的问题 而且我找不到任何其他类似的问题 所以我认为它真的很愚蠢 但它仍然让我发疯 我无法弄清楚这一点 因此 每次我在 Android Studio 中打开文件时 它都不会让我编辑它 就像它处于某种只读或选择模式或其他模
  • Python 列表和 foreach 访问(在内置列表中查找/替换)

    我原本以为Python是一种纯粹的引用传递语言 来自 C C 的我忍不住会想到内存管理 而且很难将它从我的脑海中抹去 因此 我尝试从 Java 的角度来考虑它 并将除原语之外的所有内容都视为按引用传递 问题 我有一个列表 其中包含一堆用户定
  • Dictionary.values() 列表与集合中查找的时间复杂度[重复]

    这个问题在这里已经有答案了 在Python中 我们知道在字典中查找键需要O 1 运行时间 但是在dictionary values 中查找的运行时间是多少 dictionary a 66 77 88 b 99 100 key a if ke
  • Three.js DoubleSided 材质不会在平面参数几何体的两侧投射阴影

    看看这个jsfiddle http jsfiddle net blwoodley 5Tr4D 1 http jsfiddle net blwoodley 5Tr4D 1 我有一个蓝色聚光灯 照射在旋转的旋转正方形上 这会给地下地面投射阴影