React Three.js font des objets en plus grande scène, semblable à la taille de la toile

Question

Le canvas dans l'image ci-dessus est grande, mais la scene petite. Comment est-ce que je peux faire le scene ou les objets 3D dans le scene plus grand et peut-être assortir la taille et la largeur du canvas?

code:

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>); 
    } 
} 

Avec ce code au-dessus du canvas obtient la taille de la screen mais pour une raison tout mon arrowHelpers et mon scene sont petites en comparaison.

Comment les agrandir?

J'ai essayé d'attribuer des valeurs plus grandes à mon Vectors mais cela n'a pas aidé.

Answer 1

Essayez de déplacer la caméra plus proche de la scène:

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

Vous pouvez également faire les flèches plus. La raison pour laquelle cela n'a pas fonctionné pour assigner des valeurs plus grandes est qu'elles sont seulement direction vecteurs. Il y a un troisième argument optionnel pour ArrowHelper qui est la longueur de la flèche:

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