我正在尝试使用三个将纹理加载到 Nuxt 中的球体上

Question

我正在尝试向球体添加纹理，特别是通过使用 TextureLoader 将图像映射到它。

但是，我可以添加 material 非常好，没有图像。例如，如果我删除了“map: TextureLoader().load(earthUV)”这一行并将其替换为“color: 0xFF0000”，球体将完美无误地加载，但使用 TextureLoader 我只会收到错误日志在下方找到。

请随时提问，因为我不知道我还应该提供什么来帮助修复此错误。

错误日志：

TypeError: Cannot set properties of undefined (setting 'manager')
    at Loader (three.module.js?5a89:34164:1)
    at TextureLoader (three.module.js?5a89:34947:1)
    at VueComponent.mounted (about.vue?9043:39:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at callHook (vue.runtime.esm.js?2b0e:4235:1)
    at Object.insert (vue.runtime.esm.js?2b0e:3158:1)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6390:1)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6538:1)
    at Vue._update (vue.runtime.esm.js?2b0e:3960:1)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4075:1)

请在下面找到我尝试的代码：

<template>
  <div>
    <canvas ref="aboutCanvas"></canvas>
  </div>
</template>

<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Mesh,
  SphereGeometry,
  MeshBasicMaterial,
  TextureLoader,
} from "three";

import earthUV from "~/assets/earthUV.jpg";
export default {
  mounted() {
    const scene = new Scene();
    const camera = new PerspectiveCamera(
      75,
      innerWidth / innerHeight,
      0.1,
      1000
    );

    const renderer = new WebGLRenderer({
      canvas: this.$refs.aboutCanvas,
    });
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create a sphere
    const sphere = new Mesh(
      new SphereGeometry(5, 50, 50),
      new MeshBasicMaterial({
        map: TextureLoader().load(earthUV)
      })
    );

    // Add objects into scene
    scene.add(sphere);

    camera.position.z = 10;

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  },
};
</script>

Answer 1

创建TextureLoader时，必须使用new关键字。您可以多次使用单个 TextureLoader 来加载所需数量的纹理。

const texLoader = new TextureLoader();

const sphere = new Mesh(
  new SphereGeometry(5, 50, 50),
  new MeshBasicMaterial({
    map: texLoader.load(earthUV)
  })
);

我正在尝试使用三个将纹理加载到 Nuxt 中的球体上

I am trying to load a texture onto a Sphere in Nuxt using Three

three.js

vue.js

nuxt.js