简体   繁体   English

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

[英]Three.js - Extreme shadow on face of mesh

I've created a chest model using blender, created a handpainted texture for it and set the whole thing up in an environment rendered with Three.js. 我已经使用Blender创建了一个胸部模型,为其创建了手绘纹理,并在用Three.js渲染的环境中设置了整个东西。 The chest front face however has a unusually extreme shadow: 但是,胸部正面有一个异常的极端阴影:

在此处输入图片说明

Here's my Renderer setup: 这是我的渲染器设置:

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

This is the light source (in the screenshot, it's the only light source) causing this shadow: 这是造成此阴影的光源(在屏幕截图中,它是唯一的光源):

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

Material setup: 材料设置:

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;

The mesh is created using this material together with the JSON data containing the geometry and UV mapping exported from Blender. 使用此材料以及包含从Blender导出的几何图形和UV映射的JSON数据创建网格。 I use THREE.JSONLoader to get the data at runtime. 我使用THREE.JSONLoader在运行时获取数据。 Here's a screenshot from blender showing the mesh and UV map unwrapped, it seems to be an issue with the selected face as it matches the exact shape and position of the weird shadow. 这是一个来自Blender的屏幕截图,显示了网格和UV贴图的展开状态,这与所选面的形状和怪异阴影的确切位置相匹配似乎是一个问题。

在此处输入图片说明

I've tried disabling the shadow with Object3D's castShadow/receiveShadow attributes but that doesn't show any effect at all. 我尝试使用Object3D的castShadow / receiveShadow属性禁用阴影,但这根本没有显示任何效果。

Another screenshot of the normals orientation of the mesh 网格法线方向的另一个屏幕截图 在此处输入链接说明
(source: front-a-little.de ) (来源: front-a-little.de

I've updated to the latest three.js release (r70) and updated the completely re-written Blender Export addon. 我已经更新到最新的three.js版本(r70),并更新了完全重写的Blender Export插件。 The described issue was most likely a bug in a previous version of this exporter, an exported model using the new addon doesn't show the weird shadow. 所描述的问题很可能是该导出器先前版本中的一个错误,使用新插件的导出模型不会显示出怪异的阴影。

固定版

The new exporter comes with new settings in the save screen, I had to make sure the "UVs" box under "Materials" is checked in order to load the model via Three.JSONLoader 新的导出器在保存屏幕中具有新设置,我必须确保选中“材料”下的“ UVs”框,以便通过Three.JSONLoader加载模型。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM