HTML5 Three.js r81阴影在相机旋转时失去alpha贴图
HTML5 Three.js r81 shadows lose alpha map during camera rotation
使用Three.JS r81时,我遇到了一个使用自定义深度着色器通过透明材料投射阴影的问题。当我的场景中只有一棵树时,阴影看起来很棒。其次,我在一个简单的盒子中添加了大约100个单位到右边,阴影失去了所有来自透明材料的透明度。在盒子上关闭阴影没有效果。
阴影应该是这样的
当我添加一个方框
有趣的是,如果我把盒子移近树,阴影似乎会自我修正。此外,我使用的是轨道相机,在场景周围旋转会使阴影在围绕树旋转时从好到坏来回移动。我的灯设置得很基本:
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(120, 120, 120);
directionalLight.castShadow = true;
directionalLight.shadow.camera.right = 250;
directionalLight.shadow.camera.left = -250;
directionalLight.shadow.camera.top = 250;
directionalLight.shadow.camera.bottom = -250;
directionalLight.shadow.camera.far = 300;
directionalLight.target.position.x = 80;
directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.bias = -0.0003;
directionalLight.shadow.camera.scale.x = 0.25;
directionalLight.shadow.camera.scale.y = 0.25;
scene.add(directionalLight);
我几乎把光影设置的每一个值都弄乱了,没有一个是有积极效果的。
我知道Three.js中的影子系统在过去一年中发生了一些变化,但不确定是我的原因还是库中的一个可能的bug。什么好主意吗?
看起来这都是由于我的一个愚蠢的错误。我的着色器材质制服使用网格。材质代替mesh.material.map。修改后,运行正常。
var uniforms = { texture: { type: "t", value: mesh.material.map } }
shaderLibrary[libraryName] = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
});
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- Javascript游戏输入失去焦点
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- jquery日期选择器失去了交互性
- 旋转后拖动对象
- 禁用旋转木马中的下一个按钮和上一个按钮
- 手动创建旋转活动指示器
- 如何在容器中定位旋转的图像
- 在轴上旋转SVG图像
- 绕z轴旋转时出现iOS陀螺仪错误
- 旋转按钮[HTML][JS]
- 在JS中围绕旋转对象旋转对象
- Threejs-围绕中心旋转对象
- 旋转木马;启用内容安全策略时无法工作
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 菜单切换时箭头旋转
- 较大引导转盘中的较小引导转盘-较小引导转盘上的旋转功能问题
- 需要关于随机图像旋转的指南
- HTML5 Three.js r81阴影在相机旋转时失去alpha贴图