通过 Three.js 加载 3d 模型

Question

我已经开始接触 Three.js 并且一直无法加载 gltf 文件。我已经设法修复了所有错误，但我的模型仍然没有出现在我的页面上。这是我的代码：

function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);


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

        /*
        let geometry = new THREE.BoxGeometry();
        let material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
        cube = new THREE.Mesh( geometry, material );
        scene.add( cube );*/

        var loader = new GLTFLoader();

        loader.load(
            // resource URL
            'models/eevee/eevee.gltf',
            // called when the resource is loaded
            function ( gltf ) {

                let object = gltf.scene.children[0];
                object.scale.set(0.1,0.1,0.1);
                object.position.set(0, -10, -0.75);

                scene.add( object );

                renderer.render(scene, camera);

            },
            // called while loading is progressing
            function ( xhr ) {

                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

            },
            // called when loading has errors
            function ( error ) {

                console.log( 'An error happened' );
                console.log(error)

            }
        );

        camera.position.z = 5;

        window.addEventListener('resize', onWindowResize);

    }

正如我所说，没有出现错误，但 3d 模型没有显示在我的页面上。

Answer 1

它对我来说很好，我只是添加了一个环境光，设置相机位置并将“三”添加到：var loader = new THREE.GLTFLoader();

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

    light = new THREE.AmbientLight(0xffffff); 
    scene.add(light);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.set(150, 180, 280);

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

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

    var loader = new THREE.GLTFLoader();

    loader.load(
        'assets/models/gltf/street_car.glb',
        function ( gltf ) {
            let object = gltf.scene.children[0];
            object.scale.set(100,100,100);
            object.position.set(0, 0, 0);
            scene.add( object );
            renderer.render(scene, camera);
        },
        function ( xhr ) {
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            console.log( 'An error happened' );
            console.log(error)
        }
    );
    camera.position.z = 5;
    window.addEventListener('resize', onWindowResize);
}

init();