UNPKG

@needle-tools/engine

Version:

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

73 lines 2.73 kB
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 { Color, GridHelper as _GridHelper } from "three"; import * as params from "../engine/engine_default_parameters.js"; import { serializable } from "../engine/engine_serialization_decorator.js"; import { Behaviour } from "./Component.js"; /** * The [GridHelper](https://engine.needle.tools/docs/api/GridHelper) displays a flat grid in the scene for visual reference. * Useful for debugging, level design, or providing spatial context. * * ![](https://cloud.needle.tools/-/media/prWArU8xTbgBKWQOvhTOag.gif) * * **Properties:** * - `color0` / `color1` - Alternating grid line colors * - `isGizmo` - When true, only shows when gizmos are enabled * * @example Add a grid to the scene * ```ts * const grid = myObject.addComponent(GridHelper); * grid.color0 = new Color(0.3, 0.3, 0.3); * grid.color1 = new Color(0.5, 0.5, 0.5); * ``` * * @category Helpers * @group Components * @see {@link Gizmos} for debug visualization * * ![](https://cloud.needle.tools/-/media/i5KGKBUQ3iAX9h6o_9EY2w.jpg) */ export class GridHelper extends Behaviour { isGizmo = false; color0; color1; gridHelper; size; divisions; offset; /** @internal */ onEnable() { if (this.isGizmo && !params.showGizmos) return; const size = this.size; const divisions = this.divisions; if (!this.gridHelper) { this.gridHelper = new _GridHelper(size, divisions, this.color0 ?? new Color(.4, .4, .4), this.color1 ?? new Color(.6, .6, .6)); if (this.offset !== undefined) this.gridHelper.position.y += this.offset; } if (this.gridHelper) this.gameObject.add(this.gridHelper); } /** @internal */ onDisable() { if (this.gridHelper) { this.gameObject.remove(this.gridHelper); this.gridHelper = null; } } } __decorate([ serializable() ], GridHelper.prototype, "isGizmo", void 0); __decorate([ serializable(Color) ], GridHelper.prototype, "color0", void 0); __decorate([ serializable(Color) ], GridHelper.prototype, "color1", void 0); //# sourceMappingURL=GridHelper.js.map