阵营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} 
/>