javascript - Three.js 将对象添加到场景但不渲染对象-6ren

javascript - Three.js 将对象添加到场景但不渲染对象

转载作者：行者123 更新时间：2023-12-03 05:00:15

26

4

我正在创建一个从函数createScene()调用的函数createCylinder(n, len, rad)。我已经检查了顶点和面是否已添加，并且没有错误。但是，不会渲染几何图形。我想这与返回几何体或返回网格并将其添加到场景中的时间有关。话虽这么说，我已经尝试了所有我能想到的方法，但没有找到解决方案。有人可以帮我解决这个问题吗？提前致谢!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cylinder</title>
</head>

<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>

<style>
    body {
        /* set margin to 0 and overflow to hidden, to go fullscreen */
        margin: 0;
        overflow: hidden;
    }
</style>


<body>

<div id="container">
</div>
<div id="msg">
</div>

<script type="text/javascript">


    var camera, scene, renderer;
    var cameraControls;
    var clock = new THREE.Clock();
    var isCappedBottom = false;
    var isCappedTop = false;


    function createCylinder(n, len, rad) {

        var geometry = new THREE.Geometry();
        var radius = rad;
        var length = len;
        var yUp = length / 2;
        var yDown = -length / 2;
        var theta = (2.0 * Math.PI) / n;


        for (var i = 0; i < n ; i++) { //runs n + 2 times if we allow redundant vertices
            var x = radius * Math.cos(i * theta);
            var z = radius * Math.sin(i * theta);

            //Top to bottom
            var originUp = new THREE.Vector3(x, yUp, z);
            var originDown = new THREE.Vector3(x, yDown, z);
            geometry.vertices.push(originUp); //0
            geometry.vertices.push(originDown); //1

            console.log("Vertices " + geometry.vertices.length);

        }//end of first for loop

        // Draw faces
        for (var j = 0; j < 2*n; j+= 2) {
            var face1 = new THREE.Face3(j, j + 1, j + 2);
            var face2 = new THREE.Face3(j + 1, j + 3, j + 2);
            geometry.faces.push(face1);
            geometry.faces.push(face2);
            console.log("faces " + geometry.faces.length);
        }

       // return geometry;
        //scene.add(geometry);

        var material = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide});
        var mesh = new THREE.Mesh(geometry, material);
        return mesh;
        scene.add(mesh);


        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x222222);
        scene.add(ambientLight);

        var light = new THREE.PointLight(0xFFFFFF, 1, 1000);
        light.position.set(0, 10, 20);
        scene.add(light);

        var light2 = new THREE.PointLight(0xFFFFFF, 1, 1000);
        light2.position.set(0, -10, -10);
        scene.add(light2);
     } //End of function


    function createScene() {
        var cyl = createCylinder(10, 10, 2);
        return cyl;
        scene.add(cyl);
    }


    function animate() {
        window.requestAnimationFrame(animate);
        render();
    }


    function render() {
        var delta = clock.getDelta();
        cameraControls.update(delta);
        renderer.render(scene, camera);
    }


    function init() {
        var canvasWidth = window.innerWidth;
        var canvasHeight = window.innerHeight;
        var canvasRatio = canvasWidth / canvasHeight;

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.setSize(canvasWidth, canvasHeight);
        renderer.setClearColor(0x000000, 1.0);
        renderer.shadowMapEnabled = true;

        camera = new THREE.PerspectiveCamera( 40, canvasRatio, 1, 1000);
        /* camera.position.z = 5;
        camera.lookAt(scene.position); */

        camera.position.set(0, 0, 12);
        camera.lookAt(new THREE.Vector3(0, 0, 0));


        cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
    }


    function addToDOM() {
        var container = document.getElementById('container');
        var canvas = container.getElementsByTagName('canvas');
        if (canvas.length>0) {
            container.removeChild(canvas[0]);
        }
        container.appendChild( renderer.domElement );
    }

    init();
    createScene();
    addToDOM();
    render();
    animate();

</script>
</body>
</html>

最佳答案

在createCylinder函数中:

var mesh = new THREE.Mesh(geometry, material);
return mesh; // this line must be the last line in the function
             // after return(), the rest of the code is unreacheable
//scene.add(mesh); // this line should be deleted as you add the mesh in the createScene() function

然后createScene函数应该是这样的:

function createScene() {
    var cyl = createCylinder(10, 10, 2);
    //return cyl;
    scene.add(cyl);
}

jsfiddle示例

关于javascript - Three.js 将对象添加到场景但不渲染对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42259130/

26

4

0

文章推荐： javascript - 如何将变量数据放入 div Jquerymobile

文章推荐： javascript - 在 Javascript 中查找 tsv 文件标题列的索引

文章推荐： javascript - 上传 2 个或更多文件时使用 ajax 的进度条

