ohzi-core 12.5.2 → 12.7.0

package/src/components/WorldImage.js

@@ -1,101 +1,101 @@
-// @ts-check
-// @ts-ignore
-import basic_texture_vert from '../shaders/basic_texture/basic_texture.vert';
-// @ts-ignore
-import basic_texture_frag from '../shaders/basic_texture/basic_texture.frag';
-
-import { Mesh, Texture } from 'three'; // eslint-disable-line no-unused-vars
-import { Vector2 } from 'three';
-import { ShaderMaterial } from 'three';
-import { DoubleSide } from 'three';
-import { PlaneGeometry } from 'three';
-import { Vector3 } from 'three';
-
-class WorldImage extends Mesh
-{
-  /**
-   * @param {Texture} texture
-   * @param {Vector2} [pivot]
-   */
-  constructor(texture, pivot)
-  {
-    pivot = pivot || new Vector2(0, 0);
-    const material = new ShaderMaterial({
-      uniforms: {
-        _MainTex: { value: texture },
-        _ScreenAligned: { value: 0 },
-        _Scale: { value: 1 },
-        _Opacity: { value: 1 }
-      },
-      vertexShader: basic_texture_vert,
-      fragmentShader: basic_texture_frag,
-      transparent: true,
-      depthWrite: false,
-      side: DoubleSide
-    });
-    const geometry = new PlaneGeometry(1, 1, 1);
-    geometry.translate(-pivot.x / 2, -pivot.y / 2, 0);
-    const current_scale = texture.image.width / texture.image.height;
-    geometry.scale(current_scale, 1, 1);
-    super(geometry, material);
-    this.current_scale = current_scale;
-    this.geometry.computeBoundingBox();
-
-    this.tmp_bb_size = new Vector3();
-    this.geometry.boundingBox.getSize(this.tmp_bb_size);
-    this.material = material;
-  }
-
-  update_texture()
-  {
-    this.material.uniforms._MainTex.value.needsUpdate = true;
-    const img = this.material.uniforms._MainTex.value.image;
-
-    this.geometry.scale(1 / this.current_scale, 1, 1);
-    this.current_scale = img.width / img.height;
-    this.geometry.scale(this.current_scale, 1, 1);
-    this.geometry.computeBoundingBox();
-    this.geometry.boundingBox.getSize(this.tmp_bb_size);
-  }
-
-  get size()
-  {
-    return this.tmp_bb_size.clone().multiplyScalar(this.scale.x);
-  }
-
-  set size(value)
-  {
-    this.scale.copy(value);
-    this.material.uniforms._Scale.value = value;
-  }
-
-  set screen_aligned(boolean)
-  {
-    this.material.uniforms._ScreenAligned.value = boolean === true ? 1 : 0;
-  }
-
-  get screen_aligned()
-  {
-    return this.material.uniforms._ScreenAligned.value === 1;
-  }
-
-  set opacity(opacity)
-  {
-    this.material.uniforms._Opacity.value = opacity;
-  }
-
-  get opacity()
-  {
-    return this.material.uniforms._Opacity.value;
-  }
-
-  dispose()
-  {
-    this.geometry.dispose();
-    this.parent.remove(this);
-    this.material.uniforms._MainTex.value.dispose();
-    this.material.dispose();
-  }
-}
-
-export { WorldImage };
+// @ts-check
+// @ts-ignore
+import basic_texture_vert from '../shaders/basic_texture/basic_texture.vert';
+// @ts-ignore
+import basic_texture_frag from '../shaders/basic_texture/basic_texture.frag';
+
+import { Mesh, Texture } from 'three'; // eslint-disable-line no-unused-vars
+import { Vector2 } from 'three';
+import { ShaderMaterial } from 'three';
+import { DoubleSide } from 'three';
+import { PlaneGeometry } from 'three';
+import { Vector3 } from 'three';
+
+class WorldImage extends Mesh
+{
+  /**
+   * @param {Texture} texture
+   * @param {Vector2} [pivot]
+   */
+  constructor(texture, pivot)
+  {
+    pivot = pivot || new Vector2(0, 0);
+    const material = new ShaderMaterial({
+      uniforms: {
+        _MainTex: { value: texture },
+        _ScreenAligned: { value: 0 },
+        _Scale: { value: 1 },
+        _Opacity: { value: 1 }
+      },
+      vertexShader: basic_texture_vert,
+      fragmentShader: basic_texture_frag,
+      transparent: true,
+      depthWrite: false,
+      side: DoubleSide
+    });
+    const geometry = new PlaneGeometry(1, 1, 1);
+    geometry.translate(-pivot.x / 2, -pivot.y / 2, 0);
+    const current_scale = texture.image.width / texture.image.height;
+    geometry.scale(current_scale, 1, 1);
+    super(geometry, material);
+    this.current_scale = current_scale;
+    this.geometry.computeBoundingBox();
+
+    this.tmp_bb_size = new Vector3();
+    this.geometry.boundingBox.getSize(this.tmp_bb_size);
+    this.material = material;
+  }
+
+  update_texture()
+  {
+    this.material.uniforms._MainTex.value.needsUpdate = true;
+    const img = this.material.uniforms._MainTex.value.image;
+
+    this.geometry.scale(1 / this.current_scale, 1, 1);
+    this.current_scale = img.width / img.height;
+    this.geometry.scale(this.current_scale, 1, 1);
+    this.geometry.computeBoundingBox();
+    this.geometry.boundingBox.getSize(this.tmp_bb_size);
+  }
+
+  get size()
+  {
+    return this.tmp_bb_size.clone().multiplyScalar(this.scale.x);
+  }
+
+  set size(value)
+  {
+    this.scale.copy(value);
+    this.material.uniforms._Scale.value = value;
+  }
+
+  set screen_aligned(boolean)
+  {
+    this.material.uniforms._ScreenAligned.value = boolean === true ? 1 : 0;
+  }
+
+  get screen_aligned()
+  {
+    return this.material.uniforms._ScreenAligned.value === 1;
+  }
+
+  set opacity(opacity)
+  {
+    this.material.uniforms._Opacity.value = opacity;
+  }
+
+  get opacity()
+  {
+    return this.material.uniforms._Opacity.value;
+  }
+
+  dispose()
+  {
+    this.geometry.dispose();
+    this.parent.remove(this);
+    this.material.uniforms._MainTex.value.dispose();
+    this.material.dispose();
+  }
+}
+
+export { WorldImage };

