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
:
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
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 Uniform s (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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.