JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
CSS
body {
overflow: hidden;
}
JavaScript
var camera, scene, renderer;
var mesh1, mesh2, mesh3, geometry1, geometry2, geometry3, material;
var raycaster;
var mouse;
var objects = [];
init();
animate();
function init() {
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry1 = new THREE.TetrahedronGeometry( 200, 0);
geometry2 = new THREE.OctahedronGeometry( 200, 0);
geometry3 = new THREE.TetrahedronGeometry( 200, 0);
material = new THREE.MeshBasicMaterial({
color: 0x000000,
wireframe: true,
wireframeLinewidth: 2
});
mesh1 = new THREE.Mesh(geometry1, material);
mesh2 = new THREE.Mesh(geometry2, material);
mesh3 = new THREE.Mesh(geometry3, material);
mesh1.position.set(-100,400,0);
mesh2.position.set(-100, -50, 0);
mesh3.position.set(-100, -450, 0);
scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
mesh1.rotation.y += 0.002;
mesh2.rotation.y += -0.002;
mesh3.rotation.y += 0.003;
renderer.render(scene, camera);
}
var projector = new THREE.Projector();
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( [mesh1, mesh2, mesh3] );
if ( intersects.length > 0 ) {
console.log(intersects[ 0 ].object)
intersects[ 0 ].object.material.color.setHex(...