陣營three.js所使在場景中的對象時，類似於畫布大小

Question

圖像中的上述canvas是大但scene小。如何使scene或scene中的3D對象變大並且可能匹配canvas的高度和寬度？

代碼：

import React, { Component } from 'react'; 
import React3 from 'react-three-renderer'; 
import * as THREE from 'three'; 

class Graph3D extends Component { 
    constructor(props, context) { 
     super(props, context); 

     this.cameraPosition = new THREE.Vector3(0, 0, 5); 

     this.state = { 
      origin: new THREE.Vector3(0, 0, 0), 

      vector1: new THREE.Vector3(0, 0.5, 0.5), 
      vector2: new THREE.Vector3(0.2, 0.3, 0.1), 
      vector3: new THREE.Vector3(0.2, 0.4, 0.1), 
      vector4: new THREE.Vector3(0.6, 0.8, 0), 
      vector5: new THREE.Vector3(0.9, 0.9, 0.9), 
      vector6: new THREE.Vector3(0.2, 0.8, 0.9), 
     }; 
    } 

    render() { 
     const width = window.innerWidth; // canvas width 
     const height = window.innerHeight; // canvas height 

     return (<React3 
      mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below 
      width={width} 
      height={height} 
      clearColor={'#ffffff'} 
     > 
      <scene> 
       <perspectiveCamera 
        name="camera" 
        fov={75} 
        aspect={width/height} 
        near={0.1} 
        far={1000} 

        position={this.cameraPosition} 
       /> 

       <arrowHelper 
        origin={this.state.origin} 
        dir={this.state.vector1} 
       /> 

       <arrowHelper 
        origin={this.state.origin} 
        dir={this.state.vector2} 
       /> 

       <arrowHelper 
        origin={this.state.origin} 
        dir={this.state.vector3} 
       /> 

       <arrowHelper 
        origin={this.state.origin} 
        dir={this.state.vector4} 
       /> 
       <arrowHelper 
        origin={this.state.origin} 
        dir={this.state.vector5} 
       /> 
       <arrowHelper 
        origin={this.state.origin} 
        dir={this.state.vector6} 
       /> 

      </scene> 
     </React3>); 
    } 
} 

隨着canvas上面這段代碼獲取screen的尺寸，但由於某種原因，我所有的arrowHelpers和我scene小的比較。

如何讓它們變大？

我試着給我的Vectors分配較大的值，但是沒有幫助。

Answer 1

嘗試移動攝像機拉近到現場：

this.cameraPosition = new THREE.Vector3(0, 0, 2); 

您也可以使箭長。之所以不分配較大的值是因爲它們只是方向載體。 ArrowHelper還有第三個可選參數，即箭頭的長度：

<arrowHelper 
    origin={this.state.origin} 
    dir={this.state.vector3} 
    length={2} 
/>