Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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();
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,