Stylecr3dtor

Stylecreator 3d: core library, viewer and builder

Installation

``bash
npm install @ridestore/stylecr3dtor
`

Note: Three.js is now bundled and code-split within the package. You don't need to install it separately.

Features

- Easy configuration-based 3D model loading
- Material management and assignment
- Environment and lighting setup
- Automatic camera and controls setup
- Scene management utilities
- Fully code-split and tree-shakable - optimal parallel loading
- Bundled Three.js - no additional dependencies required
- Parallel loading - all chunks load simultaneously for best performance

Usage

$3

`javascript
import { App } from "@ridestore/stylecr3dtor";

// All modules and Three.js chunks load in parallel automatically
const { scene, camera, controls } = await App.init({
scene: {
background: 0x000000,
},
camera: {
position: { x: 5, y: 2, z: 5 },
},
environment: {
url: "path/to/environment.hdr",
},
materials: {
default: {
type: "MeshStandardMaterial",
color: "#ffffff",
maps: {
// Texture maps: map, normal, roughness, metalness, etc.
},
},
},
models: {
myModel: {
url: "path/to/model.glb",
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
scale: { x: 1, y: 1, z: 1 },
},
},
meshes: {
meshName: {
material: "default",
visible: true,
},
},
});
`

$3

`javascript
import { Loader } from "@ridestore/stylecr3dtor";

// Load only core modules
const { Environment, Materials, Models, Scenes } = await Loader.loadCore();

// Or load specific modules
const { Animations } = await Loader.loadModule("Animations");

// Or load all modules
const allModules = await Loader.loadAll();

// Preload modules for better performance (non-blocking)
Loader.preload(["Environment", "Models"]);
`

$3

Import only what you need:

`javascript
// Import only specific components (static)
import { EnvironmentStatic as Environment } from "@ridestore/stylecr3dtor";
import { ModelsStatic as Models } from "@ridestore/stylecr3dtor";
import { MaterialsStatic as Materials } from "@ridestore/stylecr3dtor";

// Import types
import { AppConfig, ModelData } from "@ridestore/stylecr3dtor";
`

Code Splitting Benefits

This package automatically splits Three.js and application code into optimal chunks:

- Three.js chunks: Core, Materials, Geometries, Lights, Cameras, Renderers, etc.
- Loader chunks: GLTF, DRACO, RGBE, Texture loaders, etc.
- Controls chunks: OrbitControls and other control systems
- App chunks: Environment, Models, Materials, Textures, Animations, etc.

All chunks load in parallel when using App.init()`, providing optimal loading performance.

Browser Compatibility

- Modern browsers (Chrome, Firefox, Safari, Edge)
- ES Modules support required
- Dynamic imports support required

License

MIT