@operato/scene-visualizer 8.0.0-beta.1 → 8.0.0

package/src/banner.ts

@@ -1,88 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import * as THREE from 'three'
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-import { RealObject } from './threed/real-object'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'color',
-      label: 'box-color',
-      name: 'boxColor',
-      property: 'boxColor'
-    }
-  ],
-  help: 'scene/component/banner'
-}
-
-export class Banner3D extends RealObject {
-  build() {
-    super.build()
-
-    var { width = 1, height = 1, depth = 1 } = this.component.state
-
-    this.object3d.add(this.createCube(width, height, depth))
-
-    let textureBoard = this.createTextureBoard(width, depth)
-    textureBoard.position.set(0, 0, 0.5 * height + 1)
-    this.object3d.add(textureBoard)
-  }
-
-  createCube(w: number, h: number, d: number) {
-    var { boxColor = '#ccaa76' } = this.component.state
-
-    var geometry = new THREE.BoxGeometry(w, d, h)
-    var material = new THREE.MeshStandardMaterial({
-      color: boxColor,
-      side: THREE.FrontSide
-    })
-
-    var cube = new THREE.Mesh(geometry, material)
-    cube.castShadow = true
-
-    return cube
-  }
-
-  createTextureBoard(w: number, h: number) {
-    var boardMaterial
-
-    let { fillStyle = '#ccaa76' } = this.component.state
-    const texture = RealObject.buildFillStyleTexture(this.component)
-
-    if (texture) {
-      boardMaterial = new THREE.MeshStandardMaterial({ map: texture })
-    } else {
-      boardMaterial = new THREE.MeshStandardMaterial({
-        color: fillStyle || '#ccaa76',
-        side: THREE.FrontSide
-      })
-    }
-
-    var boardGeometry = new THREE.PlaneGeometry(w, h, 1, 1)
-    var boardMesh = new THREE.Mesh(boardGeometry, boardMaterial)
-    boardMesh.castShadow = true
-
-    return boardMesh
-  }
-}
-
-export class Banner extends RectPath(Shape) {
-  is3dish() {
-    return true
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Banner3D(this)
-  }
-}
-
-Component.register('banner', Banner)

package/src/camera.ts

@@ -1,132 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-
-const DEFAULT = {
-  far: 100000,
-  fov: 80,
-  near: 1,
-  zoom: 1
-}
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'near',
-      name: 'near'
-    },
-    {
-      type: 'number',
-      label: 'far',
-      name: 'far'
-    },
-    {
-      type: 'number',
-      label: 'fov',
-      name: 'fov'
-    },
-    {
-      type: 'number',
-      label: 'zoom',
-      name: 'zoom'
-    },
-    {
-      type: 'checkbox',
-      label: 'show-helper',
-      name: 'showHelper'
-    }
-  ],
-  help: 'scene/component/camera'
-}
-
-export class Camera3D extends RealObject<THREE.Mesh> {
-  camera?: THREE.PerspectiveCamera
-  helper?: THREE.CameraHelper
-
-  protected getObject3dInstance() {
-    return new THREE.Mesh()
-  }
-
-  updateCamera() {
-    var {
-      near = DEFAULT.near,
-      far = DEFAULT.far,
-      fov = DEFAULT.fov,
-      zoom = DEFAULT.zoom,
-      showHelper
-    } = this.component.state
-
-    this.camera!.far = far
-    this.camera!.fov = fov
-    this.camera!.near = near
-    this.camera!.zoom = zoom
-
-    if (showHelper) {
-      if (!this.helper) {
-        this.helper = new THREE.CameraHelper(this.camera!)
-        this.object3d.add(this.helper)
-      }
-    } else if (this.helper) {
-      this.object3d.remove(this.helper)
-      delete this.helper
-    }
-  }
-
-  build() {
-    super.build()
-
-    var { width = 0, height = 0, depth = 0, fillStyle = 'lightgray' } = this.component.state
-
-    this.object3d.geometry = new THREE.BoxGeometry(width, depth, height)
-    this.object3d.material = new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
-
-    this.camera = new THREE.PerspectiveCamera()
-    this.camera.position.set(0, 0, 0)
-
-    this.object3d.add(this.camera)
-    this.object3d.lookAt(0, 0, 0)
-
-    this.updateCamera()
-  }
-}
-
-export class Camera extends RectPath(Shape) {
-  static _image: HTMLImageElement
-
-  is3dish() {
-    return true
-  }
-
-  static get image() {
-    if (!Camera._image) {
-      Camera._image = new Image()
-      Camera._image.src = new URL('../icons/camera-big.png', import.meta.url).href
-    }
-
-    return Camera._image
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-
-    context.beginPath()
-    this.drawImage(context, Camera.image, left, top, width, height)
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Camera3D(this)
-  }
-
-  get nature(): ComponentNature {
-    return NATURE
-  }
-}
-
-Component.register('camera', Camera)

