JSFiddle - React, Tailwind, and code Playground

by tJener

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/Three.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/RequestAnimationFrame.js"></script>

JavaScript

var renderer, scene, camera, mesh, geometry, material;
var hits, ray, direction;
var frameCount = 0;

function init() {
  renderer = new THREE.CanvasRenderer();
  renderer.setSize( 300, 200 );
  document.body.appendChild( renderer.domElement );

  camera = new THREE.PerspectiveCamera(75, 300 / 200, 1, 10000);
  camera.position.z = 200;
  scene = new THREE.Scene();

  material = new THREE.MeshBasicMaterial({ color: 0x880000 });
  geometry = new THREE.PlaneGeometry( 200, 200 );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  direction = new THREE.Vector3( 0, 0, -1 );
  ray = new THREE.Ray( camera.position, direction );
}

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

function animate() {
  requestAnimationFrame( animate );

  if( frameCount === 0 ) {
    mesh.position.x = 0;
  }

  else if( frameCount === 1 ) {
    mesh.position.x += 10;
  }

  render();

  if( frameCount === 0 ) {
    hits = ray.intersectObject( mesh );
    if( !hits.length ) {
      alert( 'Why does the ray not hit?' );
    }
  }

  else if( frameCount === 1 ) {
    hits = ray.intersectObject( mesh );
    if( hits.length ) {
      alert( 'It went between the tris?' );
    }
  }

  ++frameCount;
}

init();
animate();