Bdtjtk

I have 2 scenes, in one of them I have mapped a texture image to a plane geometry and I have simply rendered it, in the other scene I have a cube with shader material, now I want the image texure shown in hte first scene to be mapped to the cube surface, but I dont know how can I do it, can anyone help?

actually there is not enough documentation on what I want to do and I am somehow new to three.js so I have no idea what should I do in my HTML file's vertex and fragment shaders, only have done what I mentioned earlir.

here are my texture image and plane geometry in the first scene and the cube in the other, and also my fragment and vertex shader:

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 woud like the cube to be covered with the texture image.

In the fragment shader has to be declared a uniform variable of type sampler2D:

Vertex Shader:

varying vec2 vUv;



void main() {

    vUv = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

Fragment Shader:

precision highp float;



uniform sampler2D u_texture; // <---------------------------------- texture sampler uniform



varying vec2 vUv;



void main(){

    gl_FragColor = texture2D(u_texture, vUv);

}

With the shaders a THREE.ShaderMaterial can be created.

First load the texture:

var texture = new THREE.TextureLoader().load ('js/textures/earth.jpg');

Then specify the set of Uniforms (in this case there is the texture uniform only):

var uniforms = {

    u_texture: {type: 't', value: texture}

};

Finally create the material:

var material = new THREE.ShaderMaterial({  

      uniforms: uniforms,

      vertexShader: document.getElementById('vertex-shader').textContent,

      fragmentShader: document.getElementById('fragment-shader').textContent

});

The material can be used in the same manner as any other material, see the example:

(function onLoad() {

  var loader, camera, scene, renderer, orbitControls;

  

  init();

  animate();



  function createModel() {



    var texture = new THREE.TextureLoader().load( 'https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/Gominolas.png' );



    var uniforms = {

        u_texture: {type: 't', value: texture}

    };

        

    var material = new THREE.ShaderMaterial({  

          uniforms: uniforms,

          vertexShader: document.getElementById('vertex-shader').textContent,

          fragmentShader: document.getElementById('fragment-shader').textContent

    });



    var geometry = new THREE.BoxGeometry( 1, 1, 1 );

    var mesh = new THREE.Mesh(geometry, material);



    scene.add(mesh);

  }



  function init() {

    renderer = new THREE.WebGLRenderer({

      antialias: true,

      alpha: true

    });

    renderer.setPixelRatio(window.devicePixelRatio);

    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.shadowMap.enabled = true;

    document.body.appendChild(renderer.domElement);



    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);

    camera.position.set(0, 1, -2);



    loader = new THREE.TextureLoader();

    loader.setCrossOrigin("");



    scene = new THREE.Scene();

    scene.background = new THREE.Color(0xffffff);

    scene.add(camera);

    window.onresize = resize;

    

    orbitControls = new THREE.OrbitControls(camera);

    

    addGridHelper();

    createModel();

  }



  function addGridHelper() {

    

    var helper = new THREE.GridHelper(100, 100);

    helper.material.opacity = 0.25;

    helper.material.transparent = true;

    scene.add(helper);



    var axis = new THREE.AxesHelper(1000);

    scene.add(axis);

  }



  function resize() {

    

    var aspect = window.innerWidth / window.innerHeight;

    renderer.setSize(window.innerWidth, window.innerHeight);

    camera.aspect = aspect;

    camera.updateProjectionMatrix();

  }



  function animate() {

    requestAnimationFrame(animate);

    orbitControls.update();

    render();

  }



  function render() {

    renderer.render(scene, camera);

  }

})();

<script type='x-shader/x-vertex' id='vertex-shader'>

varying vec2 vUv;

void main() {

    vUv = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

</script>



<script type='x-shader/x-fragment' id='fragment-shader'>

precision highp float;

uniform sampler2D u_texture;

varying vec2 vUv;

void main(){

    gl_FragColor = texture2D(u_texture, vUv);

}

</script>



<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>