three.js — объект не является экземпляром THREE.Object3D

Я пытаюсь использовать 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
})

Однако это не работает. Я попытался отложить создание сетки, как в этом ответе и используя веб-пакет raw-loader и загрузчик файлов. Все еще получаю эту ошибку.


webpack vue.js vuejs2 commonjs three.js
person MachuPichu    schedule 12.03.2017    source источник
comment
Ответил через github владелец репозитория: github.com/fritx/vue-threejs/issues/2   -  person MachuPichu    schedule 16.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Спасибо fritx за этот ответ, вставленный сюда с: https://github.com/fritx

Спасибо за использование библиотеки!

На данный момент компонент предполагает, что сетка существует при его создании, например <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, так и в react-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 })
  })
})

Если я ошибаюсь, дайте мне знать ;)

person MachuPichu    schedule 15.03.2017