尝试在本地使用 OBJLoader 加载对象 |三.js

问题描述 投票：0回答：1

我正在使用 

.obj
文件测试 Three.js 如何处理网页中的 3D 对象，我正在使用 OBJLoader 将 obj 文件加载到 HTML 视图中。然而，我似乎无法让 OBJLoader 工作，我也尝试了不同的加载器，但没有成功。

我正在使用 Visual Studio Code 及其名为 Live Server 的扩展来托管我的本地文件。

我用搅拌机将 

.stl
文件转换为 
.obj
文件。

这是我从 Three.js 中遵循的文档。 （我还没有导入 objloader.js 文件，因为我不明白应该如何导入它。） https://trijs.org/docs/#examples/en/loaders/OBJLoader

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three.js APP</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            const loader = new OBJLoader();
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            loader.load(
                'models/car.obj',
                function ( object ) {
                    scene.add( object );
                },
                function ( xhr ) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },
                function ( error ) {
                    console.log( 'An error happened' );
                }
            );
        </script>
    </body>
</html>
javascript three.js
1个回答
0
投票

看一下实际的 OBJLoader 示例。它使用导入而不是从脚本标签引用 JS 文件，但代码中的用法没有改变。

还要确保在场景中添加灯光，否则对象将不会被照亮，并且在黑色背景下会呈黑色。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.