javascript - 为什么 FileReader 不将文件传递给 three.js 场景使用的 loader.load()？-6ren

javascript - 为什么 FileReader 不将文件传递给 three.js 场景使用的 loader.load()？

转载作者：行者123 更新时间：2023-11-30 18:13:51

我正在尝试使用 FileReader 将客户端 ASCII 文件传递给 loader.load()，但看起来文件永远不会到达那里。如果我使用 loader.load('server path to test_file.STL') 而不是 loader.load(fileObject)，文件会出现在 3D 场景中。

我包含了一个 alert() 函数来显示文件的 ASCII 文本，它告诉我 JavaScript 正在抓取和处理文件并且没有 Chrome 安全屏障，但显然我没有正确地将文件传递给 loader .load()。

<!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;
                }
</style>
</head>

<body>

<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> 

<input type="file" id="pickfile"></input>

<script> 

   document.getElementById('pickfile').addEventListener('change', readFile, false);

    function readFile (evt) 
                {
    var fileObject = evt.target.files[0];    
    var reader = new FileReader();
    reader.onload = function() {alert(this.result)};    // verifies ASCII file contents were grabbed
    reader.readAsText(fileObject)
                }

        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, width / height, .1 , 10000);

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

            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(fileObject);

            // 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>

最佳答案

好吧，我今天早上又试了一次，我认为问题是我试图从一个糟糕的相机 Angular 或其他什么 Angular 查看加载的结果...无论如何，这是一个基于 https://raw.github.com/mrdoob/three.js/master/examples/webgl_loader_stl.html 的示例

关键部分:

就像我上面提到的，loader.load 没有任何重载会占用文件的实际内容(认为它会这样做有点傻)。它只会为文件占用一个位置...您需要一些东西来从文件内容创建您的模型。那将是 loader.parse。

例如，以下处理程序将您的模型添加到 scene 在 readFile 范围内的场景:

