How to use camera-controls - 2 common examples

To help you get started, we’ve selected a few camera-controls examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pixiv / three-vrm / examples / react / src / index.tsx View on Github external
public componentDidMount () {

    this.renderer = new THREE.WebGLRenderer({canvas: this.canvas!, antialias: true});
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setClearColor(0xFFFFFF,1.0);
    this.cameraControls = new CameraControls(this.camera, this.renderer.domElement)

    this.directionalLight.position.set(20, 20, -20);
    this.scene.add(new THREE.AxesHelper(3));
    this.scene.add(new THREE.GridHelper(10, 10))
    this.scene.add(this.directionalLight);

    this.loadVRM("../models/shino.vrm").then( (vrm: VRM) => {
      this.clock.start()
      this.animate()
    }).catch(console.error)

    window.addEventListener('resize', () => {
      this.renderer!.setPixelRatio(window.devicePixelRatio);
      this.renderer!.setSize(window.innerWidth, window.innerHeight);
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
github pixiv / three-vrm / examples / react / src / index.tsx View on Github external
import CameraControls from "camera-controls";
import * as React from "react";
import { render } from "react-dom";
import * as THREE from "three";
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DebugOption, VRM, VRMDebug } from "../../..";
import * as Action from "./components";

CameraControls.install( { THREE } );

class App extends React.Component<{}, { vrmId: string | null }> {

  private canvas?: HTMLCanvasElement | null
  private vrm?: VRM | null
  private vrmPath?: string | null
  private clock: THREE.Clock = new THREE.Clock()
  private scene: THREE.Scene = new THREE.Scene()
  private renderer?: THREE.WebGLRenderer
  private camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.25, 1000);
  private directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.0);
  private cameraControls?: CameraControls
  private debug: boolean = false
  private debugOption : DebugOption = {
    disableRightEyeDirectionHelper: false,
    disableLeftEyeDirectionHelper: false,

camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

MIT
Latest version published 3 months ago

Package Health Score

88 / 100
Full package analysis

Popular camera-controls functions