JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

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.setScalar(10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var plane = new THREE.Mesh(new THREE.BoxBufferGeometry(10, 10, 1).toNonIndexed(), new THREE.MeshNormalMaterial({
  wireframe: true,
  side: THREE.DoubleSide
}));
scene.add(plane);

var minDist = 0.6;

var raycaster = new THREE.Raycaster();
var intersects = [];

var pos = plane.geometry.attributes.position;

var ori = new THREE.Vector3();
var dir = new THREE.Vector3();
var trc = new THREE.Vector3();
var a = new THREE.Vector3(),
  b = new THREE.Vector3(),
  c = new THREE.Vector3(),
  midPoint = new THREE.Vector3(),
  tri = new THREE.Triangle();
var closest = new THREE.Vector3();

var faces = pos.count / 3;
for (let i = 0; i < faces; i++) {
  a.fromBufferAttribute(pos, i * 3 + 0);
  b.fromBufferAttribute(pos, i * 3 + 1);
  c.fromBufferAttribute(pos, i * 3 + 2);
  tri.set(a,b,c);
  tri.getMidpoint(ori);
  tri.getNormal(dir)
  raycaster.set(ori, dir.negate());
  intersects = raycaster.intersectObject(plane);

  minDist = Math.min(minDist, intersects[1].distance);

}

console.log("printable:", minDist >= 0.6);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});