Question

我正在创建一个从 function 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>

Answer 1

在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示例

three.js将对象添加到场景但不渲染对象

1 个答案: