playcanvas/build/playcanvas/src/extras/gizmo/mesh-line.js

PlayCanvas WebGL game engine

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 {
		constructor(app, layer, args = {}){
				this._thickness = 0.02;
				this._material = new ShaderMaterial(unlitShader);
				this.entity = new Entity('mesh-line');
				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 };