Orbit Controls

import * as EASEL from "easel";

const camera = new EASEL.PerspectiveCamera({
  fov: 45,
  aspect: width / height,
});
camera.position.set(4, 3, 6);

const renderer = new EASEL.Renderer({ canvas, width, height });

const controls = new EASEL.OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.dampingFactor = 0.12;

const sphere = new EASEL.Mesh(
  new EASEL.SphereGeometry(1, 20, 14),
  new EASEL.LambertMaterial({ color: 0x44aa88 }),
);
scene.add(sphere);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const camera = new THREE.PerspectiveCamera(
  45, width / height, 0.1, 100,
);
camera.position.set(4, 3, 6);

const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(width, height);

const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.dampingFactor = 0.12;

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 20, 14),
  new THREE.MeshLambertMaterial({ color: 0x44aa88 }),
);
scene.add(sphere);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();