When I run a three.js animation as a component within Vue, it works perfectly fine when loading the texture from an external online resource. However, when I try to run it locally by loading the texture from a local path, it displays black with no error messages.
this.myTexture = new THREE.TextureLoader().load(
"https://vuejs.org/images/logo.png"
// This doesn't work - why?
// "../assets/logo.png"
);
I am using a browser addon to allow CORS, so it is not related to CORS problems...
How can I get it to run when I am running my local Vue server?
Here is the full repository on GitHub: https://github.com/reppoper/vuethreetexture
My code: App.vue
<template>
<div id="app">
<HelloThreeBasic/>
</div>
</template>
<script>
import HelloThreeBasic from './components/HelloThreeBasic.vue'
export default {
name: 'App',
components: {
HelloThreeBasic
}
}
</script>
HelloThreeBasic.vue
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from "three";
export default {
name: "HelloThree",
data() {
return {
cube: null,
renderer: null,
scene: null,
camera: null,
container: null,
myTexture: null,
};
},
methods: {
init: function () {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.container = document.getElementById("container");
this.container.appendChild(this.renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
this.myTexture = new THREE.TextureLoader().load(
"https://vuejs.org/images/logo.png"
// This doesn't work - why?
// "../assets/logo.png"
);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: this.myTexture,
transparent: false,
});
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
this.camera.position.z = 2;
},
animate: function () {
requestAnimationFrame(this.animate);
this.cube.rotation.x += 0.01;
this.renderer.render(this.scene, this.camera);
},
},
mounted() {
this.init();
this.animate();
},
beforeDestroy() {
delete this.container;
},
};
</script>
<style >
#container {
width: 100%;
height: 100%;
top: 0;
position: absolute;
z-index: -10;
}
</style>