JSFiddle - React, Tailwind, and code Playground

by kirill321592

CSS

body {
	  margin: 0;
}
canvas {
	display: block;
}

JavaScript

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
console.log(OrbitControls)
let camera, scene, renderer, raycaster, intersected;

const mouse = new THREE.Vector2();

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 3;

  scene = new THREE.Scene();
	
	raycaster = new THREE.Raycaster();

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial( { vertexColors: true } );

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

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
	
	var controls = new OrbitControls( camera, renderer.domElement );
	

  document.addEventListener('mousemove', onPointerMove, false);
  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

const highlightFace = color => {
alert(JSON.stringify(intersected.object.geometry))
		const { face } = intersected;
		const colorAttribute = intersected.object.geometry.getAttribute('color');
		colorAttribute.setXYZ(face.a, color.r, color.g, color.b);
		colorAttribute.setXYZ(face.b, color.r, color.g, color.b);
		colorAttribute.setXYZ(face.c, color.r, color.g, color.b);

		colorAttribute.needsUpdate = true;
    
	};


function onPointerMove(event) {

  event.preventDefault();

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
	
	raycaster.setFromCamera( mouse, camera );

	const intersects = raycaster.intersectObjects(...