Build a Simple Editor

Bootstrapping a simple editor with the Core3D is a straightforward process. We provide an implementation of basic move, rotate, and scale tools that you can plug into a scene with one or two lines of code.

Contents

• Step 1 — Set Up Your Scene
• Step 2 — Wire Up the Tools
• Step 3 — Going Further

Step 1 — Set Up Your Scene

We recommend following one of the create a graphic tee or create an all-over print tee guides to get a design and scene set up. Once you're rendering a design in the browser, move on to step two.

Step 2 — Wire Up the Tools

Adding tools to your scene is as simple as:

import { Tool } from '@core3d/sdk';
// ... const scene = await core3d.loadScene() (or similar)
const tool = new Tool({ scene });

You can set the tool mode with the setMode() method:

tool.setMode('move') // or "rotate", or "scale"

And that's it!

Note: The Tool class is what we're using in our homepage widget.

The UI for this is up to you. You might, for example:

• Add click handlers to buttons for each of the tools, use setMode() to switch between them.
• List resources or modifiers (via e.g. design.resources, design.modifiers) and allow users to select the one they want to tool to operate on.

As a next step, we recommend going through the Tool SDK reference to see what options are available to you. You can limit the tool to operate on specific modifiers, and more.

Step 3 — Going Further

The Tool class is a basic implementation of these tools meant to get you up and running quickly. If you need more complex interactions you can utilize the events emitted by a scene to wire up pointer interactions.