playcanvas
Version:
Open-source WebGL/WebGPU 3D engine for the web
52 lines (51 loc) • 1.94 kB
JavaScript
import { math } from "../../core/math/math.js";
import { Vec3 } from "../../core/math/vec3.js";
import { Entity } from "../../framework/entity.js";
import { BlendState } from "../../platform/graphics/blend-state.js";
import { CylinderGeometry } from "../../scene/geometry/cylinder-geometry.js";
import { ShaderMaterial } from "../../scene/materials/shader-material.js";
import { MeshInstance } from "../../scene/mesh-instance.js";
import { Mesh } from "../../scene/mesh.js";
import { unlitShader } from "./shaders.js";
const tmpV1 = new Vec3();
class MeshLine {
_thickness = 0.02;
_material = new ShaderMaterial(unlitShader);
entity = new Entity("mesh-line");
constructor(app, layer, args = {}) {
this._thickness = args.thickness ?? this._thickness;
this._material.blendState = BlendState.ALPHABLEND;
this._material.setDefine("DEPTH_WRITE", "1");
this._material.setParameter("uDepth", 0);
this._material.update();
const mesh = Mesh.fromGeometry(app.graphicsDevice, new CylinderGeometry());
const meshInstance = new MeshInstance(mesh, this._material);
this.entity.addComponent("render", {
meshInstances: [meshInstance],
layers: [layer.id]
});
}
set thickness(value) {
this._thickness = value ?? this._thickness;
}
get thickness() {
return this._thickness;
}
draw(from, to, scale, color) {
this._material.setParameter("uColor", color.toArray());
const dir = tmpV1.sub2(to, from).normalize();
const elev = Math.atan2(-dir.y, Math.sqrt(dir.x * dir.x + dir.z * dir.z)) * math.RAD_TO_DEG;
const azim = Math.atan2(-dir.x, -dir.z) * math.RAD_TO_DEG;
this.entity.setLocalEulerAngles(-elev + 90, azim, 0);
const length = from.distance(to) * scale;
this.entity.setLocalPosition(dir.mulScalar(0.5 * length).add(from));
this.entity.setLocalScale(this._thickness * scale, length, this._thickness * scale);
}
destroy() {
this._material.destroy();
this.entity.destroy();
}
}
export {
MeshLine
};