JSFiddle - React, Tailwind, and code Playground

by kirill321592

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(20);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

const getPointInBetweenByLen = (pointA, pointB, length) => {
	const dir = pointB.clone().sub(pointA).normalize().multiplyScalar(length);

	return pointA.clone().add(dir);
};

const coordinates = [
    {
        "x": -1,
        "y": -7.2,
        "z": 6.3
    },
    {
        "x": 3.4,
        "y": 7.9,
        "z": 4.7
    },
    {
        "x": 6.5,
        "y": -2.6,
        "z": -6.8
    },
    {
        "x": -8.7,
        "y": 2.15,
        "z": -4.2
    }
];
	// points helper
	const g = new THREE.SphereGeometry(0.2);
	const m = new THREE.MeshBasicMaterial({ color: 0xffff00 });
	const sphere = new THREE.Mesh(g, m);
	sphere.position.copy(coordinates[0]);
	const sphere2 = sphere.clone();
	sphere2.position.copy(coordinates[1]);
	const sphere3 = sphere.clone();
	sphere3.position.copy(coordinates[2]);
	const spehre4 = sphere.clone();
	spehre4.position.copy(coordinates[3]);
  scene.add(sphere);
	scene.add(sphere2);
	scene.add(sphere3);
	scene.add(spehre4);  
  
  // plane helper
  const plane = new THREE.Plane();
	const helper = new THREE.PlaneHelper(plane, 10, 0x00fff);
  scene.add(helper);
 
  const points = coordinates.map(el => new THREE.Vector3().add(el));
  const box = new THREE.Box3();
	box.setFromPoints(points);
	const center = new THREE.Vector3();
	box.getCenter(center);
  
  // mesh
 	const geometry = new THREE.TetrahedronGeometry(10, 0);
	const material = new THREE.MeshBasicMaterial({ color: 'white' });
	const mesh = new THREE.Mesh(geometry, material);
  const edge = points[0].distanceTo(points[2]);
  const point = getPointInBetweenByLen(points[0], points[2], edge / 2);
 ...