1

我有一个“选择文件”按钮，我想用它来加载客户端文件，而不是从第 86 行的 loader.load() 中的服务器路径加载。我猜我需要使用 File API，但还没有想到看看这个解决方案后如何。


在第 86 行从服务器路径加载文件的现有网页：

<!DOCTYPE html>
<html>
<head>
    <style>
    body        {
            background-color:#fea47c;
                }

    div         { 
            position:relative;
            left:200px;           
            top:0px;
            background-color: #eeeeee;
            border:1px solid black;             
            width:550px;
            height:550px;
                }

    canvas      {
            width:550px;
            height:550px;
                }

    input#file      
                {
            position:relative;left:425px;
                }

    </style>
</head>

<body>

<input type="file" name="file" id="file"></input><br><br>   

    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

    <script>            
        var container, camera, scene, renderer, controls;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            var width = container.clientWidth;
            var height = container.clientHeight;

            camera = new THREE.PerspectiveCamera(

            35,                                     // field of view in degrees?
            width / height,                         // canvas based aspect ratio; use when canvas is smaller than page
            .1  ,                                   // distance to nearest side of rendered space
            10000                                   // distance to farthest side of rendered space
                                                );

            camera.position.set( 0, 0, 10);

            scene = new THREE.Scene();

            controls = new THREE.TrackballControls( camera , container); 
            controls.addEventListener( 'change', render );

            // object

            var loader = new THREE.STLLoader();
            loader.addEventListener( 'load', function ( event ) {

                var geometry = event.content;

                var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );

                var mesh = new THREE.Mesh( geometry, material );

                scene.add( mesh );

            } );

            loader.load( 'path to .stl file on server usually goes here' );

            // lights

            scene.add( new THREE.AmbientLight( 0x222222 ) );

            var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
            directionalLight.position = camera.position;
            scene.add( directionalLight );

            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( width , height );
            container.appendChild( renderer.domElement );

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


        }

        function addLight( x, y, z, color, intensity ) {

            var directionalLight = new THREE.DirectionalLight( color, intensity );
            directionalLight.position.set( x, y, z )
            scene.add( directionalLight );

        }

       function onWindowResize() {   

            camera.aspect = width / height;
            camera.updateProjectionMatrix();

            renderer.setSize( width, height );
        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();
            render();

        }

       function render() {

           camera.lookAt( scene.position );
           renderer.render( scene, camera );

       }
    </script>
</body>
</html>
4

1 回答 1

0

脚本在服务器上吗？通常，Web 浏览器不允许 file:// 引用，除非页面本身是 file:// 引用（即使这样，您可能需要设置一些安全/调试标志，根据浏览器而有所不同）。因此，如果您在通过 http:// 访问的页面中运行 webgl 脚本，除非您通过诸如 dropbox 之类的文件服务捎带，否则您可能会很不走运。

于 2012-12-09T03:47:26.083 回答