Threejs - project to convex 2d shape

by black strings

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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/geometries/ConvexGeometry.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/math/ConvexHull.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var controls;

var mesh;

var mesh3D;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  
  mesh3D = new THREE.Mesh();
  
  mesh3D.rotation.x = -Math.PI / 2;
  
  scene.add(mesh3D);

  var gridXZ = new THREE.GridHelper(1000, 100);
  mesh3D.add(gridXZ);
  gridXZ.rotation.x = -Math.PI / 2;


  var axes = new THREE.AxesHelper(1000);
  mesh3D.add(axes);

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

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

  var points = [new THREE.Vector3(17.150014877319336, 5.75600004196167, -0.28931498527526855),
    new THREE.Vector3(16.428333282470703, 5.75600004196167, -0.15000000596046448),
    new THREE.Vector3(16.428333282470703, 0.25600001215934753, -0.15000000596046448),
    new THREE.Vector3(16.428333282470703, 5.75600004196167, -0.15000000596046448),
    new THREE.Vector3(16.25003433227539, 0.25600001215934753, 0),
    new THREE.Vector3(16.428333282470703, 0.25600001215934753, -0.15000000596046448),
    new THREE.Vector3(0.1473349928855896, 5.75600004196167, -0.8790490031242371),
    new THREE.Vector3(0, 5.75600004196167, -1.1670000553131104),
    new THREE.Vector3(0, 0.25600001215934753, -1.1670000553131104),
    new THREE.Vector3(16.350034713745117, 0.25600001215934753, -7.369998931884766),
    new THREE.Vector3(16.193037033081055, 0, -8.000001907348633),
    new THREE.Vector3(16.193035125732422, 0.25600001215934753, -8.000001907348633),
    new THREE.Vector3(16.193035125732422, 0.25600001215934753, -8.000001907348633),
    new THREE.Vector3(16.193037033081055, 0, -8.000001907348633),
    new...