Javascript 三个立方体不显示

我试图学习ThreeJS，所以我将该库添加到现有的NextjS项目中。我想在我的首页上看到一个立方体。但我什么也看不见。 渲染器代码为：

import React                from 'react';
import * as THREE           from 'three';

type Props = { initialize: Function };

export default class Renderer extends React.Component<Props, {}> {
    canvas      !: HTMLCanvasElement;
    renderer    !: THREE.WebGLRenderer;
    GLcontext   !: WebGLRenderingContext;

    constructor(props: any) { super(props); }

    componentDidMount() {
        this.canvas        = document.getElementById('default-canvas') as HTMLCanvasElement;
        this.renderer      = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: true });
        this.GLcontext     = this.renderer.getContext();    
                this.renderer.setClearColor ('#000000');  
                this.renderer.setSize       (window.innerWidth, window.innerHeight);

            this.props.initialize   (this.renderer);
            window.addEventListener ('resize', () => { 
                this.renderer.setSize(window.innerWidth, window.innerHeight); });
    }

    render() {
        return(
            <div>
                <canvas id="default-canvas" className="canvas-style" />
            </div>
        );
    }
}

从“React”导入React；
从“三”中导入*作为三；
类型Props={initialize:Function}；
导出默认类渲染器扩展React.Component{
画布！：HTMLCanvasElement；
渲染器！：3.WebGLRenderer；
GLcontext！：WebGLRenderingContext；
构造函数（props:any）{super（props）；}
componentDidMount（）{
this.canvas=document.getElementById（'default-canvas'）作为HTMLCanvasElement；
this.renderer=new THREE.WebGLRenderer（{canvas:this.canvas，antialas:true}）；
this.GLcontext=this.renderer.getContext（）；
this.renderer.setClearColor（'#000000'）；
this.renderer.setSize（window.innerWidth、window.innerHeight）；
this.props.initialize（this.renderer）；
window.addEventListener（'resize'，（）=>{
this.renderer.setSize（window.innerWidth，window.innerHeight）；}）；
}
render（）{
返回(
);
}
}

场景代码是：

import React       from 'react';
import * as THREE  from 'three';
import Renderer    from './renderer';

export default class Scene extends React.Component {
    scene       !: THREE.Scene;
    camera      !: THREE.Camera;

    constructor(props: any) { super(props); 
            this.initialize    = this.initialize.bind(this);
    }

    initialize  (renderer: THREE.WebGLRenderer) {
        this.scene      = new THREE.Scene();
        this.camera     = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
                const geometry = new THREE.BoxGeometry(1, 1, 1);
                const m        = new THREE.MeshStandardMaterial({ color: 0xb300b3 });
                var   cd        = new THREE.Mesh(geometry, m)
                this.scene.add(cd);
                cd.position.x = 0;
                cd.position.y = 0;
                cd.position.z = 0;

                var ambientLight = new THREE.AmbientLight( 0x666666, 1.0 );  
                this.scene.add( ambientLight );

                // Create a white directional light with an intensity of 1.0
                var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
                directionalLight.position.set( 0, 10, 0 );
                this.scene.add( directionalLight );

         renderer.render(this.scene, this.camera);
    }

    render() {
        return(
            <div>
                <Renderer initialize={this.initialize}  />
            </div>
        );
    }
}

从“React”导入React；
从“三”中导入*作为三；
从“./Renderer”导入渲染器；
导出默认类场景扩展React.Component{
场景！：三。场景；
照相机！：三个。照相机；
构造函数（props:any）{super（props）；
this.initialize=this.initialize.bind（this）；
}
初始化（渲染器：3.WebGLRenderer）{
this.scene=新的三个.scene（）；
this.camera=新的三视角摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
const geometry=新的3.BoxGeometry（1,1,1）；
const m=新的3.MeshStandardMaterial（{color:0xb300b3}）；
var cd=新的三网格（几何体，m）
此.scene.add（cd）；
cd.position.x=0；
cd.position.y=0；
cd.position.z=0；
var环境光=新的三个环境光（0x666666，1.0）；
this.scene.add（环境光）；
//创建强度为1.0的白色平行光
var directionalLight=新的三个方向灯（0xffffff，1.0）；
方向灯位置设置（0,10,0）；
this.scene.add（方向光）；
renderer.render（this.scene，this.camera）；
}
render（）{
返回(
);
}
}

---

似乎什么也没发生，我什么也没看到，只是一片空白。我使用NextJS作为我所有项目和typescript的最爱。我正在尝试正确的方法。

摄影机对象也是一个3D对象，默认情况下位于（0,0,0）中。现在它在盒子里。这样你就看不到盒子了。仅添加以下行应该会有所帮助（z值设置为您希望摄影机与长方体之间的距离）：

---

尝试使用

react三纤

（或）

this.camera.position.set(0,0,4)