@pmndrs/uikit
Version:
Build performant 3D user interfaces with Three.js and yoga.
46 lines (45 loc) • 2.42 kB
JavaScript
import { computed } from '@preact/signals-core';
import { createGlobalClippingPlanes } from '../clipping.js';
import { setupOrderInfo, ElementType, setupRenderOrder } from '../order.js';
import { abortableEffect, setupMatrixWorldUpdate } from '../utils.js';
import { Component } from './component.js';
import { MeshDepthMaterial, MeshDistanceMaterial } from 'three';
export class Custom extends Component {
constructor(inputProperties, initialClasses, config) {
super(inputProperties, initialClasses, { hasNonUikitChildren: false, ...config });
setupOrderInfo(this.orderInfo, this.properties, 'zIndex', ElementType.Custom, undefined, computed(() => (this.parentContainer.value == null ? null : this.parentContainer.value.orderInfo.value)), this.abortSignal);
this.frustumCulled = false;
setupRenderOrder(this, this.root, this.orderInfo);
const clippingPlanes = createGlobalClippingPlanes(this);
this.customDepthMaterial = new MeshDepthMaterial();
this.customDistanceMaterial = new MeshDistanceMaterial();
this.material.clippingPlanes = clippingPlanes;
this.customDepthMaterial.clippingPlanes = clippingPlanes;
this.customDistanceMaterial.clippingPlanes = clippingPlanes;
abortableEffect(() => {
this.material.depthTest = this.properties.value.depthTest;
this.root.peek().requestRender?.();
}, this.abortSignal);
abortableEffect(() => {
this.material.depthWrite = this.properties.value.depthWrite ?? false;
this.root.peek().requestRender?.();
}, this.abortSignal);
abortableEffect(() => {
this.renderOrder = this.properties.value.renderOrder;
this.root.peek().requestRender?.();
}, this.abortSignal);
abortableEffect(() => {
this.castShadow = this.properties.value.castShadow;
this.root.peek().requestRender?.();
}, this.abortSignal);
abortableEffect(() => {
this.receiveShadow = this.properties.value.receiveShadow;
this.root.peek().requestRender?.();
}, this.abortSignal);
setupMatrixWorldUpdate(this, this.root, this.globalPanelMatrix, this.abortSignal);
abortableEffect(() => {
this.visible = this.isVisible.value;
this.root.peek().requestRender?.();
}, this.abortSignal);
}
}