AFrame:如何在网格上使用平面着色 [英] AFrame: how to use flat shading on a mesh
问题描述
AFrame 性能文档(
网格(左侧)有阴影，而框(右侧)是平面阴影.如何将网格设置为使用平面着色?
根据来自@WestLangley 的线索，此代码有效:
<头><meta charset="utf-8"><script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><身体><a-scene background="color: #000000"><!-- Box.gltf 来自 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><脚本>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});});</html>The AFrame performance docs (https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md) recommend pre-baked lighting. I have done this, so now I'd like my mesh to use flat shading. However I'm unclear how to do this?
<a-gltf-model src="..." material="shader: flat">
This has no effect. I also tried iterating the nodes in three.js and setting each material to flat, but that didn't work either. Complete code trying a bunch of things:
<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>
This renders like this:
The mesh (on the left) has shading, whereas the box (on the right) is flat shaded. How can I set my mesh to use flat shading?
Based on clues from @WestLangley, this code works:
<!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>
这篇关于AFrame:如何在网格上使用平面着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
