misc

exporter / obj

What this shows

Switch between a triangle, primitives, transformed objects, and a point cloud, then serialize the scene to Wavefront OBJ text with OBJExporter.

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

Differences from three.js

The lil-gui buttons become two select controls: Geometry picks the scene, and switching Export to Export OBJ runs the exporter once.
The export is not downloaded as object.obj; both sides log the exported text length with console.info instead, because the example contract gives the module only a canvas and no place for a status element.
EASEL OBJExporter serializes only meshes, so the Point Cloud export has no vertex or p lines, where three.js writes the four colored points.
EASEL OBJExporter writes its own header and comments (for example easel-material-color), so the text differs from the three.js exporter output.
EASEL Points with vertexColors averages the colors of each run of three points, so the first three points of the Point Cloud draw in one brown color instead of red, red, and green.
EASEL PointsMaterial.size is a fixed pixel radius, so the 10 unit points draw larger on screen and keep their pixel size at every zoom level.
EASEL bakes Lambert lighting per vertex (Gouraud), so the lit faces show interpolated shading instead of per-pixel lighting.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const geometry = new EASEL.Geometry();
geometry.setAttribute("position", new EASEL.Attribute(new Float32Array(vertices), 3));
geometry.computeVertexNormals();

scene.add(new EASEL.Mesh(geometry, new EASEL.LambertMaterial({ color: 0x00cc00 })));

const exporter = new EASEL.OBJExporter();
const result = exporter.parse(scene);
console.info(`object.obj: ${result.length} characters`);