package/src/components/mouse_interactors/ObjectRotator.js

@@ -1,64 +1,64 @@
-import { RaycastResolver } from '../../raycast/RaycastResolver';
-import { GroupRaycaster } from '../../raycast/GroupRaycaster';
-
-import { Vector3 } from 'three';
-import { Quaternion } from 'three';
-
-class ObjectRotator extends RaycastResolver
-{
-  constructor(object, input)
-  {
-    super();
-
-    this.input = input;
-
-    this.is_mouse_over = false;
-    this.rotation_active = false;
-
-    this.object = object;
-    this.group_raycaster = new GroupRaycaster([object], this, undefined, this.input);
-  }
-
-  on_enter(intersected_object)
-  {
-    this.is_mouse_over = true;
-  }
-
-  on_exit()
-  {
-    this.is_mouse_over = false;
-  }
-
-  is_active()
-  {
-    return this.rotation_active;
-  }
-
-  update()
-  {
-    this.group_raycaster.update();
-
-    if (this.is_mouse_over && this.input.left_mouse_button_down)
-    {
-      this.rotation_active = true;
-    }
-
-    // left button no longer being pressed
-    if (!this.input.left_mouse_button_down)
-    {
-      this.rotation_active = false;
-    }
-
-    if (this.rotation_active)
-    {
-      const rot_x = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), this.input.NDC_delta.x);
-      const rot_y = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), this.input.NDC_delta.y);
-
-      this.object.quaternion.multiply(rot_x);
-      rot_y.multiply(this.object.quaternion);
-      this.object.quaternion.copy(rot_y);
-    }
-  }
-}
-
-export { ObjectRotator };
+import { RaycastResolver } from '../../raycast/RaycastResolver';
+import { GroupRaycaster } from '../../raycast/GroupRaycaster';
+
+import { Vector3 } from 'three';
+import { Quaternion } from 'three';
+
+class ObjectRotator extends RaycastResolver
+{
+  constructor(object, input)
+  {
+    super();
+
+    this.input = input;
+
+    this.is_mouse_over = false;
+    this.rotation_active = false;
+
+    this.object = object;
+    this.group_raycaster = new GroupRaycaster([object], this, undefined, this.input);
+  }
+
+  on_enter(intersected_object)
+  {
+    this.is_mouse_over = true;
+  }
+
+  on_exit()
+  {
+    this.is_mouse_over = false;
+  }
+
+  is_active()
+  {
+    return this.rotation_active;
+  }
+
+  update()
+  {
+    this.group_raycaster.update();
+
+    if (this.is_mouse_over && this.input.left_mouse_button_down)
+    {
+      this.rotation_active = true;
+    }
+
+    // left button no longer being pressed
+    if (!this.input.left_mouse_button_down)
+    {
+      this.rotation_active = false;
+    }
+
+    if (this.rotation_active)
+    {
+      const rot_x = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), this.input.NDC_delta.x);
+      const rot_y = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), this.input.NDC_delta.y);
+
+      this.object.quaternion.multiply(rot_x);
+      rot_y.multiply(this.object.quaternion);
+      this.object.quaternion.copy(rot_y);
+    }
+  }
+}
+
+export { ObjectRotator };

