在div上定位three.js而不是在html或body上。导致高度差距为2px

时间：2018-02-11 19:41:31

标签： javascript three.js

我知道这是一个愚蠢的问题，但这对我来说很重要，我遇到的第一个问题是当我设置div目标时，我总是在页面底部有2px空间我怎么能解决这个问题

我有这个截图屁股你看到底部有一个瞎子我尝试在高度上添加-2px但是没有工作

enter image description here

的style.css 

.canvas_3d {
    width: calc(100vw - 300px);
    background: purple;
    height: calc(100vh - 2px);
}

的index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div (window:resize)="onResize($event)" id="canvas_3D" class="canvas_3d"></div>
</body>
</html>

app.ts 

// The target 3d container.
  container: any;

  /**
   * The 3D canvas Width & Height
   */
  w: any;
  h: any;

  // Scene, Camera and Rendered variables.
  scene: any;
  camera: any;
  renderer: any;

  constructor() { }

  ngOnInit() {

    this.init3D();
  }

  init3D() {

    this.container = document.getElementById('canvas_3D');

    this.w = this.container.clientWidth - 2;
    this.h = this.container.clientHeight - 2;

    console.log('W: ', this.w);
    console.log('H: ', this.h);


    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 75, this.w / this.h, 0.1, 1000 );

    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize( this.w, this.h );
    this.container.appendChild( this.renderer.domElement );

    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material );
    this.scene.add( cube );

    this.camera.position.z = 5;

    this.createMesh();


    const animate = () => {
      requestAnimationFrame( animate );

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      this.renderer.render(this.scene, this.camera);
    };

    animate();

  }

0 个答案:

没有答案
相关问题
最新问题