在THREE.js中阴影的怪异行为
Weird behaviour of shadows in THREE.js
我正在尝试渲染一组位于三维空间中的照片,这些照片相互投射阴影。我从两个矩形开始,这是我的代码
function loadScene() {
var WIDTH = 1200,
HEIGHT = 500,
VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000,
world = document.getElementById('world'),
renderer = new THREE.WebGLRenderer(),
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
scene = new THREE.Scene(),
texture = THREE.ImageUtils.loadTexture('image.jpg', {}, function() {
renderer.render(scene, camera);
}),
material = new THREE.MeshLambertMaterial({map: texture}),
solidMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000}),
rectangle = new THREE.PlaneGeometry(200, 120),
mesh = new THREE.Mesh(rectangle, material),
mesh1 = new THREE.Mesh(rectangle, material),
spotLight = new THREE.SpotLight(0xFFFFFF, 1.3);
camera.position.set(0, 0, 200);
mesh.translateX(140);
mesh.translateZ(-70);
mesh.receiveShadow = true;
mesh1.castShadow = true;
spotLight.position.x = -100;
spotLight.position.y = 230;
spotLight.position.z = 230;
spotLight.castShadow = true;
scene.add(spotLight);
scene.add(mesh);
scene.add(mesh1);
renderer.setSize(WIDTH, HEIGHT);
renderer.shadowMapEnabled = true;
renderer.render(scene, camera);
world.appendChild(renderer.domElement);
}
这里solidMaterial
是实红色,material
是纹理材料。我得到的结果如下:
- 如果我使用
material
为两个网格,矩形出现预期,但没有阴影。同样,如果我使用solidMaterial
为两个。 - 如果我使用
material
mesh
(更远的一个)和solidMaterial
mesh1
,我看到一个红色的矩形,在纹理上投射阴影。这是我所期望的唯一情况。 - 如果我使用
solidMaterial
mesh
(更远的一个)和material
mesh1
,我看到一个红色的矩形与阴影在它上面,但前面的纹理矩形根本没有绘制。
阴影的正确用法是什么?
事实证明,当两个矩形具有相同的材质时,阴影不会出现。我想知道这是否是THREE.js中的一个bug。
另一方面,如果我使用两种不同的材质,即使它们具有相同的纹理,阴影也会像预期的那样出现。
相关文章:
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 在Three.js中导出网格会提高性能吗
- 如何在three.js上添加两个向量
- Three.js Points Rotation
- 无法读取属性'材料'未定义的Three.js
- Potree/Three.js测量问题
- Three.JS OBJ模型未显示
- 有没有一种方法可以获得three.js的最小/lite版本
- JS和three.JS,在浏览器中进行参数测试
- 阴影盒未定义
- three.js:如何让透明的png精灵投射和接收阴影
- Three.js.obj阴影不起作用
- Three.js-阴影投射异常
- Three.js-打开照明的阴影
- Javascript Three.JS阴影贴图不工作
- THREE.JS圆形地板,看起来像阴影
- 在THREE.js中阴影的怪异行为
- HTML5 Three.js r81阴影在相机旋转时失去alpha贴图
- Three.js-在多个视图中显示阴影
- 加载OBJ在Three.js不接收阴影,即使属性设置为true