React Three.js使场景中的对象更大，类似于画布大小

Question

上图中的print "Hi there!\n" 很大，但canvas很小。如何使scene中的scene或3D对象更大，并且可能与scene的高度和宽度相匹配？

代码：

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分配更大的值，但这并没有帮助。

Answer 1

尝试将相机移近场景：

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

您还可以延长箭头。它无法分配更大值的原因是它们只是方向向量。 ArrowHelper有第三个可选参数，即箭头的长度：

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