threepipe: edit the picked object

Click a part of the model: the panel shows the config of that object and its material. A function in children reads the selection on each refresh.

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-picking.js

import {
    Color,
    PickingPlugin,
    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

viewer.setEnvironmentMap(
    'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr',
)
viewer.load(
    'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
    {autoCenter: true, autoScale: true},
)

const picking = viewer.addPluginSync(PickingPlugin)
const selection = {
    type: 'folder',
    label: 'Selected object',
    expanded: true,
    children: [
        // runs on each refresh: the configs of the picked object
        () => {
            const object = picking.getSelectedObject()
            if (!object) return [{type: 'button', label: 'Click the model', disabled: true}]
            return [object.uiConfig, object.material?.uiConfig]
        },
    ],
}
picking.addEventListener('selectedObjectChanged', () => selection.uiRefresh(true))

ui.appendChild(selection)