title: Camera Autorotate threejs
body: <p>How can I make camera to autorotate when i hit any obstacle in threejs.  I referred the following link
  <a href="http://threejs.live/#/webgl_raymarching_reflect" rel="nofollow noreferrer">http://threejs.live/#/webgl_raymarching_reflect</a>
  where the rendering restarts when it hits any obstacle.  I tried implementing in my project but that doesn't works. How can i implement that in my project?</p>
  
  <p>My map.ts code is</p>
  
  <pre><code>private renderer: THREE.WebGLRenderer;
    private camera: THREE.PerspectiveCamera;
    public scene: THREE.Scene;
  
    public fieldOfView: number = 10;
    public nearClippingPane: number = 1;
    public farClippingPane: number = 1000;
  
    public controls: THREE.OrbitControls;
  
  
    @ViewChild('canvas')
    private canvasRef: ElementRef;
  
    constructor(public loadingCtrl: LoadingController) {
  
      this.render = this.render.bind(this);
      this.onModelLoadingCompleted = this.onModelLoadingCompleted.bind(this);
  
    }
  
  
    private get canvas(): HTMLCanvasElement {
      return this.canvasRef.nativeElement;
    }
  
    private createScene() {
      this.scene = new THREE.Scene();
      var loader = new THREE.ColladaLoader();
      loader.load('assets/Buildings/Block.DAE', this.onModelLoadingCompleted);
  
    }
  
    private onModelLoadingCompleted(collada) {
       const loading = this.loadingCtrl.create({
        content:'Loading Please Wait...'
      });
      loading.present();
  
      var modelScene = collada.scene;
       modelScene.rotation.x = -0.01 * Math.PI;
      // modelScene.rotation.z = 0.03 * Math.PI;
      this.scene.add(modelScene);
  
      loading.dismiss();
      this.render();
    }
  
    private createCamera() {
      let aspectRatio = this.getAspectRatio();
      this.camera = new THREE.PerspectiveCamera(
        this.fieldOfView,
        aspectRatio,
        this.nearClippingPane,
        this.farClippingPane
      );
  
      // Set position and look at
      this.camera.position.x = 1;
      this.camera.position.y = 0.4;
      this.camera.position.z = 16;
    }
  
    private createLight(){
      var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
          this.scene.add( ambientLight );
          var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
          directionalLight.position.set( 1, 1, 0 ).normalize();
          this.scene.add( directionalLight );
  
    }
  
    private getAspectRatio(): number {
      let height = this.canvas.clientHeight;
      if (height === 0) {
        return 0;
      }
      this.canvas.style.width = "100%";
      this.canvas.style.height = "100%";
      return this.canvas.clientWidth / this.canvas.clientHeight;
    }
  
    private startRendering() {
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        antialias: true
      });
      this.renderer.setPixelRatio(devicePixelRatio);
      this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
  
      this.renderer.shadowMap.enabled = true;
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      this.renderer.setClearColor(0xffffff, 1);
      this.renderer.autoClear = true;
  
      let component: MapComponent = this;
  
      (function render() {
        requestAnimationFrame(render);
        component.render();
      }());
    }
  
    public render() {
  
      this.renderer.render(this.scene, this.camera);
  
    }
  
    public addControls() {
      this.controls = new THREE.OrbitControls(this.camera);
      this.controls.rotateSpeed = 1.0;
      this.controls.zoomSpeed = 1.2;
      this.controls.addEventListener('change', this.render);
  
    }
  
    /* EVENTS */
  
    public onMouseDown(event: MouseEvent) {
      console.log("onMouseDown");
      event.preventDefault();
  
      // Example of mesh selection/pick:
      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();
      mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;
      mouse.y = - (event.clientY / this.renderer.domElement.clientHeight) * 2 + 1;
      raycaster.setFromCamera(mouse, this.camera);
  
      var obj: THREE.Object3D[] = [];
      this.findAllObjects(obj, this.scene);
      var intersects = raycaster.intersectObjects(obj);
      console.log("Scene has " + obj.length + " objects");
      console.log(intersects.length + " intersected objects found")
      intersects.forEach((i) =&gt; {
        console.log(i.object); // do what you want to do with object
      });
  
    }
  
    private findAllObjects(pred: THREE.Object3D[], parent: THREE.Object3D) {
      // NOTE: Better to keep separate array of selected objects
      if (parent.children.length &gt; 0) {
        parent.children.forEach((i) =&gt; {
          pred.push(i);
          this.findAllObjects(pred, i);
        });
      }
    }
  
    public onMouseUp(event: MouseEvent) {
      console.log("onMouseUp");
    }
  
  
    @HostListener('window:resize', ['$event'])
    public onResize(event: Event) {
  
      this.canvas.style.width = "100%";
      this.canvas.style.height = "100%";
      console.log("onResize: " + this.canvas.clientWidth + ", " + this.canvas.clientHeight);
  
      this.camera.aspect = this.getAspectRatio();
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
      this.render();
  
    }
  
  
    @HostListener('document:keypress', ['$event'])
    public onKeyPress(event: KeyboardEvent) {
      console.log("onKeyPress: " + event.key);
    }
  
  
    /* LIFECYCLE */
    ngAfterViewInit() {
      this.createScene();
      this.createCamera();
      this.createLight();
      this.startRendering();
      this.addControls();
    }
  </code></pre>
  
  <p>And map.html is</p>
  
  <pre><code>&lt;canvas #canvas (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)"&gt;&lt;/canvas&gt;
  </code></pre>