AFrame:如何在网格上使用平面着色

本文介绍了AFrame:如何在网格上使用平面着色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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:如何在网格上使用平面着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！