EASEL.js

canvas

loader / obj

What this shows

Parse a Wavefront OBJ model with OBJLoader, light it from the camera with a point light, and orbit it with damping.

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

Differences from three.js

  • Both sides load the CC0 Suzanne OBJ instead of the unlicensed male02 model, so there is no MTL file and no texture; the scale is 0.8 and position.y is 0 instead of 0.01 and -0.95 so Suzanne fills the view about as much as male02 does.
  • three.js falls back to a white MeshPhongMaterial when no MTL is set; EASEL has no Phong material and its OBJLoader falls back to an unlit BasicMaterial, so the port passes a white LambertMaterial for the Suzanne usemtl group through setMaterials and has no specular highlight.
  • Lighting is baked per vertex (Gouraud) instead of per pixel.
  • Edges are aliased because EASEL has no antialiasing.
EASEL (Canvas2D)
This example needs a canvas-capable browser.

Loading scene…

three.js r186 (WebGL)
This example needs a canvas-capable browser.

Loading scene…

Loading scene…

Key API excerpt

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


scene.add(new EASEL.AmbientLight(0xffffff, 1));
camera.add(new EASEL.PointLight(0xffffff, 15));

scene.add(camera);

const objLoader = new EASEL.OBJLoader();
objLoader.setMaterials({ Suzanne: new EASEL.LambertMaterial({ color: 0xffffff }) });
const object = objLoader.parse(suzanneText);
object.scale.setScalar(0.8);

scene.add(object);

const orbit = new EASEL.OrbitControls(camera, canvas);
orbit.enableDamping = true;
orbit.update();
renderer.prepare(scene, camera);
renderer.render(scene, camera);