misc

controls / trackball

What this shows

Rotate, zoom, and pan TrackballControls through a fogged cloud of 500 instanced cones, with a switch between perspective and orthographic cameras.

Side by side with the three.js r186 original: misc_controls_trackball.html

Differences from three.js

MeshPhongMaterial becomes LambertMaterial with flat shading, so the cones have no specular highlights.
EASEL FogExp2 evaluates fog per vertex from a lookup table, so the fog fades across each face instead of per pixel.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const orthographicCamera = new EASEL.OrthographicCamera({
  left: (frustumSize * aspect) / -2,
  right: (frustumSize * aspect) / 2,
  top: frustumSize / 2,
  bottom: frustumSize / -2,
  near: 1,
  far: 1000,
});

const controls = new EASEL.TrackballControls(perspectiveCamera, canvas);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

function animate() {

  controls.update();
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
}