AFrame: как использовать плоское затенение на сетке - PullRequest
Новая
       19

AFrame: как использовать плоское затенение на сетке

0 голосов
/ 25 мая 2019

Документы по производительности AFrame (https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md) рекомендуют предварительно запеченное освещение. Я сделал это, так что теперь я хотел бы, чтобы моя сетка использовала плоское затенение. Однако мне неясно, как это сделать? 

<a-gltf-model src="..." material="shader: flat">

Это не имеет никакого эффекта. Я также попытался выполнить итерации узлов в three.js и установить для каждого материала значение flat, но это тоже не сработало. Завершите код, пытаясь выполнить несколько вещей: 

<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>

Это выглядит так:

enter image description here

Сетка (слева) имеет затенение, тогда как прямоугольник (справа) плоскийЗатенение. Как настроить сетку на использование плоской заливки?

Ответы [ 2 ]

0 голосов
/ 25 мая 2019

Этот код работает на основе подсказок @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>
0 голосов
/ 25 мая 2019

OP ошибочно называют неосвещенная штриховка как плоская штриховка . Последнее обычно является ссылкой на не интерполированное нормальное затенение. Я сохранил оригинальный ответ ниже, потому что он все еще может быть полезным для дальнейшего использования.

Обновленный ответ :

MeshBasicMaterial можно использовать для рендеринга неосвещенных лиц.

Оригинальный ответ :

Я не знаю наверняка, есть ли способ изменить это при создании экземпляра, но на стороне three.js вы можете обновить затенение материала следующим образом: 

node.material.flatShading = true;
node.material.needsUpdate = true;

Это JSFiddle иллюстрирует это.

...