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);
                },
            );
        });
    }
}