WHS.js Tryout

app.js

<template>
  <div id="app"></div>
</template>

<script>
// Components
import {
  App,
  DefineModule,
  ElementModule,
  OrbitControlsModule,
  RenderingModule,
  SceneModule,
  Importer,
  TextureModule,
  Loop
} from "whs";
import * as THREE from "three";
import { GLTFLoader } from "../assets/GLTFLoader.jf";
//import {FBXLoader} from "../assets/FBXLoader.jf"

import { BasicComponent } from "../assets/BasicComponent";
import xyzo from "../assets/xyzo";
import camera from "../assets/camera";
import lights from "../assets/lights";

export default {
  mounted() {
    const stage =
        window.innerWidth > window.innerHeight
          ? { width: 1000, height: 500 }
          : { width: 500, height: 1000 },
      app = new App([
        new ElementModule(document.getElementById("app")),
        new SceneModule(),
        new DefineModule("camera", camera(stage)),
        new RenderingModule(
          {
            bgColor: 0x555555,
            bgOpacity: 1,
            renderer: {
              antialias: true,
              shadowmap: { type: THREE.PCFSoftShadowMap }
            }
          },
          { shadow: true }
        ),
        new OrbitControlsModule({
          target: new THREE.Vector3(stage.width / 2, stage.height / 2, 0),
          follow: true
        })
      ]);

    new xyzo(10, stage).addTo(app);
    new lights(stage).addTo(app);

    let ri = new Importer({
      loader: new GLTFLoader(THREE.DefaultLoadingManager),
      url: "bug1.gltf",
      parser(geometry, material) {
        console.log(geometry, material);
        // data from loader
        return new THREE.Mesh(geometry, material); // should return your .native (mesh in this case)
      },
      scale: new THREE.Vector3(10, 10, 10),
      rotation: new THREE.Vector3(Math.PI, 0, 0),
      position: new THREE.Vector3(stage.width / 2, stage.height / 2, 100),
      shadow: { cast: true, receive: false }
    }).addTo(app);
    let rabbit;
    ri.then(r => {
      new Loop(() => {
        r.rotation.z += 0.02;
      }).start(app);
    }).catch(console.error);

    app.start();
  }
};
</script>

<style>
</style>

BasicComponent.js

import {
    Mesh,
    IcosahedronGeometry,
    MeshBasicMaterial
} from 'three';

import { MeshComponent } from 'whs';

export class BasicComponent extends MeshComponent {
    build() {
        return new Mesh(
            new IcosahedronGeometry(3, 5),
            this.applyBridge({
                material: new MeshBasicMaterial({ color: 0x000055 })
            }).material
        )
    }
}

camera.js

import { PerspectiveCamera } from "whs";
import * as THREE from "three";

/**
 * @function camera
 */
function camera(stage = { width: 100, height: 100 }) {
    //console.log(size,plane)
    let distance = ((stage.width + stage.height) * 2) / 7, camera = new PerspectiveCamera({
        camera: { aspect: window.innerWidth / window.innerHeight },
        position: new THREE.Vector3(
            stage.width / 2,
            stage.height / 2,
            distance
        ), far: distance * 2, near: 1//distance / 2
    })
    return camera;
}

export default camera

lights.js

import { Group, AmbientLight, DirectionalLight } from "whs";
import * as THREE from "three";

/**
 * @function lights
 */
function lights(stage = { width: 100, height: 100 }) {
    //console.log(size,plane)
    const distance = ((stage.width + stage.height) * 2) / 7
    let lights = new Group()
    new AmbientLight({
        light: {
            color: 0xffffff,
            intensity: 0.1234
        }
    }).addTo(lights);
    new DirectionalLight({
        light: {
            color: 0xffffff,
            intensity: 1.0
        },
        position: new THREE.Vector3(0, 0, distance),
        target: new THREE.Vector3(0, 0, 0), 
        shadow: {
            cast: true,
            bias: 0,
            radius: 100,
            mapSize: { width: 1024, height: 1024 }
        }
    }).addTo(lights)
    return lights;
}

export default lights

xyzo.js

import {
    Plane,
    Box,
    Sphere,
    Group
} from "whs";
import * as THREE from "three";

/**
 * @function xyzo
 * @param {Number} size Size: Positive Integer
 * @param {JSON} plane {width:Positive Integer, height: Positive Integer}
 */
function xyzo(size = 10, plane = { width: 100, height: 100 }) {
    //console.log(size,plane)
    let xyzo = new Group(), osize = Math.max(4, size / 10);
    new Plane({
        geometry: { width: plane.width, height: plane.height, wSegments: 4, hSegments: 4 },
        material: new THREE.MeshBasicMaterial({ color: 0xffffff }),
        rotation: new THREE.Vector3(0, 0, 0),
        position: new THREE.Vector3(plane.width / 2, plane.height / 2, 0), shadow: { receive: true, cast: false }
    }).addTo(xyzo);
    new Box({
        geometry: { width: osize, height: osize, depth: osize },
        material: new THREE.MeshBasicMaterial({ color: 0x000000 }),
        position: new THREE.Vector3(0, 0, 0), shadow: { receive: false, cast: true }
    }).addTo(xyzo);
    new Sphere({
        geometry: { radius: osize, widthSegments: 16, heightSegments: 16 },
        material: new THREE.MeshBasicMaterial({ color: 0x550000 }),
        position: new THREE.Vector3(size, 0, 0), shadow: { receive: false, cast: true }
    }).addTo(xyzo);
    new Sphere({
        geometry: { radius: osize, widthSegments: 16, heightSegments: 16 },
        material: new THREE.MeshBasicMaterial({ color: 0x005500 }),
        position: new THREE.Vector3(0, size, 0), shadow: { receive: false, cast: true }
    }).addTo(xyzo);
    new Sphere({
        geometry: { radius: osize, widthSegments: 16, heightSegments: 16 },
        material: new THREE.MeshBasicMaterial({ color: 0x000055 }),
        position: new THREE.Vector3(0, 0, size), shadow: { receive: false, cast: true }
    }).addTo(xyzo);
    return xyzo;
}

export default xyzo