function readFile(evt)
{
    var fileObject = evt.target.files[0];
    var reader = new FileReader();
    reader.onload = function ()
    {
        var loader = new THREE.STLLoader();
        //alert(this.result)
        var geometry = loader.parse(this.result);
        var material = new THREE.MeshPhongMaterial(
        {
            ambient: 0xff5533,
            color: 0xff5533,
            specular: 0x111111,
            shininess: 200
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add(mesh);
    };
    reader.readAsText(fileObject)
}

整个例子:

我会把它放在网上的某个地方，但是因为它使用 github 来托管一些脚本等。这可能不是最好的主意。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: Monospace;
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #pickfile {
                color: #fff;
                position: absolute;
                top: 40px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            a {
                color: skyblue
            }
        </style>
    </head>

    <body>
        <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 src="https://raw.github.com/mrdoob/three.js/master/examples/js/Detector.js"></script>
        <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
        <input type="file" id="pickfile"></input>
        <script>
            document.getElementById('pickfile').addEventListener('change', readFile, false);

            function readFile(evt)
            {
                var fileObject = evt.target.files[0];
                var reader = new FileReader();
                reader.onload = function ()
                {
                    var loader = new THREE.STLLoader();
                    //alert(this.result)
                    var geometry = loader.parse(this.result);
                    var material = new THREE.MeshPhongMaterial(
                    {
                        ambient: 0xff5533,
                        color: 0xff5533,
                        specular: 0x111111,
                        shininess: 200
                    });
                    var mesh = new THREE.Mesh(geometry, material);
                    mesh.castShadow = true;
                    mesh.receiveShadow = true;
                    scene.add(mesh);
                }; 
                reader.readAsText(fileObject)
            }
            if (!Detector.webgl) Detector.addGetWebGLMessage();
            var container, stats;
            var camera, scene, renderer, objects;
            init();
            animate();

            function init()
            {
                container = document.createElement('div');
                document.body.appendChild(container);
                camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
                camera.position.set(3, 0.5, 3);
                scene = new THREE.Scene();
                scene.fog = new THREE.Fog(0xffffff, 2, 15);
                scene.fog.color.setHSV(0.06, 0.2, 0.45);
                // Grid
                var size = 20,
                    step = 0.25;
                var geometry = new THREE.Geometry();
                var material = new THREE.LineBasicMaterial(
                {
                    color: 0x000000
                });
                for (var i = -size; i <= size; i += step)
                {
                    geometry.vertices.push(new THREE.Vector3(-size, -0.04, i));
                    geometry.vertices.push(new THREE.Vector3(size, -0.04, i));
                    geometry.vertices.push(new THREE.Vector3(i, -0.04, -size));
                    geometry.vertices.push(new THREE.Vector3(i, -0.04, size));
                }
                var line = new THREE.Line(geometry, material, THREE.LinePieces);
                line.position.y = -0.46;
                scene.add(line);
                // Ground
                var plane = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshPhongMaterial(
                {
                    ambient: 0x999999,
                    color: 0x999999,
                    specular: 0x101010
                }));
                plane.rotation.x = -Math.PI / 2;
                plane.position.y = -0.5;
                scene.add(plane);
                plane.receiveShadow = true;
                // Object
                // Lights
                scene.add(new THREE.AmbientLight(0x777777));
                addShadowedLight(1, 1, 1, 0xffffff, 1.35);
                addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
                // renderer
                renderer = new THREE.WebGLRenderer(
                {
                    antialias: true,
                    clearColor: 0x111111,
                    clearAlpha: 1,
                    alpha: false
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(scene.fog.color, 1);
                renderer.gammaInput = true;
                renderer.gammaOutput = true;
                renderer.physicallyBasedShading = true;
                renderer.shadowMapEnabled = true;
                renderer.shadowMapCullFrontFaces = false;
                container.appendChild(renderer.domElement);
                // stats
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild(stats.domElement);
                //
                window.addEventListener('resize', onWindowResize, false);
            }

            function addShadowedLight(x, y, z, color, intensity)
            {
                var directionalLight = new THREE.DirectionalLight(color, intensity);
                directionalLight.position.set(x, y, z)
                scene.add(directionalLight);
                directionalLight.castShadow = true;
                //directionalLight.shadowCameraVisible = true;
                var d = 1;
                directionalLight.shadowCameraLeft = -d;
                directionalLight.shadowCameraRight = d;
                directionalLight.shadowCameraTop = d;
                directionalLight.shadowCameraBottom = -d;
                directionalLight.shadowCameraNear = 1;
                directionalLight.shadowCameraFar = 4;
                directionalLight.shadowMapWidth = 2048;
                directionalLight.shadowMapHeight = 2048;
                directionalLight.shadowBias = -0.005;
                directionalLight.shadowDarkness = 0.15;
            }

            function onWindowResize()
            {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
            //
            function animate()
            {
                requestAnimationFrame(animate);
                render();
                stats.update();
            }

            function render()
            {
                var timer = Date.now() * 0.0005;
                camera.position.x = Math.cos(timer) * 5;
                camera.position.z = Math.sin(timer) * 5;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
            }
        </script>
    </body>
</html>

关于javascript - 为什么 FileReader 不将文件传递给 three.js 场景使用的 loader.load()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13853301/

文章推荐： c - 使用 execlp() 从字符串运行 shell 命令

文章推荐： c - C中的指针函数不起作用

文章推荐： c# - 根据 QnAMaker 中的输入对结果进行排名

文章推荐： c - 单链路链路交换节点崩溃

java - 使用 Parcelable 传递 Arraylist，传递 null
Github:https://github.com/jjvang/PassIntentDemo 我一直在关注有关按 Intent 传递对象的教程:https://www.javacodegeeks.c
c# - 试图让我的文本字段在按下按钮时作为 FormCollection 传递，但 FormCollection 以 null 传递
我有一个 View ，其中包含自动生成的 text 类型的 input 框。当我单击“通过电子邮件发送结果”按钮时，代码会将您带到 CalculatedResults Controller 中的 Em
docker - 传递--env变量现在可以与ENTRYPOINT一起使用
我有一个基本的docker镜像，我将以此为基础构建自己的镜像。我没有基础镜像的Dockerfile。基本上，基本镜像使用两个--env arg，一个接受其许可证，一个选择在容器中激活哪个框架。我可以
f# - 传递 ** 作为参数
假设我想计算 2^n 的总和，n 范围从 0 到 100。我可以编写以下内容: seq { 0 .. 100 } |> Seq.sumBy ((**) 2I) 但是，这与 (*) 或其他运算符/函数不
php 传递 URL
我有这个网址: http://www.example.com/get_url.php?ID=100&Link=http://www.test.com/page.php?l=1&m=7 当我打印 $_G
javascript - 传递 createObjectURL
我想将 window.URL.createObjectURL(file) 创建的地址传递给 dancer.js 但我得到 GET blob:http%3A//localhost/b847c5cd-aa
C++ 传递 typedef
我想知道如何将 typedef 传递给函数。例如: typedef int box[3][3]; box empty, *board[3][3]; 我如何将 board 传递给函数？我
ios - 传递 NSManagedObject
我正在将一些代码从我的 Controller 移动到核心数据应用程序中的模型。我编写了一个方法，该方法为我定期发出的特定获取请求返回 NSManagedObjectID。 + (NSManagedO
javascript - 将类型化数组作为 any[] 传递？
为什么我不能将类型化数组传递到采用 any[] 的函数/构造函数中？ typedArray = new MyType[ ... ]; items = new ko.observableArray(ty
javascript - 传递 "this"作为参数
我是一名新的 Web 开发人员，正在学习 html5 和 javascript。我有一个带有“选项卡”的网页，可以使网页的某些部分消失并重新出现。链接如下: HOME 和 JavaScript 函
c# - 将代码作为参数C#传递
我试图将对函数的引用作为参数传递很难解释我会写一些伪代码示例 (calling function) function(hello()); function(pass) { if this =
c# - 传递 DataTypeEnum
我在尝试调用我正在创建的 C# 项目中的函数时遇到以下错误: System.Runtime.InteropServices.COMException: Operation is not allowed
linux - 传递\*作为参数的参数
使用 ksh。尝试重用当前脚本而不修改它，基本上可以归结为如下内容: `expr 5 $1 $2` 如何将乘法命令 (*) 作为参数 $1 传递？我首先尝试使用“*”，甚至是\*，但没有用。我尝试
Java - 传递 "this"时在对象属性中获取空值
我一直在研究“Play for Java”这本书，这本书非常棒。我对 Java 还是很陌生，但我一直在关注这些示例，我有点卡在第 3 章上了。可以在此处找到代码:Play for Java on Gi
javascript - js中的函数按值或引用复制/传递
我知道 Javascript 中的对象是通过引用复制/传递的。但是函数呢？当我跳到一些令人困惑的地方时，我正在尝试这段代码。这是代码片段: x = function() { console.log(
python - 传递 !, !=, ~, <, > 作为参数
我希望能够像这样传递参数: fn(a>=b) or fn(a!=b) 我在 DjangoORM 和 SQLAlchemy 中看到了这种行为，但我不知道如何实现它。最佳答案 ORM 使用 specia
javascript - 更新依赖会破坏另一个正在使用它的依赖(传递)
在我的 Angular 项目中，我最近将 rxjs 升级到版本 6。现在，来自 npm 的模块(在 node_modules 文件夹内)由于一些破坏性更改而失败(旧的进口不再有效)。我为我的代码调整了
c - 传递 `*` 时命令行参数编号不正确
这个问题在这里已经有了答案: The issue of * in Command line argument (6 个答案) 关闭 3 年前。我正在编写一个关于反向波兰表示法的 C 程序，它通过命
javascript - 传递 $(this) 作为参数？
$(document).ready(function() { function GetDeals() { alert($(this).attr("id")); } $('.filter
perl中子程序中参数的两种引用(传递)方式介绍
下面是一个例子：复制代码代码如下: use strict; #这里是两个数组 my @i =('1','2','3'); my @j =('a','b','c'); &n

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么 FileReader 不将文件传递给 three.js 场景使用的 loader.load()？