三个js全宽/高无滚动

时间:2017-12-08 20:42:46

标签: html css

我已经在SO中看到了关于调整三个js视口大小的大部分答案,我主要关注它们并且几乎达到最终结果,我的问题是我希望视口占据所有窗口,感觉就像我有一点空白,滚动条 - 我怎么能摆脱它?

this is what i have at the moment:

我现在的代码就是这个:

HTML

<div (window:resize)="onResize($event)" #container></div>

TS

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import * as THREE from 'three';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private container : HTMLElement;

  @ViewChild('container') elementRef: ElementRef;
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private renderer: THREE.WebGLRenderer;

  private cube : THREE.Mesh;

  ngOnInit(){
    this.container = this.elementRef.nativeElement;

    console.log(this.container);

    this.init();
  }

  init(){
    let screen = {
      width  : window.innerWidth,
      height : window.innerHeight
    },
    view = {
      angle  : 45,
      aspect : screen.width / screen.height,
      near   : 0.1,
      far    : 1000
    };

    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(view.angle, view.aspect, view. near, view.far);
    this.renderer = new THREE.WebGLRenderer();

    this.scene.add(this.camera);
    this.scene.add(new THREE.AxisHelper(20));

    this.camera.position.set(10,10,10);
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    this.renderer.setSize(screen.width, screen.height);
    this.container.appendChild(this.renderer.domElement);


    let geometry = new THREE.BoxGeometry(5, 5, 5),
        material = new THREE.MeshBasicMaterial({ color : 0xFFFFFF, wireframe: true });

    this.cube = new THREE.Mesh( geometry, material );
    this.cube.position.set(-50,-50,-50);

    this.scene.add(this.cube);

    this.render();
  }

  render(){

    let self: AppComponent = this;

    (function render(){
      requestAnimationFrame(render);
      self.renderer.render(self.scene, self.camera);

      self.animate();
    }());

  }

  onResize(event) {
    this.renderer.setSize( window.innerWidth, window.innerHeight );
  }

  animate(){
    this.cube.rotateX(0.1);
    this.cube.rotateY(0.1);
    this.cube.position.addScalar(0.2);

  }
}

对此有何帮助? 感谢

0 个答案:

没有答案