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

I am trying to add a texture to a sphere, specifically by mapping an image to it using TextureLoader.

However, I can add the material perfectly fine, without the image that is. For example, if I removed the line "map: TextureLoader().load(earthUV)" and replaced it with "color: 0xFF0000", the sphere would load perfectly fine with no errors, but with the TextureLoader I just receive the error log found below.

Please feel free to ask questions as I do not know what else I should provide to help fix this error.

Error Log:

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)

Please find the code for my attempt below:

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

CodePudding user response：

When creating a TextureLoader, you have to use the new keyword. You can use that single TextureLoader multiple times to load as many textures as you need.

const texLoader = new TextureLoader();

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