Три JS куб не показывает - PullRequest
Новая
       16

Три JS куб не показывает

1 голос
/ 27 апреля 2020

Я пытаюсь выучить три JS, поэтому я добавил библиотеку в существующий проект Next jS. Я хотел видеть куб на моей главной странице. но я ничего не вижу Код рендерера: 

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

, кажется, ничего не работает, я не вижу ничего, только пустая сцена. Я использую Next JS как мой любимый для всех моих проектов и машинописи. Я пытаюсь сделать это правильно.

1 Ответ

2 голосов
/ 29 апреля 2020

Объект камеры также является трехмерным объектом и по умолчанию располагается в (0,0,0). На данный момент это внутри коробки. Таким образом, вы не можете видеть коробку. Простое добавление следующей строки должно помочь (со значением z, установленным на расстояние, которое вы хотите, чтобы камера находилась в поле): 

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