awv3/plugins/shader/index.js

⚡ AWV3 embedded CAD

import Plugin from '../../session/plugin'
import { Slider, Group } from '../../session/elements'
import debounce from 'lodash/debounce'

const props = [
    'opacity',
    'reflectivity',
    'metalness',
    'roughness',
    'clearCoat',
    'clearCoatRoughness',
    'envMapIntensity',
]

const resources = ['isometric'].reduce(
    (prev, item) => ({ ...prev, [item]: require('!!url-loader!awv3-icons/32x32/' + item + '.png') }),
    {},
)

export default class ShaderProps extends Plugin {
    constructor(session, args) {
        super(session, { type: 'ShaderProps', icon: 'isometric', resources, ...args })

        let defaults = this.session.options.meshShaderOptions

        this.addElement(
            new Group(this, {
                format: Group.Format.Table,
                children: props.map(
                    name =>
                        (this[name] = new Slider(this, {
                            name,
                            value: defaults[name] || 0,
                            max: 1,
                            step: 0.01,
                            positions: { 0: '0', 1: '1' },
                        })),
                ),
            }),
        )
    }

    update = debounce(() => this.session.pool.updateMaterials(), 500, { leading: true, trailing: false })

    onEnabled() {
        this.resetElements()
        this.session.pool.updateMaterials()
        props.forEach(name => {
            this[name].observe(
                state => state.value,
                value => {
                    this.update()
                    this.session.pool
                        .animate({
                            materials: {
                                meshes: [{ [name]: value }],
                            },
                        })
                        .start(0)
                },
            )
        })
    }
}