JSFiddle - React, Tailwind, and code Playground

by BAR24

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<div id="ThreeJS"></div>

JavaScript

var container, scene, camera, renderer;
var objects = [];
var mouse = new THREE.Vector2();
var projector;
var mesh;

var raycaster = new THREE.Raycaster();

init();
animate();

function init() {

  scene = new THREE.Scene();

  var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;

  camera = new THREE.OrthographicCamera(SCREEN_WIDTH / -2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / -2, 1, 1000);
  camera.position.z = 100;
  scene.add(camera);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

  container = document.getElementById('ThreeJS');

  container.appendChild(renderer.domElement);

  var geometry = new THREE.PlaneGeometry(100, 100, 10);
  //var geometry = new THREE.BoxGeometry(100, 100, 10);

  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);
  scene.add(createMarkerLine(-40));

  objects.push(mesh);

  renderer.domElement.addEventListener('mousedown', onMouseDown, false);
  renderer.domElement.addEventListener('mouseup', onMouseDown, false);

}

function createMarkerLine(y) {
  var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
  });

  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-500, y, 0),
    new THREE.Vector3(500, y, 0)
  );

  var line = new THREE.Line(geometry, material);

  return line
}

function animate() {
  requestAnimationFrame(animate);
  render();
}


function render() {
  renderer.render(scene, camera);
}

function onMouseDown(event) {
  event.preventDefault();

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  //console.log("x: " + mouse.x + ", y: " + mouse.y);

  raycaster.setFromCamera(mouse, camera)

  var intersects = raycaster.intersectObjects(objects);

  if (intersects.length > 0) {
    console.log("touched:" + intersects[0]);
 ...