threepipe/src/three/widgets/BoxSelectionWidget.ts

A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.

import {LineMaterial2} from '../../core/material/LineMaterial2'
import {Vector2} from 'three'
import {LineSegmentsGeometry} from 'three/examples/jsm/lines/LineSegmentsGeometry.js'
import {LineSegments2} from 'three/examples/jsm/lines/LineSegments2.js'
import {Box3B} from '../math/Box3B'
import {SelectionWidget} from './SelectionWidget'

export class BoxSelectionWidget extends SelectionWidget {
    constructor() {
        super()
        const matLine = new LineMaterial2({
            color: '#ff2222' as any, transparent: true, opacity: 0.9,
            linewidth: 5, // in pixels
            resolution: new Vector2(1024, 1024), // to be set by renderer, eventually
            worldUnits: false,
            dashed: false,
            toneMapped: false,
            depthTest: true,
            depthWrite: false,

            allowOverride: false,
        })
        matLine.userData.renderToGBuffer = false
        matLine.userData.renderToDepth = false
        this.lineMaterial = matLine

        const ls = new LineSegmentsGeometry()
        ls.setPositions([1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1].map(v => v - 0.5))

        const wireframe = new LineSegments2(ls, matLine as any)
        wireframe.computeLineDistances()
        wireframe.scale.set(1, 1, 1)
        wireframe.visible = true
        this.add(wireframe)
    }

    protected _updater() {
        super._updater()
        const selected = this.object
        if (selected) {
            const bbox = new Box3B().expandByObject(selected, false)
            const scale = bbox.getSize(this.scale)
            if (scale.lengthSq() <= 0) { // It could be a light or camera with no geometry
                selected.getWorldPosition(this.position)
                scale.set(2, 2, 2)
            }
            scale.multiplyScalar(this.boundingScaleMultiplier).clampScalar(0.01, 1e8)
            this.setVisible(true)
        }
    }
}