我试图使用三个

Question

我正在尝试将纹理添加到一个球体中，特别是通过使用TexturEloDoder将图像映射到其上。

但是，我可以完美地添加材料，而没有图像。例如，如果我删除了“映射：textureLoader（）。负载（Earthuv）”并用“ color：0xff0000”代替它，则球体会在没有错误的情况下完全填充，但是对于纹理程序，我只是收到错误日志在下面找到。

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

错误日志：

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

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

const texLoader = new TextureLoader();

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