Как назначить материал для GLTF react-three-fiber

Мне удалось загрузить объект gltf в мою сцену из трех волокон. Теперь я хочу прикрепить материал к своей модели. Можно ли использовать на этой модели стандартный материал? Вот что я пробовал:

const Shape = (props) = ›{const gltf = useLoader (GLTFLoader, GLTFfe)

    const material = new THREE.MeshStandardMaterial({
          color: 0xff0000, 
          transparent: false, opacity: 0.5
     });

    const object = new THREE.Mesh(gltf, material)

    return <primitive object={object.scene} position={[0, 0, 0]} />
  }

reactjs object gltf react-three-fiber three.js
person ib95    schedule 28.12.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Можно ли использовать на этой модели стандартный материал?

MeshStandardMaterial - это материал по умолчанию при загрузке объектов с GLTFLoader. Возможно, вам не нужно создавать новый материал, а просто изменять существующие.

Поскольку актив glTF всегда состоит из иерархии объектов, вам необходимо сделать следующее:

gltf.scene.traverse( function( object ) {

    if ( object.isMesh ) {

        object.material.color.set( 0xff0000 );
        object.material.transparent = true;
        object.material.opacity = 0.5;

    }

} );
person Mugen87    schedule 28.12.2020
comment
Спасибо за ответ, где мне разместить эту функцию в своей сцене? Ниже константного объекта? это сработало и для меня, преобразовав файл с помощью github.com/pmndrs/gltfjsx - person ib95; 28.12.2020
comment
я бы вообще рекомендовал не мутировать. мутация и обход всегда являются антипаттерном - это вызовет у вас головную боль в ванильных приложениях dom, а также в threejs. gltfjsx создает неизменяемый вложенный граф, вы можете легко изменить все, что захотите, без обхода. это также позволяет вам повторно использовать модели без их клонирования или повторной загрузки. здесь есть небольшой учебник: github.com/drcmda/floating-shoe - person hpalu; 03.01.2021

arrow_upward
1
arrow_downward

Я нашел способ, необходимо изменить что-то после загрузки вашего gltf, преобразовать его в jsx с помощью gltfjsx https://github.com/pmndrs/gltfjsx.

person ib95    schedule 28.12.2020