JSFiddle - React, Tailwind, and code Playground
HTML
<button id="pressMe" style="position: absolute">PressMe</button>
<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 roundVector = (digits, vector) => {
if (!vector) {
return null;
}
const e = Math.pow(10, digits || 0);
vector.x = Math.round(vector.x * e) / e;
vector.y = Math.round(vector.y * e) / e;
vector.z = Math.round(vector.z * e) / e;
return vector;
};
const setPointOfIntersection = (line, plane) => {
const pointOfIntersection = plane.intersectLine(
line,
new THREE.Vector3()
);
const rounded = roundVector(2, pointOfIntersection);
if (rounded && !pointsOfIntersection.some((el) => rounded.equals(el))) {
pointsOfIntersection.push(pointOfIntersection.clone());
}
};
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);
const objGeom = new THREE.DodecahedronGeometry(10);
const obj = new THREE.Mesh(
objGeom,
new THREE.MeshBasicMaterial({
color: "white",
wireframe: true,
})
);
obj.position.set(0, 0, 0);
scene.add(obj);
const pointsOfIntersection = [];
var a = new THREE.Vector3(),
b = new THREE.Vector3(),
c = new THREE.Vector3();
var lineAB = new THREE.Line3(),
lineBC = new THREE.Line3(),
lineCA = new THREE.Line3();
const drawIntersectionPoints = () => {
const mathPlane = new THREE.Plane();
mathPlane.setFromCoplanarPoints(
new THREE.Vector3(-18, 1.8, -27),
new THREE.Vector3(-18, 1.8, 20),
new THREE.Vector3(10, 1.8,...