JSFiddle - React, Tailwind, and code Playground

by Ezequiel Pozzo

HTML

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>

JavaScript

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);
light.position.set(30, 100, 50);
light.position.normalize();


var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2,  window.innerHeight / -2, window.innerHeight / 2, -10, 1000);
camera.position = new THREE.Vector3(0, 0, -100);
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);

document.addEventListener('mousedown', onDocumentMouseDown, false);

var pointer = new THREE.Mesh(new THREE.SphereGeometry(4));
scene.add(pointer);

function onDocumentMouseDown(event) {
    event.preventDefault();
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
    projector = new THREE.Projector();
    var ray = projector.pickingRay(vector, camera);
    pointer.position = vector.clone();
    pointer.position.z = 0;

    renderer.render(scene, camera);
}

renderer.render(scene, camera);