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>
<script src="https://threejs.org/examples/jsm/lines/LineMaterial.js"></script>
<script src="https://threejs.org/examples/jsm/lines/LineSegmentsGeometry.js"></script>
<script>
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);

const edgesGeometry = new THREE.EdgesGeometry(mesh.geometry, 40)
/* const edgesGeometry = new LineSegmentsGeometry().fromEdgesGeometry(
  new THREE.EdgesGeometry(mesh.geometry, 40),
); */
const colors = [];
for (let i = 0; i < edgesGeometry.attributes.position.count; i++) {
  colors.push(0, 0, 0);
}
edgesGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
/* const edgesMaterial = new THREE.LineBasicMaterial({
  vertexColors: true,
}); */
const edgesMaterial = new LineMaterial({
			color: 'black',
			// /vertexColors: true,
			linewidth: 0.001,
		});
const line = new THREE.LineSegments(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 THREE.OrbitControls(camera, renderer.domElement);

const setLineColor = color => {
  const {
    index,
    object
  } = intersected;
  object.geometry.attributes.color.setXYZ(index, color.r, color.g, color.b);
 ...

CSS

body {
  margin: 0;
  overflow: hidden;
}