package/src/component.d.ts

@@ -1,10 +0,0 @@
-import { RealObject } from './threed/real-object'
-
-declare module '@hatiolab/things-scene' {
-  interface Component {
-    buildRealObject(): RealObject | undefined
-    get realObject(): RealObject | undefined
-
-    _realObject?: RealObject
-  }
-}

package/src/cube.ts

@@ -1,39 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-import { RealObjectMesh } from './threed/real-object-mesh'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [],
-  help: 'scene/component/cube'
-}
-
-export class Cube3D extends RealObjectMesh {
-  buildGeometry() {
-    var { width = 0, height = 0, depth = 0 } = this.component.state
-
-    this.object3d.geometry = new THREE.BoxGeometry(width, depth, height)
-  }
-}
-
-export class Cube extends RectPath(Shape) {
-  is3dish() {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Cube3D(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('cube', Cube)

package/src/cylinder.ts

@@ -1,39 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, Ellipse } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-import { RealObjectMesh } from './threed/real-object-mesh'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [],
-  help: 'scene/component/cylinder'
-}
-
-export class Cylinder3D extends RealObjectMesh {
-  buildGeometry() {
-    var { depth = 0, rx = 0 } = this.component.state
-
-    this.object3d.geometry = new THREE.CylinderGeometry(rx, rx, depth, 25)
-  }
-}
-
-export class Cylinder extends Ellipse {
-  is3dish() {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Cylinder3D(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('cylinder', Cylinder)

package/src/desk.ts

@@ -1,135 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'color',
-      label: 'leg-color',
-      name: 'legColor',
-      property: 'legColor'
-    }
-  ],
-  help: 'scene/component/desk'
-}
-
-export class Desk3D extends RealObject {
-  get boardThickness() {
-    var { depth } = this.component.state
-
-    return Math.min(10, depth / 10)
-  }
-
-  get legThickness() {
-    var { width, height } = this.component.state
-
-    var min = Math.min(width, height)
-
-    return Math.min(10, min / 10)
-  }
-
-  get margin() {
-    return Math.min(this.legThickness / 5, 2)
-  }
-
-  build() {
-    super.build()
-
-    var { width, height, depth } = this.component.state
-
-    var top = (depth - this.boardThickness) / 2
-
-    var legs = this.createDeskLegs(width, height, depth)
-    legs.position.set(0, -this.boardThickness / 2, 0)
-    legs.castShadow = true
-
-    this.object3d.add(legs)
-
-    let board = this.createDeskBoard(width, height)
-    board.position.set(0, top, 0)
-    board.rotation.x = Math.PI / 2
-    board.castShadow = true
-
-    this.object3d.add(board)
-  }
-
-  createDeskLegs(w: number, h: number, d: number) {
-    var { legColor } = this.component.state
-
-    var legThickness = this.legThickness
-    var margin = this.margin
-    d -= this.boardThickness
-
-    var legs = new THREE.Group()
-
-    var posX = w / 2 - legThickness / 2 - margin
-    var posY = h / 2 - legThickness / 2 - margin
-    var posZ = 0
-
-    for (var i = 0; i < 4; i++) {
-      var geometry = new THREE.BoxGeometry(legThickness, d, legThickness)
-      var material = new THREE.MeshStandardMaterial({
-        color: legColor || '#252525'
-      })
-
-      var leg = new THREE.Mesh(geometry, material)
-      leg.castShadow = true
-
-      switch (i) {
-        case 0:
-          leg.position.set(posX, posZ, posY)
-          break
-        case 1:
-          leg.position.set(posX, posZ, -posY)
-          break
-        case 2:
-          leg.position.set(-posX, posZ, posY)
-          break
-        case 3:
-          leg.position.set(-posX, posZ, -posY)
-          break
-      }
-
-      legs.add(leg)
-    }
-
-    return legs
-  }
-
-  createDeskBoard(w: number, h: number) {
-    var { fillStyle } = this.component.state
-
-    var d = 10
-
-    var boardMaterial = new THREE.MeshStandardMaterial({
-      color: fillStyle || '#ccaa76'
-    })
-    var boardGeometry = new THREE.BoxGeometry(w, h, d, 1, 1)
-    var board = new THREE.Mesh(boardGeometry, boardMaterial)
-
-    return board
-  }
-}
-
-export class Desk extends RectPath(Shape) {
-  is3dish() {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Desk3D(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('desk', Desk)

package/src/editors/index.ts

@@ -1,13 +0,0 @@
-import './property-editor-location-increase-pattern'
-import './property-editor-gltf-info'
-
-export default [
-  {
-    type: 'location-increase-pattern',
-    element: 'property-editor-location-increase-pattern'
-  },
-  {
-    type: 'gltf-info',
-    element: 'property-editor-gltf-info'
-  }
-]

package/src/editors/property-editor-gltf-info.ts

@@ -1,135 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/elevated-button.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, PropertyValues, TemplateResult } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-import { Component } from '@hatiolab/things-scene'
-
-import * as THREE from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-
-@customElement('property-editor-gltf-info')
-export default class GLTFInfoEditor extends OxPropertyEditor {
-  static styles = [
-    ...OxPropertyEditor.styles,
-    css`
-      div[info] {
-        display: flex;
-        flex-direction: row;
-        font-size: 12px;
-      }
-
-      div[info] * {
-        align-self: center;
-      }
-
-      div[info] title {
-        font-weight: bold;
-      }
-
-      div[info] md-elevated-button {
-        margin-left: auto;
-        --md-icon-size: 24px;
-      }
-    `
-  ]
-
-  @property({ type: String }) src?: string
-
-  @state() width: number = 0
-  @state() height: number = 0
-  @state() depth: number = 0
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    const valid = this.width && this.height && this.depth
-
-    var property = spec.property || {}
-    var { action } = property
-
-    return html`
-      <fieldset fullwidth>
-        <legend><ox-i18n msgid="label.gltf-info">GLTF info.</ox-i18n></legend>
-
-        <div>
-          <div info>
-            <div label>[W x H x D] :</div>
-            ${valid
-              ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>
-                  <md-elevated-button
-                    @click=${(e: MouseEvent) => {
-                      this.dispatchEvent(
-                        new CustomEvent('i-need-selected', {
-                          bubbles: true,
-                          composed: true,
-                          detail: {
-                            callback: (selected: any[]) => {
-                              typeof action === 'function' &&
-                                action(selected[0], {
-                                  width: this.width,
-                                  height: this.height,
-                                  depth: this.depth
-                                })
-                            }
-                          }
-                        })
-                      )
-                    }}
-                  >
-                    <md-icon>autorenew</md-icon>
-                  </md-elevated-button>`
-              : html` <div></div> `}
-          </div>
-        </div>
-      </fieldset>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('src')) {
-      this.dispatchEvent(
-        new CustomEvent('i-need-selected', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            callback: async (selected: any[]) => {
-              await this.fetchSourceInfo(selected[0], this.src!)
-            }
-          }
-        })
-      )
-    }
-  }
-
-  async fetchSourceInfo(component: Component, src: string) {
-    if (!src || !src.trim()) {
-      return
-    }
-
-    try {
-      const path = component.app.url(src)
-
-      let gltfLoader = new GLTFLoader()
-
-      gltfLoader.setCrossOrigin('use-credentials')
-
-      return new Promise((resolve: any) => {
-        gltfLoader.load(path, gltf => {
-          var box = new THREE.Box3().setFromObject(gltf.scene)
-          var { x, y, z } = box.getSize(new THREE.Vector3())
-
-          this.width = Math.floor(x)
-          this.depth = Math.floor(y)
-          this.height = Math.floor(z)
-
-          resolve()
-        })
-      })
-    } catch (e) {
-      console.error(e)
-      return
-    }
-  }
-}