Bring a Meshsmiths snapshot into React Three Fiber

Use a local snapshot for the first integration

React Three Fiber lets you describe a three.js scene with React components, but it does not remove the need to understand the object you import. Start with a single original Meshsmiths prop, such as Quench barrel or Workshop lantern, rather than a full kit. Inspect the live record, access and selected delivery status first. Tune only supported knobs, then open the Use it panel. This walkthrough follows its React Three Fiber recipe for the downloaded ES module, not an imagined hosted factory endpoint.

Save the exported module beside your component and preserve the filename the panel provides. The module reconstructs a static snapshot of the current preview: knob settings and visible parts are baked into the object. It is not an animated rig or a live connection to the catalogue. Keep a separate note with the piece ID and knob values. If you later want another shape, change the source preview and export another snapshot instead of assuming that the local function accepts the catalogue's original parameters.

Mount the object inside Canvas

The panel's component uses useMemo to create the object once for that mounted component and renders it with a primitive. Place that component inside your existing React Three Fiber Canvas. Canvas establishes the renderer context; rendering a three.js primitive as ordinary page markup will not create a scene. Add a camera and simple lighting through your application's usual scene setup, then position the object so you can inspect it. Keep the first integration small enough that an empty view has only a few possible causes.

Use the downloaded filename rather than copying a filename from someone else's project. The example below assumes a default barrel snapshot named quench-barrel.mjs. In a strict TypeScript application, provide an accurate declaration for that local module if your compiler cannot infer its export. The default function returns a three.js Object3D. Do not silence an import error with any or a broad cast. Missing types are an integration task to solve explicitly, not evidence that the downloaded object has been validated.

The dispose setting in the source snippet prevents automatic disposal through that primitive. Treat it as a lifecycle decision, not a memory-management guarantee. If your application owns the snapshot's resources, decide when its geometry and materials should be disposed as views are replaced. Do not dispose resources still used by another instance. Also avoid adding the same Object3D instance to two parents: create a separate object for each mounted prop, or deliberately implement a sharing strategy that understands three.js ownership.

import { useMemo } from "react";
import createPiece from "./quench-barrel.mjs";

export function Piece() {
  const object = useMemo(() => createPiece(), []);
  return <primitive object={object} dispose={null} />;
}

Check the object against the real scene

Use a metre reference when evaluating scale. Meshsmiths works in metres, with Y-up and positive Z forward. The source footprint is centred in X and Z and rests on Y zero, so start with an uncomplicated floor plane and inspect ground contact. A prop that looks attractive in the catalogue can still be too small for your chosen camera. Make the camera, player dimensions and placement transform explicit before deciding to alter the model. Keep those transforms separate from the baked knob values.

Compare the material response under your own renderer settings. Exposure, environment light, tone mapping and shadows can change the appearance without changing the exported palette. Preserve named materials and begin with predictable lighting before adding effects. Count every instance when estimating triangles, and measure performance at the density your scene requires. A barrel rendered once in an otherwise empty Canvas is a useful smoke test, but it does not prove that a courtyard filled with props will meet your mobile frame budget.

Know which loading path you are using

The GLB tab is a separate path. It saves the current object as a binary scene after a GLTFLoader reload check; the three.js snippet then loads that local file. The CDN JavaScript module is different again: its documented load function loads GLB bytes and needs the appropriate three.js loader resolution. Do not mix these contracts. A local snapshot's default createPiece import is not interchangeable with a CDN loader call. Choose one path for the first test and record which dependency versions and files it uses.

Report a browser result as a browser result

Existing proof checked specific barrel and lantern GLB samples through GLTFLoader and matched their exported triangle counts. It did not certify every React Three Fiber application or every catalogue variant. Test your mounted component, loading errors, unmount behaviour and actual target browser before recording a pass. Unity tooling remains untested here, and Godot instructions are recipes rather than checked engine results. The distinction matters even when the same binary is used, because importers and runtime behaviour differ.

For an agent-assisted handoff, read prompt.txt and include the actual origin, selected IDs, knobs, placement transforms and measured budget. The preview_scene tool supplies compatibility information, not a rendered R3F scene. Do not expose an entitlement key in client-side public code or a shared prompt. Finish with a screenshot of your own browser scene and a short list of open questions. A reproducible single-prop integration is a better foundation than a large assembly whose loading path and resource ownership are unclear.