AFrame:如何在网格上使用平阴影
AFrame:如何在网格上使用平阴影
提问于 2019-05-24 21:47:21
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>如下所示：
网格(在左边)有阴影，而盒子(在右边)是平阴影。我如何设置我的网格使用平阴影？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-25 05:49:16
基于@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>Stack Overflow用户
发布于 2019-05-25 03:28:06
OP错误地将未亮的阴影称为平阴影。后者通常是指非插值的法线阴影。我把原来的答案保留在下面，因为它对将来的参考还是有用的。
最新答案
MeshBasicMaterial可以用来渲染未亮的面孔。
原始答案
我不知道是否有办法在aframe实例化中修改它，但是在three.js方面，您可以像下面这样更新材质阴影：
node.material.flatShading = true;
node.material.needsUpdate = true;这个JSFiddle说明了这一点。
Stack Overflow用户
发布于 2020-05-20 01:37:55
我使用这里的答案将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">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56299870
复制相关文章
相似问题
腾讯云开发者
