我试图加载纹理到球体在下一步使用三个

Question

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

然而，我可以完美地添加材料，没有图像。例如，如果我删除"map行:TextureLoader().load(earthUV)"并将其替换为"color: 0xff000 "，球体将完全加载，没有错误，但使用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)
})
);