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/loaders/STLLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var objs = [];

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(150);
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);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var marker = new THREE.Mesh(new THREE.SphereBufferGeometry(0.25, 4, 2), new THREE.MeshBasicMaterial({
  color: 0xFFc8FF
}));
marker.position.setScalar(1000);
scene.add(marker);

var loader = new THREE.STLLoader();
loader.load('https://cywarr.github.io/small-shop/file5.stl', function(geometry) {
	console.log(geometry);
  var material = new THREE.MeshLambertMaterial({
    color: "gray"
  });
  var mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.set(0, Math.PI, 0);
  mesh.scale.setScalar(10);
  scene.add(mesh);
  objs.push(mesh);
  
  var wireframe = new THREE.LineSegments(new THREE.WireframeGeometry(geometry), new THREE.LineBasicMaterial({color: "aqua"}));
  mesh.add(wireframe);
  
  var box = new THREE.Box3().setFromObject(mesh);
  mesh.position.sub(box.getCenter());

  var size = new THREE.Vector3();
  box.getSize(size);
  var max = Math.max(size.x, Math.max(size.y, size.z));
  var markerScale = max * 0.05;
  marker.scale.setScalar(markerScale);
});



var intscs = [];
var rc = new THREE.Raycaster();
var m = new THREE.Vector2();
var poi = new THREE.Vector3();
var pos = new THREE.Vector3();
var tp = [
  new THREE.Vector3(),
  new THREE.Vector3(),
  new THREE.Vector3()
];
var tri = new THREE.Triangle();
var bc = new THREE.Vector3();
var idx = 0;

renderer.domElement.addEventListener("mousemove", onMouseMove);

function onMouseMove(event) {
  m.x = (event.clientX / window.innerWidth) * 2 - 1;
  m.y =...