threepipe viewer

threepipe gives its viewer, plugins, objects and materials a uiConfig. Append them to a renderer to get an editor. threepipe loads from threepipe.org.

Loading…

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css

// the element for the canvas
const view = document.getElementById('view')

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))

// the element for the canvas
const view = document.getElementById('view')

threepipe.js

import {
    Color,
    Texture,
    ThreeViewer,
    Vector2,
    Vector3,
    Vector4,
} from 'https://threepipe.org/dist/index.mjs'

const canvas = document.createElement('canvas')
view.append(canvas)
const viewer = new ThreeViewer({canvas})

ui.THREE = {Color, Vector2, Vector3, Vector4, Texture}
ui.fileLoader = viewer // for the file and image inputs of threepipe

// the viewer's own settings: renderer, scene, camera, plugins
viewer.uiConfig.children.forEach((child) => ui.appendChild(child))

const env = viewer.setEnvironmentMap(
    'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr',
)
const model = viewer.load(
    'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
    {autoCenter: true, autoScale: true},
)
Promise.all([env, model]).then(([, helmet]) => {
    // every object and material has a uiConfig too
    const mesh = helmet.getObjectByName('node_damagedHelmet_-6514')
    ui.appendChild(mesh.uiConfig)
})