JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/94/three.js"></script>
JavaScript
THREE.BasicShader = {
uniforms: {},
vertexShader: [
'varying vec2 vUv;',
'varying vec3 fragposition;',
"void main() {",
'vUv = uv;',
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
'fragposition=position;',
"}"
].join( "\n" ),
fragmentShader: [
'uniform sampler2D Texture;',
'varying vec2 vUv;',
'varying vec3 fragposition;',
'vec4 ProjectorColor=vec4(0.0);',
'vec2 Uv2=vec2(0.0,0.0);',
'vec4 getProjectorColor(vec3 prf,sampler2D t){',
'//they number above is about 1/Math.PI',
'Uv2=vec2(atan(fragposition.z,fragposition.x)*0.1591549431+0.5, 0.5+asin(fragposition.y/length(fragposition))* 0.31830988618379 );',
'return texture2D(t, Uv2);',
'}',
"void main() {",
"gl_FragColor = getProjectorColor(fragposition,Texture);",
"}"
].join( "\n" )
};
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 0;
scene = new THREE.Scene();
var textureLoader = new THREE.TextureLoader();
textureEquirec = textureLoader.load( "http://i4.bvimg.com/658982/246c1a73be97c68c.jpg" );
textureEquirec.wrapS=THREE.RepeatWrapping;
var shader =THREE.BasicShader;
ShaderMaterial = new THREE.ShaderMaterial({
side:THREE.DoubleSide,
uniforms:{
Texture:{value:textureEquirec},
},
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
})
geometry = new THREE.SphereGeometry( 0.5,5, 5 );
mesh = new THREE.Mesh( geometry, ShaderMaterial );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame(...