package/src/components/sdf_text/SDFText.js

@@ -1,156 +1,156 @@
-import { Vector3, Quaternion, Matrix4, Color, Box2, Vector2 } from 'three';
-import { TextGlyph } from './TextGlyph';
-
-class SDFText
-{
-  constructor(glyph_layout, text = '')
-  {
-    this.glyph_layout = glyph_layout;
-
-    this.glyphs = [];
-
-    this.glyph_is_dirty  = true;
-    this.matrix_is_dirty = true;
-    this.color_is_dirty  = true;
-
-    this.position = new Vector3();
-    this.quaternion = new Quaternion();
-    this.scale = new Vector3(1, 1, 1);
-    this.matrix = new Matrix4();
-
-    this.color = new Color('#FFFFFF');
-
-    this.pivot_point = new Vector2();
-    this.__opacity = 1;
-
-    this.__text   = text;
-
-    this.__generate_glyphs(text);
-  }
-
-  set text(value)
-  {
-    this.__text = value;
-    this.__generate_glyphs(value);
-    this.matrix_is_dirty = true;
-  }
-
-  get text()
-  {
-    return this.__text;
-  }
-
-  update_matrix()
-  {
-    this.matrix.compose(this.position, this.quaternion, this.scale);
-    this.matrix_is_dirty = false;
-    this.glyph_is_dirty = true;
-  }
-
-  clear_glyph_dirty()
-  {
-    this.glyph_is_dirty = false;
-  }
-
-  clear_color_dirty()
-  {
-    this.color_is_dirty = false;
-  }
-
-  set_rotation(orientation = 0, tilt = 0) // 0..360, -90..0..90
-  {
-    const new_orientation = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), (orientation / 360) * Math.PI * 2);
-    const new_tilt = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), (-tilt / 360) * Math.PI * 2);
-
-    this.quaternion.copy(new_orientation.multiply(new_tilt));
-    this.matrix_is_dirty = true;
-  }
-
-  set_position(pos)
-  {
-    this.position.copy(pos);
-    this.matrix_is_dirty = true;
-  }
-
-  set_size(size)
-  {
-    this.scale.set(size, size, size);
-    this.matrix_is_dirty = true;
-  }
-
-  set_color(col)
-  {
-    this.color.set(col);
-    this.color_is_dirty = true;
-  }
-
-  set_pivot(pivot)
-  {
-    this.pivot_point.copy(pivot);
-    this.update_glyphs();
-  }
-
-  set opacity(op)
-  {
-    this.__opacity = op;
-    this.color_is_dirty = true;
-  }
-
-  get opacity()
-  {
-    return this.__opacity;
-  }
-
-  update_glyphs()
-  {
-    this.__generate_glyphs(this.text);
-  }
-
-  __generate_glyphs(text)
-  {
-    let cursor = 0;
-
-    this.glyphs.length = 0;
-
-    for (let i = 0; i < text.length; i++)
-    {
-      const unicode = text.charCodeAt(i);
-      const glyph = this.glyph_layout.find(element => element.unicode === unicode);
-      if (glyph)
-      {
-        if (glyph.planeBounds)
-        {
-          const text_glyph = new TextGlyph(cursor, glyph.planeBounds, glyph.atlasBounds);
-          this.glyphs.push(text_glyph);
-        }
-        cursor += glyph.advance;
-      }
-    }
-
-    const box2 = new Box2();
-    const first_glyph = this.glyphs[0];
-    box2.setFromCenterAndSize(first_glyph.position.clone().add(new Vector2(first_glyph.scale.x / 2, first_glyph.scale.y / 2)), first_glyph.scale);
-
-    for (let i = 1; i < this.glyphs.length; i++)
-    {
-      const g = this.glyphs[i];
-      const box = new Box2().setFromCenterAndSize(g.position.clone().add(new Vector2(g.scale.x / 2, g.scale.y / 2)), g.scale);
-      box2.union(box);
-    }
-
-    const box2_size = new Vector2();
-    box2.getSize(box2_size);
-    for (let i = 0; i < this.glyphs.length; i++)
-    {
-      this.glyphs[i].position.x -= box2_size.x / 2;
-      this.glyphs[i].position.y -= box2_size.y / 2;
-
-      this.glyphs[i].position.x += (box2_size.x / 2) * this.pivot_point.x;
-      this.glyphs[i].position.y += (box2_size.y / 2) * this.pivot_point.y;
-    }
-
-    this.glyph_is_dirty = true;
-  }
-}
-
-export { SDFText };
+import { Vector3, Quaternion, Matrix4, Color, Box2, Vector2 } from 'three';
+import { TextGlyph } from './TextGlyph';
+
+class SDFText
+{
+  constructor(glyph_layout, text = '')
+  {
+    this.glyph_layout = glyph_layout;
+
+    this.glyphs = [];
+
+    this.glyph_is_dirty  = true;
+    this.matrix_is_dirty = true;
+    this.color_is_dirty  = true;
+
+    this.position = new Vector3();
+    this.quaternion = new Quaternion();
+    this.scale = new Vector3(1, 1, 1);
+    this.matrix = new Matrix4();
+
+    this.color = new Color('#FFFFFF');
+
+    this.pivot_point = new Vector2();
+    this.__opacity = 1;
+
+    this.__text   = text;
+
+    this.__generate_glyphs(text);
+  }
+
+  set text(value)
+  {
+    this.__text = value;
+    this.__generate_glyphs(value);
+    this.matrix_is_dirty = true;
+  }
+
+  get text()
+  {
+    return this.__text;
+  }
+
+  update_matrix()
+  {
+    this.matrix.compose(this.position, this.quaternion, this.scale);
+    this.matrix_is_dirty = false;
+    this.glyph_is_dirty = true;
+  }
+
+  clear_glyph_dirty()
+  {
+    this.glyph_is_dirty = false;
+  }
+
+  clear_color_dirty()
+  {
+    this.color_is_dirty = false;
+  }
+
+  set_rotation(orientation = 0, tilt = 0) // 0..360, -90..0..90
+  {
+    const new_orientation = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), (orientation / 360) * Math.PI * 2);
+    const new_tilt = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), (-tilt / 360) * Math.PI * 2);
+
+    this.quaternion.copy(new_orientation.multiply(new_tilt));
+    this.matrix_is_dirty = true;
+  }
+
+  set_position(pos)
+  {
+    this.position.copy(pos);
+    this.matrix_is_dirty = true;
+  }
+
+  set_size(size)
+  {
+    this.scale.set(size, size, size);
+    this.matrix_is_dirty = true;
+  }
+
+  set_color(col)
+  {
+    this.color.set(col);
+    this.color_is_dirty = true;
+  }
+
+  set_pivot(pivot)
+  {
+    this.pivot_point.copy(pivot);
+    this.update_glyphs();
+  }
+
+  set opacity(op)
+  {
+    this.__opacity = op;
+    this.color_is_dirty = true;
+  }
+
+  get opacity()
+  {
+    return this.__opacity;
+  }
+
+  update_glyphs()
+  {
+    this.__generate_glyphs(this.text);
+  }
+
+  __generate_glyphs(text)
+  {
+    let cursor = 0;
+
+    this.glyphs.length = 0;
+
+    for (let i = 0; i < text.length; i++)
+    {
+      const unicode = text.charCodeAt(i);
+      const glyph = this.glyph_layout.find(element => element.unicode === unicode);
+      if (glyph)
+      {
+        if (glyph.planeBounds)
+        {
+          const text_glyph = new TextGlyph(cursor, glyph.planeBounds, glyph.atlasBounds);
+          this.glyphs.push(text_glyph);
+        }
+        cursor += glyph.advance;
+      }
+    }
+
+    const box2 = new Box2();
+    const first_glyph = this.glyphs[0];
+    box2.setFromCenterAndSize(first_glyph.position.clone().add(new Vector2(first_glyph.scale.x / 2, first_glyph.scale.y / 2)), first_glyph.scale);
+
+    for (let i = 1; i < this.glyphs.length; i++)
+    {
+      const g = this.glyphs[i];
+      const box = new Box2().setFromCenterAndSize(g.position.clone().add(new Vector2(g.scale.x / 2, g.scale.y / 2)), g.scale);
+      box2.union(box);
+    }
+
+    const box2_size = new Vector2();
+    box2.getSize(box2_size);
+    for (let i = 0; i < this.glyphs.length; i++)
+    {
+      this.glyphs[i].position.x -= box2_size.x / 2;
+      this.glyphs[i].position.y -= box2_size.y / 2;
+
+      this.glyphs[i].position.x += (box2_size.x / 2) * this.pivot_point.x;
+      this.glyphs[i].position.y += (box2_size.y / 2) * this.pivot_point.y;
+    }
+
+    this.glyph_is_dirty = true;
+  }
+}
+
+export { SDFText };