ThreeJS 立方體未顯示

Question

我正在嘗試學習 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>
        );
    }
}

場景代碼是：

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

似乎沒有任何效果，我看到的只是空盪盪的場景。 我使用 NextJS 作為我所有項目和 typescript 的最愛。 我正在嘗試以正確的方式做到這一點。

Answer 1

相機 object 也是 3D object，默認定位在 (0,0,0)。 目前它在盒子里面。 因此你看不到盒子。 只需添加以下行應該會有所幫助（將 z 值設置為您希望相機與框的距離）：

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