Seeking assistance in Three.js: I have successfully mapped a texture image to a plane geometry and rendered it in one scene. In another scene, I have a cube with shader material. Now, I need help incorporating the texture from the first scene onto the surface of the cube. Any guidance would be appreciated.
I have limited documentation on this topic and am relatively new to Three.js. Unsure about the necessary adjustments to my HTML file's vertex and fragment shaders after completing the initial setup as described earlier.
The first scene includes my texture image and plane geometry, while the second scene features the cube alongside the fragment and vertex shader scripts:
this.vertShader = document.getElementById('vertexShader').innerHTML;
this.fragShader = document.getElementById('fragmentShader').innerHTML;
var geometry = new THREE.BoxGeometry( 0.5, 0.5 );
var material = new THREE.MeshLambertMaterial( { color: "blue", wireframe:
true} );
this.mesh = new THREE.Mesh( geometry, material );
this.scene.add( this.mesh );
var texture = new THREE.TextureLoader().load ('js/textures/earth.jpg');
var texMaterial = new THREE.MeshBasicMaterial( { map: texture } );
var texGeometry = new THREE.PlaneGeometry(1, 1);
this.texmesh = new THREE.Mesh(texGeometry, texMaterial);
this.texmesh.position.set(0,0,0);
this.texScene.add(this.texmesh);
vertex shader: varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix *
vec4(position,1.0);
}
fragment shader: uniform sampler2D texture;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(texture, vUv);
}
I am aiming to apply the texture image seamlessly across the cube's surface.