three.js - objet pas une instance de TROIS.Object3D

Question

J'essaie d'utiliser trois.js OBJLoader - (docs) avec vue-threejs et Webpack.

var OBJLoader = require('three-obj-loader') 
OBJLoader(THREE) 
var loader = new THREE.OBJLoader() 

loader.load(require('./sphere.obj'), function (geometry) { 
    var material = new THREE.MeshBasicMaterial({ color: 0xffffff }) 
    var mesh = new THREE.Mesh(geometry, material) 
    return mesh 
}) 

Cependant, cela ne fonctionne pas. J'ai essayé de retarder la création de maillage comme dans this answer et en utilisant webpack raw-loader et file-loader. Toujours avoir cette erreur.

Answer 1

Merci à fritx pour cette réponse collée ici de: https://github.com/fritx/vue-threejs/issues/2

Merci pour avoir utilisé la bibliothèque!

Pour l'instant, un composant suppose que le maillage existe lors de sa création, par exemple <object3d :obj="mesh"></object3d>.

Si vous utilisez des chargeurs async, votre code pourrait ressembler à ceci:

<template> 
    <object3d v-if="mesh" :obj="mesh"></object3d> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     mesh: null // <---- 
    } 
    }, 
    methods: { 
    createBox() { 
     objLoader.load(xxx, geometry => { 
     let mesh = new THREE.Mesh(geometry, material) 
     this.mesh = mesh // <---- 
     }) 
    } 
    } 
} 
</script> 

Plus extraits par mot clé user:fritx "Loader.load(":

(y compris le code dans les deux Vue-threejs et réagir-threejs)

https://github.com/search?q=user%3Afritx+%22Loader%28%29.load%28%22&ref=opensearch&type=Code

Dans "ExSpaceFighter.js", j'avais aussi un extrait avec MTLLoader et OBJLoader:

https://github.com/fritx/react-threejs/blob/6e2317d1e616ed5562f889de6b885deffb14d18a/example/ExSpaceFighter.js#L18-L31

espoir qui aide.

var mtlLoader = new MTLLoader(); 
mtlLoader.setBaseUrl('SpaceFighter03/') 
mtlLoader.setPath('SpaceFighter03/') 
mtlLoader.load('SpaceFighter03.mtl', (materials) => { 
    materials.preload(); 
    var objLoader = new OBJLoader(); 
    objLoader.setMaterials(materials); 
    objLoader.setPath('SpaceFighter03/') 
    objLoader.load('SpaceFighter03.obj', (group) => { 
    const body = group.children[0] 
    body.material.color.set(0xffffff) 
    this.setState({ body }) 
    }) 
}) 

Si je me trompe, s'il vous plaît laissez-moi savoir;)