Three.js - 网格面上的极端阴影

时间:2015-01-09 12:12:43

标签: javascript three.js blender

我使用搅拌机创建了一个胸部模型,为它创建了一个手绘纹理,并在使用Three.js渲染的环境中设置整个物体。然而胸部正面有一个异常极端的阴影:

enter image description here

这是我的渲染器设置:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
return renderer;

这是导致这个阴影的光源(在屏幕截图中,它是唯一的光源):

var envLight = new THREE.PointLight(color, 0.5, 320);
envLight.position.set(0, 80, zPos);
return envLight;

材料设置:

var material = new THREE.MeshPhongMaterial();
//diffuse texture setup
material.map = THREE.ImageUtils.loadTexture(textureURL);
material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping;
material.map.repeat.set(repeatX, repeatY);
// specular map setup
material.specularMap = THREE.ImageUtils.loadTexture(specularMapURL);
material.specularMap.wrapS = material.specularMap.wrapT = THREE.RepeatWrapping;
material.specularMap.repeat.set(repeatX, repeatY);
material.specular = that.specularLightingColor;
return material;

使用此材质以及包含从Blender导出的几何和UV贴图的JSON数据创建网格。我使用THREE.JSONLoader在运行时获取数据。 这是来自搅拌机的屏幕截图,显示网格和UV地图展开,它似乎是所选面的问题,因为它匹配奇怪阴影的确切形状和位置。

enter image description here

我尝试使用Object3D的castShadow / receiveShadow属性禁用阴影,但这根本没有显示任何效果。

网格法线方向的另一个屏幕截图 enter link description here http://front-a-little.de/pics/chest_shadow_issue_blender_normals.png

1 个答案:

答案 0 :(得分:1)

我已更新到最新的three.js版本(r70)并更新了完全重写的Blender Export插件。 所描述的问题很可能是此导出器的先前版本中的错误,使用新插件的导出模型不会显示奇怪的阴影。

fixed version

新导出器在保存屏幕中显示新设置,我必须确保选中“材质”下的“UV”框以便通过Three.JSONLoader加载模型