threepipe
Version:
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.
100 lines • 4.14 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Vector3 } from 'three';
import { Line2 } from 'three/examples/jsm/lines/Line2.js';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
import { onChange } from 'ts-browser-helpers';
import { ALightHelperWidget } from './ALightHelperWidget';
import { uiSlider } from 'uiconfig.js';
import { LineMaterial2 } from '../../core';
export class DirectionalLightHelper2 extends ALightHelperWidget {
constructor(light, size, color) {
super(light);
this.lineWidth = 5;
this.size = 0.5;
this._v1 = new Vector3();
this._v2 = new Vector3();
this._v3 = new Vector3();
this.color = color;
if (size !== undefined)
this.size = size;
let geometry = new LineGeometry();
this.material = new LineMaterial2({
color: 0xff0000,
linewidth: 5, // in world units with size attenuation, pixels otherwise
vertexColors: false,
worldUnits: false,
dashed: false,
alphaToCoverage: true,
toneMapped: false,
transparent: true,
depthTest: false,
depthWrite: false,
});
this.material.userData.renderToGBuffer = false;
this.material.userData.renderToDepth = false;
this.lightPlane = new Line2(geometry, this.material);
this.add(this.lightPlane);
geometry = new LineGeometry();
geometry.setPositions([0, 0, 0, 0, 0, 1]);
this.targetLine = new Line2(geometry, this.material);
this.add(this.targetLine);
this.update();
this.traverse(o => {
o.userData.__keepShadowDef = true;
o.castShadow = false;
o.receiveShadow = false;
});
}
dispose() {
this.lightPlane.geometry.dispose();
this.lightPlane.material.dispose();
this.targetLine.geometry.dispose();
this.targetLine.material.dispose();
super.dispose();
}
update() {
if (!this.light || !this.lightPlane)
return;
this._v1.setFromMatrixPosition(this.light.matrixWorld);
this._v2.setFromMatrixPosition(this.light.target.matrixWorld);
this._v3.subVectors(this._v2, this._v1);
this.lightPlane.geometry.setPositions([
-this.size, this.size, 0,
this.size, this.size, 0,
this.size, -this.size, 0,
-this.size, -this.size, 0,
-this.size, this.size, 0,
]);
this.lightPlane.lookAt(this._v2);
this.lightPlane.material = this.material;
this.targetLine.material = this.material;
this.material.color.set(this.color ?? this.light.color);
this.material.linewidth = this.lineWidth;
this.targetLine.lookAt(this._v2);
this.targetLine.scale.z = this.light.intensity / 3.;
super.update();
}
static Check(light) {
return light.isDirectionalLight;
}
static Create(light) {
return new DirectionalLightHelper2(light);
}
}
__decorate([
onChange(DirectionalLightHelper2.prototype.update)
], DirectionalLightHelper2.prototype, "material", void 0);
__decorate([
onChange(DirectionalLightHelper2.prototype.update),
uiSlider(undefined, [0.1, 20], 0.01)
], DirectionalLightHelper2.prototype, "lineWidth", void 0);
__decorate([
onChange(DirectionalLightHelper2.prototype.update),
uiSlider(undefined, [0.01, 10], 0.01)
], DirectionalLightHelper2.prototype, "size", void 0);
//# sourceMappingURL=DirectionalLightHelper2.js.map