three.js adding object to scene but not rendering object

Question

I'm creating a function createCylinder(n, len, rad) that is called from function createScene(). I have checked that the vertices and faces are added and I get no errors. However, the geometry is not rendered. I suppose this has to do with the timing of returning the geometry or returning the mesh and adding it to the scene. That being said, I have tried everything I could think of and found no solution. Can someone please help me figure this out? Thanks in advance!

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

prisoner849 · Accepted Answer · 2017-02-15 21:48:08Z

1

In the createCylinder function:

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

and then the createScene function should be like this:

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

jsfiddle example

answered Feb 15, 2017 at 21:48

prisoner849

17.7k4 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ATZ Over a year ago

Thank you for your help. It certainly helped fix it. I also realized it wasn't working on my local environment because I was linking to a bad version of three.js and orbit controls.

prisoner849 Over a year ago

You're welcome. Mark the answer as accepted, please, If it solved your problem )

Collectives™ on Stack Overflow

three.js adding object to scene but not rendering object

1 Answer 1

2 Comments

Your Answer

Collectives™ on Stack Overflow

three.js adding object to scene but not rendering object

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related