JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="pressMe" style="position: absolute;">
  PressMe
</button>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 50);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AxisHelper(2));

var planeGeom = new THREE.PlaneGeometry(30, 30);
planeGeom.rotateX(-Math.PI / 2);
var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
  color: "lightgray",
  transparent: true,
  opacity: 0.35,
  side: THREE.DoubleSide
}));
plane.position.y = -3.14;
plane.rotation.x = Math.PI / 5;
scene.add(plane);

var planeGeom1 = new THREE.PlaneGeometry(70, 70);
//planeGeom.rotateX(-Math.PI / 2);
var bottomPlane = new THREE.Mesh(planeGeom1, new THREE.MeshBasicMaterial({
  color: 0xc0c0c0,
  transparent: true,
  opacity: 0.35,
  side: THREE.DoubleSide
}));
bottomPlane.position.y = -15;
bottomPlane.rotation.x = Math.PI / 2;
scene.add(bottomPlane);

var objGeom = new THREE.DodecahedronGeometry(10, 0);
var obj = new THREE.Mesh(objGeom, new THREE.MeshBasicMaterial({
  color: "green",
  wireframe: true
}));
obj.rotation.z = Math.PI / 10;
obj.position.set(0, 3.14, 0);
scene.add(obj);

pressMe.addEventListener("click", drawIntersectionPoints, false);

setInterval(function(){
obj.position.x -= 2
//drawIntersectionPoints()
}, 3000)

var pointsOfIntersection = new THREE.Geometry();
var projectionGeom = new THREE.Geometry();

var a = new THREE.Vector3(),
  b = new THREE.Vector3(),
  c = new THREE.Vector3();
var planePointA = new THREE.Vector3(),
  planePointB = new THREE.Vector3(),
  planePointC = new THREE.Vector3();
var lineAB = new THREE.Line3(),
  lineBC = new THREE.Line3(),
  lineCA = new THREE.Line3();

var pointOfIntersection = new THREE.Vector3();

var projectionPlaneNormal = new THREE.Vector3(0, 1, 0);

function getProjectMatrix(n) {
 ...