Javascript 拖放上载任何对象文件并以3JS格式显示_Javascript_Html_Three.js

Javascript 拖放上载任何对象文件并以3JS格式显示

javascript html three.js

Javascript 拖放上载任何对象文件并以3JS格式显示,javascript,html,three.js,Javascript,Html,Three.js,我想加载任何类型的对象文件，并用浏览器端的js库显示它。我已经包括了一个html的基本模板，其中包括一个带有上传按钮的拖放框，以及一个用threejs（由three提供）显示基本几何图形的div 我在这里遗漏了什么吗？我认为您必须使用loader.parse而不是loader.load。您正在手动加载该文件，只需对其进行解析。@EthanHermsey，谢谢。我的问题是，对象需要采用json格式。那么我需要将文件和对象文件类型转换为json吗？我不这么认为。您应该能够以Arraybuffer（实

我想加载任何类型的对象文件，并用浏览器端的js库显示它。我已经包括了一个html的基本模板，其中包括一个带有上传按钮的拖放框，以及一个用threejs（由three提供）显示基本几何图形的div

我在这里遗漏了什么吗？

我认为您必须使用loader.parse而不是loader.load。您正在手动加载该文件，只需对其进行解析。@EthanHermsey，谢谢。我的问题是，对象需要采用json格式。那么我需要将文件和对象文件类型转换为json吗？我不这么认为。您应该能够以Arraybuffer（实际上是原始文件）的形式加载GLB文件，并将其作为.parse（）中的第一个参数传入。

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>

        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="index.css">
    </head>
    <body>

        <div class="container">

            
                <div class="form-group files">
                    <input type="file" class="form-control" multiple="">
                </div>

        </div>

        <div class="container">
            <div class='showObject'>
                <script>
                    function gotFile(file) {
                        var object = new Object();

                        object.onload = function () {
                        document.body.appendChild(this);
                        };

                        object.src = file.data;
                    }
                </script>
                <script src="js/three.js"></script>
                <script>
                    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 );
        
                    const geometry = new THREE.BoxGeometry();
                    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                    const cube = new THREE.Mesh( geometry, material );
                    scene.add( cube );
        
                    camera.position.z = 5;
        
                    const animate = function () {
                        requestAnimationFrame( animate );
        
                        cube.rotation.x += 0.01;
                        cube.rotation.y += 0.01;
        
                        renderer.render( scene, camera );
                    };
        
                    animate();
                </script>

            </div>
        </div>
        
    </body>
</html>

const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );