当前位置： 文江博客话题详情

将我的对象放入列表后，ThreeJs 不会渲染它们

发布于 2025-01-14 02:57:39 字数 4079 浏览 1 评论 0原文

所以我有一些代码，当我重构时它不再显示任何内容。我在控制台中没有收到任何错误，所以我真的没有什么可继续的。据我所知，这段代码应该产生与工作实例相同的输出，但事实并非如此。这是损坏的代码。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script src="http://threejs.org/build/three.min.js"></script>
<script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

var objects = [
{
    name : "earth",
    geometry : new THREE.SphereGeometry(1, 32, 32),
    material : new THREE.MeshPhongMaterial(),
    mesh : new THREE.Mesh(this.geometry, this.material),
    init : function(scene){
    console.log("Wtf");
    this.mesh.position.set(0,0,0);
    //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
    scene.add(this.mesh);
    console.log("ugh");
    },
    animate : function(t){this.mesh.position.set(0+t/100,0+t/100,0+t/100);}
},
{
    name : "satellite",
    geometry : new THREE.SphereGeometry(0.1, 32, 32),
    material : new THREE.MeshPhongMaterial(),
    mesh : new THREE.Mesh(this.geometry, this.material),
    init : function(scene){
    console.log("Wtf");
    this.mesh.position.set(1.5,0,0);
    //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
    scene.add(this.mesh);
    console.log("ugh");
    },
    animate : function(t){this.mesh.position.set(1.5+t/100,0+t/100,0+t/100);}
}];
objects.forEach(object => object.init(scene));

var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);

camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3( 0, 0, 0));

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
}

render();
</script>
</body>
</html>

这是工作示例。

        <!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
        
        <script src="http://threejs.org/build/three.min.js"></script>
        
        <script>var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

        
        var earth_geometry = new THREE.SphereGeometry(1, 32, 32);
        var earth_material = new THREE.MeshPhongMaterial();
        var earth_mesh = new THREE.Mesh(earth_geometry, earth_material);
        earth_mesh.position.set(0,0,0);
        //earth_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
        scene.add(earth_mesh);
        

        var satellite_geometry = new THREE.SphereGeometry(0.1, 32, 32);
        var satellite_material = new THREE.MeshPhongMaterial();
        var satellite_mesh = new THREE.Mesh(satellite_geometry, satellite_material);
        satellite_mesh.position.set(1.5,0,0);
        //satellite_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
        scene.add(satellite_mesh);
        
        
        var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
        scene.add(light);
        
        camera.position.x = 0;
        camera.position.y = -5;
        camera.position.z = 0;
        camera.lookAt(new THREE.Vector3( 0, 0, 0));
        
        var render = function () {
            requestAnimationFrame( render );
            renderer.render(scene, camera);
        }

        render();
        </script>
        </body>
        </html>

我尝试将 scene.add 从 init 函数中取出，然后使用 scene.add(object[0].mesh) 手动执行此操作，并将对象更改为 const和 let 但这些都没有帮助。

原文

So I had some code and when I refactored it no longer shows anything. I don't get any error in the console so I don't really have much to go on. As far as I can tell this code should produce identical output to the working instance but it doesn't. Here's the broken code.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script src="http://threejs.org/build/three.min.js"></script>
<script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

var objects = [
{
    name : "earth",
    geometry : new THREE.SphereGeometry(1, 32, 32),
    material : new THREE.MeshPhongMaterial(),
    mesh : new THREE.Mesh(this.geometry, this.material),
    init : function(scene){
    console.log("Wtf");
    this.mesh.position.set(0,0,0);
    //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
    scene.add(this.mesh);
    console.log("ugh");
    },
    animate : function(t){this.mesh.position.set(0+t/100,0+t/100,0+t/100);}
},
{
    name : "satellite",
    geometry : new THREE.SphereGeometry(0.1, 32, 32),
    material : new THREE.MeshPhongMaterial(),
    mesh : new THREE.Mesh(this.geometry, this.material),
    init : function(scene){
    console.log("Wtf");
    this.mesh.position.set(1.5,0,0);
    //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
    scene.add(this.mesh);
    console.log("ugh");
    },
    animate : function(t){this.mesh.position.set(1.5+t/100,0+t/100,0+t/100);}
}];
objects.forEach(object => object.init(scene));

var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);

camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3( 0, 0, 0));

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
}

render();
</script>
</body>
</html>

And here's the working example.

        <!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
        
        <script src="http://threejs.org/build/three.min.js"></script>
        
        <script>var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

        
        var earth_geometry = new THREE.SphereGeometry(1, 32, 32);
        var earth_material = new THREE.MeshPhongMaterial();
        var earth_mesh = new THREE.Mesh(earth_geometry, earth_material);
        earth_mesh.position.set(0,0,0);
        //earth_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
        scene.add(earth_mesh);
        

        var satellite_geometry = new THREE.SphereGeometry(0.1, 32, 32);
        var satellite_material = new THREE.MeshPhongMaterial();
        var satellite_mesh = new THREE.Mesh(satellite_geometry, satellite_material);
        satellite_mesh.position.set(1.5,0,0);
        //satellite_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
        scene.add(satellite_mesh);
        
        
        var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
        scene.add(light);
        
        camera.position.x = 0;
        camera.position.y = -5;
        camera.position.z = 0;
        camera.lookAt(new THREE.Vector3( 0, 0, 0));
        
        var render = function () {
            requestAnimationFrame( render );
            renderer.render(scene, camera);
        }

        render();
        </script>
        </body>
        </html>

I've tried brining the scene.add out of the init function and just doing it manually with scene.add(object[0].mesh) and changing objects to const and let but none of that helps.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

这样的小城市 2025-01-21 02:57:39

问题在于：

mesh : new THREE.Mesh(this.geometry, this.material),

实例化被评估为该对象的属性，并且不在函数内部调用。因此，this 将引用全局上下文，或本例中的父窗口，它没有定义“几何”或“材料”属性。 this 仅在函数内部时更改，以引用该函数作为属性的对象（或调用者将其绑定到的任何对象，如果适用）。

在不重构代码的情况下，最简单的修复方法是当您传入几何体和材质时，在与网格相同的线上实例化几何体和材质，如下所示：

mesh : new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshPhongMaterial()),

The issue is here:

mesh : new THREE.Mesh(this.geometry, this.material),

The instantiation is evaluated as a property on that object and is not called inside a function. Therefore this will refer to the global context, or the parent window in this case, which does not have "geometry" or "material" properties defined. this only changes when inside a function, to refer to the object of which that function is a property (or whatever the caller binds it to, if applicable.)

Without refactoring your code, the easiest fix would be to instantiate the geometry and material on the same line as the mesh as you pass those in, like this:

mesh : new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshPhongMaterial()),
回复 原文
~没有更多了~

关于作者

伤感在游骋

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文