JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.addEventListener( 'click', onDocumentMouseClick, false );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
var size1 = new THREE.Vector3( 150, 400, 310 );
var geometry = new THREE.Geometry();
geometry.vertices.push( size1 );
var pointMaterial = new THREE.PointsMaterial( { size: 10, sizeAttenuation: false } );
var point = new THREE.Points( geometry, pointMaterial );
scene.add( point );
/// Add a Box3
var size = new THREE.Vector3( 1, 1, 1 );
var box = new THREE.Box3().setFromCenterAndSize( new THREE.Vector3(), size );
var boxHelper = new THREE.Box3Helper( box );
scene.add( boxHelper );
var mouse2D = new THREE.Vector3();
var center = new THREE.Vector3();
// Executes when the mouse "moves"
function onDocumentMouseClick( event )
{
event.preventDefault();
mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
center.set( mouse2D.x, mouse2D.y, 0 );
center.unproject( camera );
var geometry = new THREE.Geometry();
var pointMaterial = new THREE.PointsMaterial( { size: 10, sizeAttenuation: false } );
var point = new THREE.Points( geometry, pointMaterial );
scene.add( point );
geometry.vertices.push( center );
geometry.verticesNeedUpdate = true;
var box1 = new THREE.Box3( geometry.vertices[0], center );
box.copy( box1 );
renderer.render(scene, camera);
}
camera.position.z = 2;
renderer.render(scene, camera);