JSFiddle - React, Tailwind, and code Playground
CSS
body {
background-color: #fff;
margin: 0px;
overflow: hidden;
}
JavaScript
var camera, scene, renderer, projector;
var sun, mercury;
function init (){
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 75;
scene = new THREE.Scene();
var sunLight = new THREE.PointLight( 0xffffff, 1);
sunLight.position.set( 12,35,35 );
scene.add( sunLight );
var sunGeo = new THREE.SphereGeometry(12,35,35);
var sunMat = new THREE.MeshPhongMaterial({color: 0xF7FE2E});
//sunMat.map = THREE.ImageUtils.loadTexture("image/sunmap.jpg");
sun = new THREE.Mesh(sunGeo, sunMat);
sun.position.set(0,0,0);
scene.add(sun); // add Sun
var mercuryGeo = new THREE.SphereGeometry(2,15,15);
var mercuryMat = new THREE.MeshPhongMaterial();
// mercuryMat.map = THREE.ImageUtils.loadTexture("image/mercurymap.jpg");
mercury = new THREE.Mesh(mercuryGeo, mercuryMat);
scene.add(mercury); // add Mercury
// initialize object to perform world/screen calculations
projector = new THREE.Projector();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
/* for ( var i = 0; i < intersects.length; i++ ) {
var intersection = intersects[ i ];
var obj = intersection.object;
obj.material.color.setRGB( 1.0 - i / intersects.length, 0, 0 );
console.log("Intersected object:");
}*/
function onDocumentMouseDown( e ) {
e.preventDefault();
var mouseVector = new THREE.Vector3(
( e.clientX / window.innerWidth ) * 2 - 1,
- ( e.clientY / window.innerHeight ) * 2 + 1,
1 );
projector.unprojectVector( mouseVector, camera );
var raycaster = new THREE.Raycaster( camera.position,...