JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.min.js"></script>
JavaScript
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
var scene = new THREE.Scene();
var mouse = new THREE.Vector2();
var targetList = [];
var camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 1, 10000);
var raycaster = new THREE.Raycaster();
var renderer = new THREE.WebGLRenderer({/*alpha: true*/ antialias: true});
var INTERSECTED;
init();
render();
function newCircle(radius, color, pos) {
segments = 64;
material = new THREE.LineBasicMaterial({color: color});
geometry = new THREE.CircleGeometry(radius, segments);
geometry.vertices.shift();
var circle = new THREE.Line(geometry, material);
circle.position.set(pos.x, pos.y, pos.z);
return circle;
}
function init() {
scene.background = new THREE.Color(0xff00ff);
camera.position.z = 1000;
renderer.setSize(WIDTH, HEIGHT);
//renderer.setClearColor(0xffffff, 0);
document.body.appendChild(renderer.domElement);
var c1 = newCircle(20, 0x0000ff, new THREE.Vector3(-50, 0, 0));
scene.add(c1);
scene.updateMatrixWorld(true);
var c1Pos = new THREE.Vector3();
c1Pos.setFromMatrixPosition(c1.matrixWorld);
var geometry = new THREE.Geometry();
geometry.vertices.push(c1Pos);
geometry.vertices.push(new THREE.Vector3(100, 50, 0));
var material = new THREE.LineBasicMaterial({
color: 0x000000,
linewidth: 2
});
var line = new THREE.Line(geometry, material);
scene.add(line);
document.addEventListener('mousemove', onMouseMove, false);
window.addEventListener( 'resize', onWindowResize, false );
}
function render() {
raycaster.setFromCamera(mouse.clone(), camera);
// create an array containing all objects in the scene with which the raycaster intersects
var intersects = raycaster.intersectObjects(scene.children);
if ( intersects.length > 0 )
{
// if the closest object intersected is not the currently stored intersection object
if ( intersects[ 0 ].object !=...