I am following a THREEJS tutorial and I am having an issue loading my texture. The issue occurs when I map my image and clone a material. In the tutorial everything works correctly but when I try to implement it I receive the two errors “Texture marked for update but image is incomplete” and “GL_INVALID_VALUE: Offset overflows texture dimensions.” What is the reasoning for this and how do I resolve it?
constructor(options){
this.container = options.domElement;
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.camera = new THREE.PerspectiveCamera( 30, this.width/this.height, 10, 1000 );
this.camera.position.z = 600;
this.camera.fov = 2*Math.atan(( this.height/2 )/600) * 180/Math.PI;
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer( {
antialias: true,
alpha: true } );
this.renderer.setPixelRatio(window.devicePixelRatio); //2 pretty 1 less resources
this.container.appendChild(this.renderer.domElement);
this.time = 0;
this.setUpSettings();
this.resize();
this.addObjects();
this.render();
this.setupResize();
}
setUpSettings(){
this.settings = {
progress: 0
}
this.gui = new dat.GUI();
this.gui.add(this.settings, "progress", 0, 1, 0.001);
}
resize(){
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.renderer.setSize( this.width, this.height );
this.camera.aspect = this.width/this.height;
this.camera.updateProjectionMatrix();
}
setupResize(){
window.addEventListener('resize', this.resize.bind(this));
}
addObjects(){
this.geometry = new THREE.PlaneBufferGeometry(1, 1, 100, 100);
this.material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 1.0 },
uProgress: { value: 0 },
uTexture: {value: new THREE.TextureLoader().load(testTexture)},
uTextureSize: {value: new THREE.Vector2(100, 100)},
uCorners: {value: new THREE.Vector4(0, 0, 0, 0)},
uResolution: { value: new THREE.Vector2(this.width,this.height) },
uQuadSize: { value: new THREE.Vector2(300, 300)}
},
vertexShader: vertex,
fragmentShader: fragment,
})
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.mesh.position.x = 300
this.mesh.scale.set(300,300,1);
this.images = [...document.querySelectorAll('.js-image')];
this.materials = [];
this.asscroll = new ASScroll();
this.asscroll.enable({
horizontalScroll: true
})
this.imageStore = this.images.map(img=>{
let bounds = img.getBoundingClientRect();
let m = this.material.clone();
this.materials.push(m);
let texture = new THREE.Texture(img);
texture.needsUpdate = true;
m.uniforms.uTexture.value = texture;
let mesh = new THREE.Mesh(this.geometry, m);
this.scene.add(mesh);
this.mesh.scale.set(bounds.width, bounds.height, 1);
return {
img: img,
mesh: mesh,
width: bounds.width,
height: bounds.height,
top: bounds.top,
left: bounds.left,
}
})
}
setPosition(){
this.imageStore.forEach(o=>{
o.mesh.position.x = 0;
o.mesh.position.y = 0;
})
}
render(){
this.time += 0.05;
this.material.uniforms.time.value = this.time;
// this.material.uniforms.uProgress.value = this.settings.progress;
this.tl.progress(this.settings.progress);
this.mesh.rotation.x = this.time / 2000;
this.mesh.rotation.y = this.time / 1000;
this.renderer.render( this.scene, this.camera );
requestAnimationFrame(this.render.bind(this))
}
}
new Sketch({
domElement: document.getElementById('container')
});