我已经在SO中看到了关于调整三个js视口大小的大部分答案,我主要关注它们并且几乎达到最终结果,我的问题是我希望视口占据所有窗口,感觉就像我有一点空白,滚动条 - 我怎么能摆脱它?
我现在的代码就是这个:
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);
}
}
对此有何帮助? 感谢