JSFiddle - React, Tailwind, and code Playground

by kirill321592

HTML

<style>
  body, html {
    margin: 0;
    padding: 0;
  }
</style>

JavaScript

import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";
import { LineSegments2 } from "https://unpkg.com/[email protected]/examples/jsm/lines/LineSegments2?module";
import { LineSegmentsGeometry } from "https://unpkg.com/[email protected]/examples/jsm/lines/LineSegmentsGeometry?module";
import { LineMaterial } from "https://unpkg.com/[email protected]/examples/jsm/lines/LineMaterial?module";
import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls?module";

let raycaster, intersected;
const scene = new THREE.Scene();
const mouse = new THREE.Vector2();
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  300
);
camera.position.set(2, 5, 3);

raycaster = new THREE.Raycaster();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
  color: new THREE.Color("white")
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// create with fat lines geometry with instanced color attribute
const edgesGeometry = new LineSegmentsGeometry().fromEdgesGeometry(
  new THREE.EdgesGeometry(mesh.geometry, 40)
);
const colors = [];
for (let i = 0; i < edgesGeometry.attributes.instanceStart.count; i++) {
  colors.push(0, 0, 0, 0, 0, 0);
}
edgesGeometry.setColors(colors);

// create a fat line material with white color so the vertex colors show
const edgesMaterial = new LineMaterial({
  color: "white",
  vertexColors: true,
  linewidth: 5
});
const line = new LineSegments2(edgesGeometry, edgesMaterial);

mesh.add(line);

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.addEventListener("mousemove", onPointerMove, false);

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

const setLineColor = (color) => {
  const { faceIndex, object } = intersected;

 ...