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 - 单链路链路交换节点崩溃

javascript - 使用 WebScriptEndpoint 使用 javascript 使用 WCF 服务
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。任何人都可以对此给出任何指导吗？谢谢最佳答案这是一篇关于
c - 没有结果!!使用 fork() 使用 dup2 使用 2 个管道运行 execlp()
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
python - 处理文件上传，使用 Pillow 调整大小，使用 SQLAlchemy 存储，使用 Flask 提供文件
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
excel - 使用 IF 使用 VBA 在单元格中添加公式的问题
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
使用 OperatorPrecedenceParser 使用 FParsec 解析函数应用程序？
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
sql - 使用 sequelize 使用 where 查询编码计数
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
bash - 使用 “let”分配Bash失败，使用 “/”
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
javascript - 使用 JavaScript 使用 FOR OF 数组循环时出现错误？
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。而且我的 jquery 类和 insertadjacentHTMl 也不
javascript - 使用 javascript 使用 for 属性更改表单标签内容
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。这是输入和标签的结构:
javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除按钮。问题是 Delete 按钮在新插入的元素上不起作用，
使用 awk 使用 sha1sum 进行散列
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
mysql - 使用 insert into 使用 mysql
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
jquery - 将输入字段值修剪为仅字母数字字符/使用 .使用 jQuery
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地输
javascript - 使用 .innerHTML 使用 DOM
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。这是一个获取输入值、检查选择
php - 使用 angularjs 使用 where 子句从数据库获取数据
我想使用 angularjs 从 mysql 数据库加载数据。这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上我想获取这个值并通过 angularjs
ios - 使用 UITableViewCell 使用 AutoLayout
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。这就是我想要实现的目标所以在这里你可以看到我正在谈论的
mysql - 使用 ElasticSearch 使用 or 和运算符搜索多个字段
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
ios - 使用 Swift 使用 JSON
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
javascript - 使用 JavaScript 使用 for 循环声明变量
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？现在，在比较 col.1 和
jquery - 使用 :after 使用 jquery 更改样式
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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