We can render an image on a sphere as seen in the code below
Example: Create a glob out of world map
import * as THREE from 'https://cdn.skypack.dev/[email protected]';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const sphere = new THREE.Mesh(new THREE.
SphereGeometry(5,50,50),new THREE.
MeshBasicMaterial({
map: new THREE.TextureLoader().load('./img/img1.jpg')
})
);
scene.add( sphere );
camera.position.z = 15;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
I need to a video tag in html page to play a video in threejs VideoTexture
How do I do the same but with a video?