CameraComponent

core / CameraComponent.js

CameraComponent wraps classes based on THREE.Camera (such as THREE.PerspectiveCamera). CameraComponent offers main functionality for working with camera and extends properties that you can define before executing camera.

Usage with existing Three.js camera.

That's how you can make a WHS.Element from a three.js light:

JavaScript

const ball = new WHS.Element(
  new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    1000
  ),
  [WHS.CameraComponent]
);

3D Transforms

See 3D transforms page for more details about CameraComponent 3d transform methods/attributes.

Making a Light Component

JavaScript

import * as THREE from 'three';

// Basic component class.
import {Component} from 'whs/lib/core/Component';
// Decorator for THREE.Mesh for component class.
import CameraComponent from 'whs/lib/core/CameraComponent';
// Some utils that should help.
import {extend, loadMaterial} from 'whs/lib/utils/index';

@CameraComponent
class BasicCamera extends Component {
  constructor(params = {}) {
    super(params, BasicCamera.defaults);

    // Defaults.
    extend(params, {
      near: 1
      far: 1000
    });

    if (params.build) { // params.build is "true" by default. (@CameraComponent)
      this.build(params);
      // Apply position & rotation, scale ...
      super.wrap();
    }
  }

  build(params = {}) {
    return new Promise((resolve) => {
      this.native = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight
        params.near
        params.intensity
      );

      resolve();
    });
  }

  clone() {
    return new BasicCamera({build: false}).copy(this);
  }
}

export {
  BasicCamera
};