首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >AFrame:如何在网格上使用平阴影

AFrame:如何在网格上使用平阴影
EN

Stack Overflow用户
提问于 2019-05-24 21:47:21
回答 3查看 1.5K关注 0票数 1

AFrame性能文档(https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md)推荐预焙照明。我已经这样做了,所以现在我想我的网格使用平阴影。但是我不清楚该怎么做?

代码语言:javascript
运行
复制
<a-gltf-model src="..." material="shader: flat">

这没有任何效果。我还尝试迭代three.js中的节点,并将每个材料设置为平面,但这也不起作用。完整的代码尝试了很多事情:

代码语言:javascript
运行
复制
<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>

如下所示:

网格(在左边)有阴影,而盒子(在右边)是平阴影。我如何设置我的网格使用平阴影?

EN

Stack Overflow用户

回答已采纳

发布于 2019-05-25 05:49:16

基于@WestLangley的线索,此代码有效:

代码语言:javascript
运行
复制
<!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>
票数 1
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56299870

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档