websocket的用途/场景
websocket的用途/场景先总结：高即时性服务，比如聊天室的群聊，server顺序收到了张三，李四的消息，立即就推送给王五，不能让王五等半天。 Ajax也可以一秒一刷，让王五去问张三说话没，如果
前端开发用得着的nginx配置(场景)
前端的工作过程里，本地开发、提供测试环境，总得有个用着顺手的服务器软件，这个场景里nginx很流行。介绍两个好用的配置项：rewrite try_files @xxxx rewrite 比较
来自两个不同角度的两个视频文件的 3D 场景
我有一个场景的两个不同角度的 2 个视频文件，我想重建场景的 3D 估计。它类似于 3D 传感器的作用(例如 Kinect、PrimeSense)。我正在寻找一个库，甚至是一个完善的机器视觉算法，以便
Mercurial rebase 场景
我已阅读RebaseProject页面并尝试了一个不平凡的例子(不是对一个完整的分支进行 rebase )。这与 rebase D 的情况类似我场景B。这是rebase之前的情况: default
单独类中的 JavaFX2 场景
有没有办法将我的场景保存在 JavaFx 应用程序中单独的 Java 文件中？我尝试过这样的事情: public class MyApp extends Application { pri
java - SQL逻辑上下文/场景
我有这样的场景:用户想要查看大量有关自己的信息。例如:年龄、姓名、地位、收入、工作、爱好、 child 的名字、妻子的名字、酋长的名字、祖父/祖母的名字。大约 50 个变量。他可以选择任何变量来显示信
MySQL MATCH-AGAINST 场景
我希望有人能帮助我解决这个问题:我有一个包含条目的表。我想执行查询并根据模式获取得分最高的记录。模式将是:如果我的话按原样出现，那么该条目的分数将是最高的。如果该单词出现在句子中，则该条目的分数将低于
iphone - 如何判断正在运行的场景是什么样的类/场景？
我正在尝试在我的应用程序委托(delegate)方法中实现一些逻辑。了解当前正在运行哪种场景将非常有帮助。 [[CCDirector sharedDirector] runningScene] 返回当
mysql if/else 场景
好的，这是一个有趣的。我有 2 个表:tbl_notes、tbl_notes_categories 简单地说，tbl_notes 有一个 categoryid，我将 2 个表与该 ID 相关联。所以，
c# - 如何从并行运行中排除某些功能/场景？
我有一个使用并行运行的 Specflow、selenium、NUnit 的测试解决方案在 AssemblyInfo 中添加了这个:[程序集:Parallelizable(ParallelScope.F
ios - SpriteKit 场景
我正在尝试弄清楚如何在 SpriteKit 中添加更多场景。如果我在 GameViewController 中使用 SpriteKit 生成的行 if let scene = GameScene.un
复杂「场景」数据导入导出
目录 1、业务背景 2、场景分析 3、流程设计 1、业务流程 2、导入流程
unity3d - 为什么我不能播放预览我的简单 Unity 场景？
我是 Unity 的新手，所以修复起来可能非常简单。我使用了一个 3D Google SketchUp 模型，我想让玩家环顾模型。 super 简单。我添加了 3D 平面，添加了相机并更新了设置以支
pytest - 如何有条件地跳过参数化的 pytest 场景？
我需要标记要跳过的某些测试。但是，有些测试是参数化的，我只需要能够跳过某些场景。我使用 py.test -m "hermes_only" 调用测试或 py.test -m "not hermes_o
.net - 重用 SpecFlow 场景
我已经开始使用 SpecFlow 并想知道是否可以在规范之间重用场景基本上我的想法是这样的(我可能从根本上是错误的:)) 我编写了一项功能来验证导航。功能:导航 I should be able
bdd - 用于用户输入验证的 Gherkin 场景
在编写验证输入表单上的信息的 BDD 场景时，您将如何列出规则。选项是: 1) 每个规则一个场景 2)场景大纲，每个领域和规则的例子我们如何说某些不在特定字符集中的无效内容，例如: 鉴于我输入了一
bdd - 预期异常的 StoryQ 场景
我们如何使用 StoryQ 来测试预期出现异常的场景？最佳答案就实际代码而言，在测试代码的 .Then 部分，您需要创建一个 Action 或 Func 来确定正在测试的内容，然后在代码的 .Th
swift - 如何根据按钮按下时设备中心的位置将节点添加到 ARKit 场景？
完成快速初学者努力通过点击按钮向场景添加节点。我知道我可以使用点击手势来获取点击坐标并执行点击测试，然后在点击的 3D 空间中放置一个对象。但是，我想在设备屏幕的中央显示一个球体或十字准线，当点击屏
specflow - 如何在表格中传递空格(specflow 场景)？
如何在表格中传递空格？ Background: Given the following books |Author |(here several spaces)
graphics - 为什么我的光线追踪器不会重新创建 "mount"场景？
我正在尝试从 Eric Haines' Standard Procedural Database (SPD) 渲染“mount”场景，但折射部分就是不想配合。我已经尝试了所有我能想到的方法来修复它。

首页

博学

6Ren·AI

商城

javascript - Three.js 将对象添加到场景但不渲染对象