three.js - 对象不是 THREE.Object3D 的实例答案

【问题标题】：three.js - object not an instance of THREE.Object3Dthree.js - 对象不是 THREE.Object3D 的实例
【发布时间】：2017-03-12 23:23:02
【问题描述】：

我正在尝试将三个.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。仍然出现该错误。

【问题讨论】：

repo 所有者通过 github 回答：github.com/fritx/vue-threejs/issues/2

标签： three.js webpack vue.js vuejs2 commonjs

【解决方案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>

更多sn-ps关键词user:fritx "Loader.load(":

（包括 vue-threejs 和 react-threejs 中的代码）

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

在“ExSpaceFighter.js”中，我也有一个带有 MTLLoader 和 OBJLoader 的 sn-p：

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

如果我错了，请告诉我；）

【讨论】：