AFrame性能文档(https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md)建议使用预烘焙的照明。我已经做到了,所以现在我想让我的网格物体使用平面阴影。但是我不清楚该怎么做?
<a-gltf-model src="..." material="shader: flat">
这无效。我还尝试了对three.js中的节点进行迭代,并将每种材质设置为平坦,但这也不起作用。尝试一堆代码的完整代码:
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #000000">
<!-- Box.gltf from https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Box/glTF -->
<a-gltf-model id="gltf" src="Box.gltf" position="-1 1 -2"></a-gltf-model>
<a-box position="1 1 -2" material="shader: flat; color: red"></a-box>
</a-scene>
<script>
var office = document.getElementById( 'gltf' );
office.addEventListener( 'object3dset', () => {
const mesh = office.getObject3D( 'mesh' );
mesh.children[0].material.flatShading = true;
mesh.children[0].material.needsUpdate = true;
mesh.children[0].geometry.normalsNeedUpdate = true;
mesh.traverse( node => {
if ( node.isMesh === undefined || node.isMesh === false ) {
return;
}
node.material.flatShading = true;
node.material.needsUpdate = true;
node.geometry.normalsNeedUpdate = true;
} );
} );
</script>
</body>
</html>
呈现如下:
网格(左侧)具有阴影,而框(右侧)具有平面阴影。如何设置网格以使用平面着色?
答案 0 :(得分:1)
我使用这里的答案将一个a框架组件放在一起,该组件将a实体设置为不亮,包括带有子网格物体的网格物体
AFRAME.registerComponent('unlit', {
init: function () {
function recursivelySetChildrenUnlit(mesh) {
if (mesh.material && mesh.material.map) {
mesh.material = new THREE.MeshBasicMaterial({ map: mesh.material.map });
}
if (mesh.children) {
for (var i = 0; i < mesh.children.length; i++) {
recursivelySetChildrenUnlit(mesh.children[i]);
}
}
}
this.el.addEventListener('model-loaded', (e) => {
const mesh = e.target.getObject3D('mesh');
for (var i = 0; i < mesh.children.length; i++) {
recursivelySetChildrenUnlit(mesh.children[i]);
}
});
}
});
然后您要做的就是像这样添加未照明的组件
<a-entity unlit gltf-model="#model">
答案 1 :(得分:0)
OP错误地将不亮阴影称为平坦阴影。后者通常是对非插值法线着色的引用。我将原始答案保留在下面,因为它仍然可以用于将来的参考。
更新后的答案:
MeshBasicMaterial
可用于渲染不发光的脸部。
原始答案:
我不确定是否可以在框架实例化上进行修改,但是在three.js方面,您可以像下面这样更新材质底纹:
node.material.flatShading = true;
node.material.needsUpdate = true;
此JSFiddle说明了这一点。
答案 2 :(得分:0)
基于@WestLangley的线索,此代码有效:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #000000">
<!-- Box.gltf from https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Box/glTF -->
<a-gltf-model id="gltf" src="Box.gltf" position="-1 1 -2"></a-gltf-model>
<a-box position="1 1 -2" material="shader: flat; color: red"></a-box>
</a-scene>
<script>
var office = document.getElementById( 'gltf' );
office.addEventListener( 'object3dset', () => {
const mesh = office.getObject3D( 'mesh' );
mesh.children[0].material = new THREE.MeshBasicMaterial({map: mesh.children[0].material.map});
} );
</script>
</body>
</html>