three.js dev template - module

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://unpkg.com/three@0.155/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.155/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';

// boilerplate
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();

// sphere object
const geometry = new THREE.SphereGeometry();
const sphereMaterial = new THREE.MeshLambertMaterial({
  color: 0xFFFFFF,
});
const sphere = new THREE.Mesh(geometry, sphereMaterial);
scene.add(sphere);

// light
const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

// raycasting
const mousePosition = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
window.addEventListener("mousemove", (event) => {
  
  const rect = renderer.domElement.getBoundingClientRect();
  mousePosition.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
  mousePosition.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

  raycaster.setFromCamera(mousePosition, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  console.log(intersects);

  for (let i = 0; i < intersects.length; i++) {
    if (intersects[i].object === sphere) {
      intersects[i].object.material.color.set("red");
    }
  }
});

// animations
let step = 0;

const animate = (time) => {
  step += 0.01;
  sphere.position.y = 4 * Math.abs(Math.sin(step + 1));

  renderer.render(scene, camera);
};

// camera
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(5, 5, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

renderer.setAnimationLoop(animate);