three.js - Objekt keine Instanz von THREE.Object3D

Question

Ich versuche zu verwenden three.js OBJLoader - (docs) mit vue-threejs und 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 
}) 

Dies funktioniert jedoch nicht. Ich habe versucht, Mesh-Erstellung wie in this answer und mit Webpack raw-loader und file-loader zu verzögern. Immer noch diesen Fehler zu bekommen.

Answer 1

Dank fritx für diese Antwort eingefügt hier aus: https://github.com/fritx/vue-threejs/issues/2

Vielen Dank für die Benutzung der Bibliothek!

Momentan nimmt eine Komponente an, dass das Netz existiert, wenn es erzeugt wird, wie <object3d :obj="mesh"></object3d>.

Wenn Sie async Lader verwenden, könnte Ihr Code wie folgt aussehen:

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

Mehr Schnipsel von Schlüsselwort user:fritx "Loader.load(":

(einschließlich Code in beiden vue-threejs und reagieren-threejs)

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

In "ExSpaceFighter.js", hatte ich auch einen Ausschnitt mit MTLLoader und OBJLoader:

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

Hoffe, dass hilft.

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

Wenn ich falsch bin, lass es mich wissen;)