相机自动旋转threejs

Question

当我在threejs中遇到任何障碍物时，如何使相机自动旋转。我参考了以下链接 http://threejs.live/#/webgl_raymarching_reflect 当遇到任何障碍物时，渲染重新开始。我尝试在我的项目中实施，但这不起作用。我如何在我的项目中实现它？

我的 map.ts 代码是

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) => {
      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 > 0) {
      parent.children.forEach((i) => {
        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();
  }

而map.html是

<canvas #canvas (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)"></canvas>

Answer 1

使用来自三个 js 实用程序的碰撞检测 也使用来自这个堆栈线程的引用 https://stackoverflow.com/a/11480717/16768028