Question

我正在使用Nuxtjs + Threejs。网站上的默认脚本会正确显示geometry和动画。我想使用自定义模型，因此我使用OBJLoader安装了MTLLoader和npm，这表示软件包已成功安装。模板：

<template>
  <div id="three" class="three">

  </div>
</template>

脚本代码：

<script>
import * as Three from 'three'
import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader'

export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      mtl: null,
      obj: null
    }
  },
  methods: {
    init: function() {
        let container = document.getElementById('three')

        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10)
        this.camera.position.z = 1

        this.scene = new Three.Scene()
        this.mtl = new MTLLoader()
        this.obj = new OBJLoader()

        this.mtl.load('/mesh/sources/Coffee Hot Cup Sketchfab.mtl', (materials) => {
          materials.preload()
          this.obj.setMaterials(materials)
          this.obj.load('/mesh/sources/Coffee Hot Cup Sketchfab.obj', (object) => {
            this.scene.add(object)
          })
        })

        this.renderer = new Three.WebGLRenderer({antialias: true, alpha: true})
        this.renderer.setSize(container.clientWidth, container.clientHeight)
        this.renderer.setClearColor( 0x000000, 0 )
        this.renderer.render(this.scene, this.camera)
        container.appendChild(this.renderer.domElement)

    }
  },
  mounted() {
      this.init()
  }
}
</script>

问题是，当我要使用我的自定义模型时，该对象未显示，但表示该对象已成功加载。我不知道，如果从路径显示应该没有找到错误，但是没有。我如何解决它？谢谢！

Answer 1

确保已将材料设置为双面。我在Unity游戏引擎上也遇到了类似的问题。有时，加载的文件缺少某些纹理。确保对象材料的双面性通常会有所帮助！

对象加载成功但未显示

1 个答案: