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

您还可以使箭头更长。分配较大值不起作用的原因是它们只是 direction 向量。 ArrowHelper 的第三个可选参数是箭头的长度：

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