相机自动旋转threejs

Posted 2023-02-27

【中文标题】相机自动旋转threejs

【英文标题】：Camera Autorotate threejs

【发布时间】：2018-08-30 15:59:19

【问题描述】：

当我在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>

【问题讨论】：

您能否澄清一下您在“不起作用”之外的问题？您在检测碰撞时遇到问题吗？旋转相机？您的代码不是孤立运行的，因此我们无法轻松重现。 JSFiddle 或 Codepen 通常很有帮助。

我在检测碰撞和旋转相机方面都陷入了困境。我需要按照以下链接旋转我的相机 [blackshell.usebox.net/pub/canvas-raycasting/] 如何使用threejs 来实现。您能否帮助我使用threejs中用于检测碰撞和旋转相机的组件？ @Don McCurdy

【参考方案1】：

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