three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.module.js"
		}
	}
</script>

CSS

body {
  margin: 0;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

let camera, scene, renderer, orbit, raycaster, points;
let pointIndex = -1;

const pointer = new THREE.Vector2();
const plane = new THREE.Plane();
const planeInterectionPoint = new THREE.Vector3();
plane.normal.set(0,0,1);

const style = document.body.style;
const pointSize = 0.5;
const pointMainColor = 1;
const pointHoverColor = [1, 0, 0];

init();
render();

function init() {

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x333333)
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 20;

  orbit = new OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();

  const geometry = simpleFourPointsGeometry();
  const material = new THREE.PointsMaterial({
    size: pointSize,
    sizeAttenuation: true,
    vertexColors: true,
  });

  points = new THREE.Points(geometry, material);
  scene.add(points);

  raycaster = new THREE.Raycaster();
  raycaster.params.Points = { threshold: pointSize };
  
  document.addEventListener("pointermove", hover);
  document.addEventListener("pointerdown", drag);
}

function hover(e) {
  const color = points.geometry.attributes.color;
  const array = color.array;

	updatePointer(e);
  const intersections = raycaster.intersectObjects([points], false);
  const intersection =
    intersections.length > 0 ? intersections[intersections.length - 1] : null;

  if (~pointIndex) {
    style.cursor = "";

    for (let i = 0, l = array.length; i < l; i++) array[i] = pointMainColor;

    pointIndex = -1;
    color.needsUpdate = true;
  }

  if (intersection) {
    style.cursor = "pointer";

    const index = intersection.index * 3;
    array[index] = pointHoverColor[0];
    array[index + 1] =...