a3js 0.0.3 → 0.0.4

package/README.md

@@ -3,3 +3,6 @@
 TypeScript (JavaScript) 3DCG Library
 
 **危険！** APIの構成を試行錯誤中。
+
+* <https://kenji0717.github.io/a3js/>
+

package/dist/a3js.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("three");function l(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const n=l(m);class c{object;constructor(e){this.object=e}setLoc(e,t,i){this.object.position.set(e,t,i)}}function p(s){return s?.isA3Updatable===!0}class a{scene;objects;constructor(){this.scene=new n.Scene,this.objects=[]}add(e){this.scene.add(e.object),this.objects.push(e)}update(e){for(const t of this.objects)p(t)&&t.update(e)}}class o{camera;headLight;constructor(e){this.camera=e,this.headLight=new n.SpotLight(16777215,1,0,Math.PI/3,0,0),this.headLight.rotation.x=3.14/2}setAspect(e){u(this.camera)&&(this.camera.aspect=e,this.camera.updateProjectionMatrix())}setLoc(e,t,i){this.camera.position.set(e,t,i),this.headLight.position.set(e,t,i)}disableHeadlight(){this.headLight.intensity=0}enableHeadlight(){this.headLight.intensity=1}}function u(s){return s.isPerspectiveCamera===!0}class h extends HTMLElement{ro;renderer;scene;camera;clock;constructor(){super(),this.renderer=new n.WebGLRenderer;const e=new n.PerspectiveCamera(75,300/150,.1,1e3);this.clock=new n.Clock,this.scene=new a,this.camera=new o(e),this.scene.scene.add(this.camera.camera),this.scene.scene.add(this.camera.headLight),this.camera.setLoc(0,0,3),this.style="display: block;",this.renderer.domElement.style="display: block; width: 100%; height: 100%; margin: 0; padding: 0;",this.appendChild(this.renderer.domElement),this.animationFrameId=requestAnimationFrame(this.renderingLoop)}connectedCallback(){this.ro=new ResizeObserver(()=>{const{width:e,height:t}=this.renderer.domElement.getBoundingClientRect();this.camera.setAspect(e/t),this.renderer.setSize(e,t)}),this.ro.observe(this)}disconnectedCallback(){this.ro?.disconnect()}replaceScene(e){this.scene.scene.remove(this.camera.camera),this.scene.scene.remove(this.camera.headLight),e.scene.add(this.camera.camera),e.scene.add(this.camera.headLight);const t=this.scene;return this.scene=e,t}animationFrameId=-1;renderingLoop=()=>{this.animationFrameId=requestAnimationFrame(this.renderingLoop);const e=this.clock.getDelta();this.scene&&(this.scene.update(e),this.renderer.render(this.scene.scene,this.camera.camera))}}customElements.define("a3-canvas",h);const g=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("three");function u(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const n=u(p);class a{object;needsUpdate;constructor(e){this.object=this.initObject(e),this.needsUpdate=this.initNeedsUpdate()}initNeedsUpdate(){return!1}update(e){}setLoc(e,t,i){this.object.position.set(e,t,i)}}class d{scene;objects;constructor(){this.scene=new n.Scene,this.objects=[]}add(e){this.scene.add(e.object),this.objects.push(e)}update(e){for(const t of this.objects)t.needsUpdate&&t.update(e)}}class h extends a{}class c{scene;camera;constructor(e){this.scene=new d,this.camera=e,this.scene.scene.add(this.camera.object),this.camera.setLoc(0,0,3)}replaceScene(e){this.scene.scene.remove(this.camera.object),e.scene.add(this.camera.object);const t=this.scene;return this.scene=e,t}updateScene(e){this.scene.update(e)}}class o extends h{camera;headLight;constructor(e){super(e),this.camera=e,this.headLight=new n.SpotLight(16777215,1,0,Math.PI/3,0,0),this.headLight.rotation.x=3.14/2,this.object.add(this.camera),this.object.add(this.headLight)}initObject(){return new n.Object3D}getHeadLight(){return this.headLight}setAspect(e){b(this.camera)&&(this.camera.aspect=e,this.camera.updateProjectionMatrix())}setHeadLightEnable(e){e?this.headLight.intensity=1:this.headLight.intensity=0}}function b(s){return s.isPerspectiveCamera===!0}class m extends HTMLElement{ro;base;renderer;scene;camera;camera3js;clock;constructor(e){super(),e||(e=new n.PerspectiveCamera(75,300/150,.1,1e3)),this.camera3js=e;const t=new o(e);this.base=new c(t),this.scene=this.base.scene,this.camera=this.base.camera,this.renderer=new n.WebGLRenderer,this.clock=new n.Clock,this.style="display: block;",this.renderer.domElement.style="display: block; width: 100%; height: 100%; margin: 0; padding: 0;",this.appendChild(this.renderer.domElement),this.animationFrameId=requestAnimationFrame(this.renderingLoop)}connectedCallback(){this.ro=new ResizeObserver(()=>{const{width:e,height:t}=this.renderer.domElement.getBoundingClientRect();g(this.camera3js)&&(this.camera3js.aspect=e/t),this.renderer.setSize(e,t)}),this.ro.observe(this)}disconnectedCallback(){this.ro?.disconnect()}replaceScene(e){return this.base.replaceScene(e)}animationFrameId=-1;renderingLoop=()=>{this.animationFrameId=requestAnimationFrame(this.renderingLoop);const e=this.clock.getDelta();this.base.updateScene(e),this.renderer.render(this.scene.scene,this.camera3js)}}customElements.define("a3-canvas",m);function g(s){return s.isPerspectiveCamera===!0}const f=`
   position: absolute;
   top: 100px;
   left: 100px;
@@ -6,10 +6,10 @@
   border: 1px solid #555;
   background: white;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
-`,b=`
+`,j=`
   background: #444;
   color: white;
   padding: 8px;
   cursor: move;
   user-select: none; /* 文字選択を防ぐ */
-`;class d extends HTMLElement{ro;renderer;scene;camera;clock;isDragging=!1;offsetX=0;offsetY=0;constructor(e,t){super(),this.clock=new n.Clock,this.renderer=new n.WebGLRenderer,this.scene=new a;const i=new n.PerspectiveCamera(75,e/t,.1,1e3);this.camera=new o(i),this.scene.scene.add(this.camera.camera),this.scene.scene.add(this.camera.headLight),this.camera.setLoc(0,0,3),this.camera.setAspect(e/t),this.renderer.setSize(e,t),this.style=g,document.body?document.body.appendChild(this):document.addEventListener("DOMContentLoaded",()=>{document.body.append(this)},{once:!0});const r=document.createElement("div");r.textContent="A3Window",r.style=b,this.appendChild(r),r.addEventListener("mousedown",this.mouseDownListener),document.addEventListener("mousemove",this.mouseMoveListener),document.addEventListener("mouseup",this.mouseUpListener),this.renderer.domElement.style=`display: block; width: ${e}px; height: ${t}px; margin: 0; padding: 0;`,this.renderer.domElement.width=e,this.renderer.domElement.width=t,this.appendChild(this.renderer.domElement),this.animationFrameId=requestAnimationFrame(this.renderingLoop)}connectedCallback(){this.ro=new ResizeObserver(()=>{const{width:e,height:t}=this.renderer.domElement.getBoundingClientRect();this.camera.setAspect(e/t),this.renderer.setSize(e,t)}),this.ro.observe(this)}disconnectedCallback(){this.ro?.disconnect()}mouseDownListener=e=>{this.isDragging=!0,this.offsetX=e.clientX-this.offsetLeft,this.offsetY=e.clientY-this.offsetTop};mouseMoveListener=e=>{this.isDragging&&(this.style.left=e.clientX-this.offsetX+"px",this.style.top=e.clientY-this.offsetY+"px")};mouseUpListener=()=>{this.isDragging=!1};replaceScene(e){this.scene.scene.remove(this.camera.camera),this.scene.scene.remove(this.camera.headLight),e.scene.add(this.camera.camera),e.scene.add(this.camera.headLight);const t=this.scene;return this.scene=e,t}animationFrameId=-1;renderingLoop=()=>{this.animationFrameId=requestAnimationFrame(this.renderingLoop);const e=this.clock.getDelta();this.scene&&(this.scene.update(e),this.renderer.render(this.scene.scene,this.camera.camera))}}customElements.define("a3-window",d);class f extends c{isA3Updatable=!0;mesh;constructor(){const e=new n.BoxGeometry,t=new n.MeshStandardMaterial({color:65280}),i=new n.Mesh(e,t);super(i),this.mesh=i}update(e){this.mesh.rotation.x+=e,this.mesh.rotation.y+=e,this.mesh.rotation.z+=e}}function L(s){return 2*s}exports.A3Canvas=h;exports.A3Object=c;exports.A3Scene=a;exports.A3Test=f;exports.A3Window=d;exports.times2=L;
+`;class l extends HTMLElement{ro;base;renderer;scene;camera;camera3js;clock;isDragging=!1;offsetX=0;offsetY=0;constructor(e,t){super(),this.camera3js=new n.PerspectiveCamera(75,e/t,.1,1e3);const i=new o(this.camera3js);this.base=new c(i),this.scene=this.base.scene,this.camera=this.base.camera,this.renderer=new n.WebGLRenderer,this.clock=new n.Clock,this.camera3js.aspect=e/t,this.renderer.setSize(e,t),this.style=f,document.body?document.body.appendChild(this):document.addEventListener("DOMContentLoaded",()=>{document.body.append(this)},{once:!0});const r=document.createElement("div");r.textContent="A3Window",r.style=j,this.appendChild(r),r.addEventListener("mousedown",this.mouseDownListener),document.addEventListener("mousemove",this.mouseMoveListener),document.addEventListener("mouseup",this.mouseUpListener),this.renderer.domElement.style=`display: block; width: ${e}px; height: ${t}px; margin: 0; padding: 0;`,this.renderer.domElement.width=e,this.renderer.domElement.width=t,this.appendChild(this.renderer.domElement),this.animationFrameId=requestAnimationFrame(this.renderingLoop)}connectedCallback(){this.ro=new ResizeObserver(()=>{const{width:e,height:t}=this.renderer.domElement.getBoundingClientRect();this.camera3js.aspect=e/t,this.renderer.setSize(e,t)}),this.ro.observe(this)}disconnectedCallback(){this.ro?.disconnect()}mouseDownListener=e=>{this.isDragging=!0,this.offsetX=e.clientX-this.offsetLeft,this.offsetY=e.clientY-this.offsetTop};mouseMoveListener=e=>{this.isDragging&&(this.style.left=e.clientX-this.offsetX+"px",this.style.top=e.clientY-this.offsetY+"px")};mouseUpListener=()=>{this.isDragging=!1};replaceScene(e){return this.base.replaceScene(e)}animationFrameId=-1;renderingLoop=()=>{this.animationFrameId=requestAnimationFrame(this.renderingLoop);const e=this.clock.getDelta();this.scene&&(this.scene.update(e),this.renderer.render(this.scene.scene,this.camera3js))}}customElements.define("a3-window",l);class w extends a{initObject(){const e=new n.BoxGeometry,t=new n.MeshStandardMaterial({color:65280});return new n.Mesh(e,t)}initNeedsUpdate(){return!0}update(e){this.object.rotation.x+=e,this.object.rotation.y+=e,this.object.rotation.z+=e}}function L(s){return 2*s}exports.A3Camera=h;exports.A3Canvas=m;exports.A3Object=a;exports.A3Scene=d;exports.A3Test=w;exports.A3ViewBase=c;exports.A3Window=l;exports.GeneralCamera=o;exports.times2=L;

package/dist/a3js.es.js

@@ -1,17 +1,22 @@
 import * as i from "three";
-class o {
+class a {
   object;
+  needsUpdate;
   constructor(e) {
-    this.object = e;
+    this.object = this.initObject(e), this.needsUpdate = this.initNeedsUpdate();
+  }
+  initNeedsUpdate() {
+    return !1;
+  }
+  // デフォルトfalse
+  update(e) {
   }
+  // デフォルト: 何もしない
   setLoc(e, t, n) {
     this.object.position.set(e, t, n);
   }
 }
-function h(s) {
-  return s?.isA3Updatable === !0;
-}
-class a {
+class d {
   scene;
   objects;
   constructor() {
@@ -22,65 +27,85 @@ class a {
   }
   update(e) {
     for (const t of this.objects)
-      h(t) && t.update(e);
+      t.needsUpdate && t.update(e);
   }
 }
+class h extends a {
+}
 class c {
+  scene;
+  camera;
+  constructor(e) {
+    this.scene = new d(), this.camera = e, this.scene.scene.add(this.camera.object), this.camera.setLoc(0, 0, 3);
+  }
+  replaceScene(e) {
+    this.scene.scene.remove(this.camera.object), e.scene.add(this.camera.object);
+    const t = this.scene;
+    return this.scene = e, t;
+  }
+  updateScene(e) {
+    this.scene.update(e);
+  }
+}
+class o extends h {
   camera;
   headLight;
   constructor(e) {
-    this.camera = e, this.headLight = new i.SpotLight(16777215, 1, 0, Math.PI / 3, 0, 0), this.headLight.rotation.x = 3.14 / 2;
+    super(e), this.camera = e, this.headLight = new i.SpotLight(16777215, 1, 0, Math.PI / 3, 0, 0), this.headLight.rotation.x = 3.14 / 2, this.object.add(this.camera), this.object.add(this.headLight);
   }
-  setAspect(e) {
-    d(this.camera) && (this.camera.aspect = e, this.camera.updateProjectionMatrix());
+  initObject() {
+    return new i.Object3D();
   }
-  setLoc(e, t, n) {
-    this.camera.position.set(e, t, n), this.headLight.position.set(e, t, n);
+  getHeadLight() {
+    return this.headLight;
   }
-  disableHeadlight() {
-    this.headLight.intensity = 0;
+  setAspect(e) {
+    m(this.camera) && (this.camera.aspect = e, this.camera.updateProjectionMatrix());
   }
-  enableHeadlight() {
-    this.headLight.intensity = 1;
+  setHeadLightEnable(e) {
+    e ? this.headLight.intensity = 1 : this.headLight.intensity = 0;
   }
 }
-function d(s) {
+function m(s) {
   return s.isPerspectiveCamera === !0;
 }
-class m extends HTMLElement {
+class l extends HTMLElement {
   ro;
+  base;
   renderer;
   scene;
   camera;
+  camera3js;
   clock;
-  constructor() {
-    super(), this.renderer = new i.WebGLRenderer();
-    const e = new i.PerspectiveCamera(75, 300 / 150, 0.1, 1e3);
-    this.clock = new i.Clock(), this.scene = new a(), this.camera = new c(e), this.scene.scene.add(this.camera.camera), this.scene.scene.add(this.camera.headLight), this.camera.setLoc(0, 0, 3), this.style = "display: block;", this.renderer.domElement.style = "display: block; width: 100%; height: 100%; margin: 0; padding: 0;", this.appendChild(this.renderer.domElement), this.animationFrameId = requestAnimationFrame(this.renderingLoop);
+  constructor(e) {
+    super(), e || (e = new i.PerspectiveCamera(75, 300 / 150, 0.1, 1e3)), this.camera3js = e;
+    const t = new o(e);
+    this.base = new c(t), this.scene = this.base.scene, this.camera = this.base.camera, this.renderer = new i.WebGLRenderer(), this.clock = new i.Clock(), this.style = "display: block;", this.renderer.domElement.style = "display: block; width: 100%; height: 100%; margin: 0; padding: 0;", this.appendChild(this.renderer.domElement), this.animationFrameId = requestAnimationFrame(this.renderingLoop);
   }
   connectedCallback() {
     this.ro = new ResizeObserver(() => {
       const { width: e, height: t } = this.renderer.domElement.getBoundingClientRect();
-      this.camera.setAspect(e / t), this.renderer.setSize(e, t);
+      p(this.camera3js) && (this.camera3js.aspect = e / t), this.renderer.setSize(e, t);
     }), this.ro.observe(this);
   }
   disconnectedCallback() {
     this.ro?.disconnect();
   }
   replaceScene(e) {
-    this.scene.scene.remove(this.camera.camera), this.scene.scene.remove(this.camera.headLight), e.scene.add(this.camera.camera), e.scene.add(this.camera.headLight);
-    const t = this.scene;
-    return this.scene = e, t;
+    return this.base.replaceScene(e);
   }
   animationFrameId = -1;
   renderingLoop = () => {
     this.animationFrameId = requestAnimationFrame(this.renderingLoop);
     const e = this.clock.getDelta();
-    this.scene && (this.scene.update(e), this.renderer.render(this.scene.scene, this.camera.camera));
+    this.base.updateScene(e), this.renderer.render(this.scene.scene, this.camera3js);
   };
 }
-customElements.define("a3-canvas", m);
-const l = `
+customElements.define("a3-canvas", l);
+function p(s) {
+  return s.isPerspectiveCamera === !0;
+}
+const u = `
   position: absolute;
   top: 100px;
   left: 100px;
@@ -88,35 +113,37 @@ const l = `
   border: 1px solid #555;
   background: white;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
-`, p = `
+`, b = `
   background: #444;
   color: white;
   padding: 8px;
   cursor: move;
   user-select: none; /* 文字選択を防ぐ */
 `;
-class u extends HTMLElement {
+class g extends HTMLElement {
   ro;
+  base;
   renderer;
   scene;
   camera;
+  camera3js;
   clock;
   isDragging = !1;
   offsetX = 0;
   offsetY = 0;
   constructor(e, t) {
-    super(), this.clock = new i.Clock(), this.renderer = new i.WebGLRenderer(), this.scene = new a();
-    const n = new i.PerspectiveCamera(75, e / t, 0.1, 1e3);
-    this.camera = new c(n), this.scene.scene.add(this.camera.camera), this.scene.scene.add(this.camera.headLight), this.camera.setLoc(0, 0, 3), this.camera.setAspect(e / t), this.renderer.setSize(e, t), this.style = l, document.body ? document.body.appendChild(this) : document.addEventListener("DOMContentLoaded", () => {
+    super(), this.camera3js = new i.PerspectiveCamera(75, e / t, 0.1, 1e3);
+    const n = new o(this.camera3js);
+    this.base = new c(n), this.scene = this.base.scene, this.camera = this.base.camera, this.renderer = new i.WebGLRenderer(), this.clock = new i.Clock(), this.camera3js.aspect = e / t, this.renderer.setSize(e, t), this.style = u, document.body ? document.body.appendChild(this) : document.addEventListener("DOMContentLoaded", () => {
       document.body.append(this);
     }, { once: !0 });
     const r = document.createElement("div");
-    r.textContent = "A3Window", r.style = p, this.appendChild(r), r.addEventListener("mousedown", this.mouseDownListener), document.addEventListener("mousemove", this.mouseMoveListener), document.addEventListener("mouseup", this.mouseUpListener), this.renderer.domElement.style = `display: block; width: ${e}px; height: ${t}px; margin: 0; padding: 0;`, this.renderer.domElement.width = e, this.renderer.domElement.width = t, this.appendChild(this.renderer.domElement), this.animationFrameId = requestAnimationFrame(this.renderingLoop);
+    r.textContent = "A3Window", r.style = b, this.appendChild(r), r.addEventListener("mousedown", this.mouseDownListener), document.addEventListener("mousemove", this.mouseMoveListener), document.addEventListener("mouseup", this.mouseUpListener), this.renderer.domElement.style = `display: block; width: ${e}px; height: ${t}px; margin: 0; padding: 0;`, this.renderer.domElement.width = e, this.renderer.domElement.width = t, this.appendChild(this.renderer.domElement), this.animationFrameId = requestAnimationFrame(this.renderingLoop);
   }
   connectedCallback() {
     this.ro = new ResizeObserver(() => {
       const { width: e, height: t } = this.renderer.domElement.getBoundingClientRect();
-      this.camera.setAspect(e / t), this.renderer.setSize(e, t);
+      this.camera3js.aspect = e / t, this.renderer.setSize(e, t);
     }), this.ro.observe(this);
   }
   disconnectedCallback() {
@@ -132,37 +159,39 @@ class u extends HTMLElement {
     this.isDragging = !1;
   };
   replaceScene(e) {
-    this.scene.scene.remove(this.camera.camera), this.scene.scene.remove(this.camera.headLight), e.scene.add(this.camera.camera), e.scene.add(this.camera.headLight);
-    const t = this.scene;
-    return this.scene = e, t;
+    return this.base.replaceScene(e);
   }
   animationFrameId = -1;
   renderingLoop = () => {
     this.animationFrameId = requestAnimationFrame(this.renderingLoop);
     const e = this.clock.getDelta();
-    this.scene && (this.scene.update(e), this.renderer.render(this.scene.scene, this.camera.camera));
+    this.scene && (this.scene.update(e), this.renderer.render(this.scene.scene, this.camera3js));
   };
 }
-customElements.define("a3-window", u);
-class g extends o {
-  isA3Updatable = !0;
-  mesh;
-  constructor() {
-    const e = new i.BoxGeometry(), t = new i.MeshStandardMaterial({ color: 65280 }), n = new i.Mesh(e, t);
-    super(n), this.mesh = n;
+customElements.define("a3-window", g);
+class f extends a {
+  initObject() {
+    const e = new i.BoxGeometry(), t = new i.MeshStandardMaterial({ color: 65280 });
+    return new i.Mesh(e, t);
+  }
+  initNeedsUpdate() {
+    return !0;
   }
   update(e) {
-    this.mesh.rotation.x += e, this.mesh.rotation.y += e, this.mesh.rotation.z += e;
+    this.object.rotation.x += e, this.object.rotation.y += e, this.object.rotation.z += e;
   }
 }
 function L(s) {
   return 2 * s;
 }
 export {
-  m as A3Canvas,
-  o as A3Object,
-  a as A3Scene,
-  g as A3Test,
-  u as A3Window,
+  h as A3Camera,
+  l as A3Canvas,
+  a as A3Object,
+  d as A3Scene,
+  f as A3Test,
+  c as A3ViewBase,
+  g as A3Window,
+  o as GeneralCamera,
   L as times2
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "a3js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/a3js.cjs.js",
   "module": "dist/a3js.es.js",
@@ -18,7 +18,7 @@
     "dev": "vite",
     "build": "vite build && tsc --emitDeclarationOnly",
     "preview": "vite preview",
-    "docs": "typedoc && vitepress build docs-src --outDir docs"
+    "docs": "typedoc && vitepress build docs-src --outDir docs && rm -r docs-src/public/api"
   },
   "devDependencies": {
     "@types/three": "^0.182.0",