three.js - 對象不是THREE的一個實例。Object3D

Question

我正在嘗試使用three.js OBJLoader - (docs)和vue-threejs和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 
}) 

但是這不起作用。我試過延遲網格創建，如this answer，並使用webpack raw-loader和file-loader。仍然收到該錯誤。

Answer 1

感謝fritx此答案由粘貼 這裏：https://github.com/fritx/vue-threejs/issues/2

感謝您使用的圖書館！

現在，組件假設網格在創建時存在，如<object3d :obj="mesh"></object3d>。

如果您使用異步裝載機，你的代碼可能是這樣的：

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

更多片段通過關鍵字user:fritx "Loader.load(":

（包括兩個VUE-threejs代碼和反應-threejs）

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

在 「ExSpaceFighter.js」，我還與MTLLoader和OBJLoader一個片段：

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

希望有幫助。

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

如果我錯了，請讓我知道了;）