JSFiddle - React, Tailwind, and code Playground

by kirill321592

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.75,
  side: THREE.DoubleSide
}));
plane.position.y = -3.14;
plane.rotation.x = Math.PI / 5;
scene.add(plane);

var objGeom = new THREE.BoxGeometry(10, 10, 10);
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);

var pointsOfIntersection = 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();

function drawIntersectionPoints() {
  var mathPlane = new THREE.Plane();
  plane.localToWorld(planePointA.copy(plane.geometry.vertices[plane.geometry.faces[0].a]));
  plane.localToWorld(planePointB.copy(plane.geometry.vertices[plane.geometry.faces[0].b]));
  plane.localToWorld(planePointC.copy(plane.geometry.vertices[plane.geometry.faces[0].c]));
  mathPlane.setFromCoplanarPoints(planePointA, planePointB, planePointC);
	console.log(obj.geometry.faces)
  obj.geometry.faces.forEach(function(face) {
   ...