ЛЮБОЕ редактирование в этих трех js образцах сборки заканчивается белым экраном - PullRequest
Новая
       9

ЛЮБОЕ редактирование в этих трех js образцах сборки заканчивается белым экраном

0 голосов
/ 14 июля 2020

Мне дали этот пример проекта сборки, чтобы я мог поиграть с тремя js, поскольку у меня возникли проблемы с тем, чтобы приложение работало как новичок. Я хотел проверить, могу ли я отредактировать проект сборки, поэтому решил добавить еще один куб и переместить его в любом месте по оси x. Однако я заметил, что по неизвестной причине у меня просто продолжает отображаться белый экран.

main. js (добавление куба) 

import {
    BoxBufferGeometry,
    Mesh,
    MeshBasicMaterial,
    PerspectiveCamera,
    Scene,
    WebGLRenderer
} from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;

class App {

    init() {

        camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;

        scene = new Scene();

        const geometry = new BoxBufferGeometry( 200, 200, 200 );
        const material = new MeshBasicMaterial();

        const mesh = new Mesh( geometry, material );
        scene.add(mesh);

        const geometry2 = new BoxBufferGeometry(200, 200, 200);
        const material2 = new MeshBasicMaterial();
        const mesh2 = Mesh(geometry2, material2);
        mesh2.position.y = -3;
        scene.add(mesh2);

        renderer = new WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        window.addEventListener( 'resize', onWindowResize, false );

        const controls = new OrbitControls( camera, renderer.domElement );

        animate();

    }

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

export { App }

Поправьте меня, если то, что я сделал, было неправильным , но я запустил следующее, чтобы протестировать приложение. npm install для модулей npm. npm run build для обновления сборки. js

Я проверил консоль, и была показана следующая ошибка: Консоль браузера

Я также пробовал просто изменить материал куба, используя приведенный ниже код.

main. js (изменение материала) 

import {
    BoxBufferGeometry,
    Mesh,
    MeshLambertMaterial,
    PerspectiveCamera,
    Scene,
    WebGLRenderer
} from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;

class App {

    init() {

        camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;

        scene = new Scene();

        const geometry = new BoxBufferGeometry( 200, 200, 200 );
        const material = new MeshLambertMaterial();

        const mesh = new Mesh( geometry, material );
        scene.add(mesh);


        renderer = new WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        window.addEventListener( 'resize', onWindowResize, false );

        const controls = new OrbitControls( camera, renderer.domElement );

        animate();

    }

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

export { App }

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

Что-то не так с тем, как я создаю проект после редактирования?

...