JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head></head>
<body></body>
</html>
CSS
body {
background: #000;
padding: 0;
margin: 0;
overflow: hidden;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
JavaScript
var DEBUG = false;
var container, camera, scene, renderer,
material, geometry, mesh, pa,
projector, light,
objects = [];
var mouse = new THREE.Vector2();
var width = window.innerWidth;
var height = window.innerHeight;
var fov = 70,
aspect = width / height,
near = 0.1,
far = 10000;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 200;
scene = new THREE.Scene();
projector = new THREE.Projector();
light = new THREE.PointLight(0xFFFFFF);
light.position.x = 0;
light.position.y = 0;
light.position.z = 0;
geometry = new THREE.SphereGeometry(32, 16, 16);
material = new THREE.MeshLambertMaterial({
opacity: 1,
color: Math.random() * 0x808008 + 0x808080
});
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(100, 0, 0);
mesh.name = "mesh";
scene.add(mesh);
scene.add(camera);
scene.add(light);
objects.push(mesh);
renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown(e) {
e.preventDefault();
mouse.x = (e.clientX / width) * 2 - 1;
mouse.y = - (e.clientY / height) * 2 + 1;
var vector = new THREE.Vector3(mouse.x,...