Three.js simple rotating cube tutorial

by kirill321592

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

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 THREE.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( scene.children );

	if (intersects.length > 0) {
			if (intersected != intersects[0].object) {
				if (intersected) {
					highlightFace(new THREE.Color('white'));
				}
				intersected = intersects[0];
				highlightFace(new...