three.js所添加对象到现场，但没有渲染对象

我创建一个功能createCylinder（N，LEN，RAD）是从函数createScene（）调用。我已经检查过顶点和面被添加并且没有错误。但是，几何不被渲染。我想这与返回几何图形或返回网格并将其添加到场景的时间有关。话虽如此，我已经尝试过所有我能想到的，并没有找到解决办法。有人可以帮我解决这个问题吗？提前致谢！three.js所添加对象到现场，但没有渲染对象

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

来源

2017-02-15 Anabetsy Rivero

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

来源

2017-02-15 21:48:08 prisoner849

谢谢您的帮助。它当然有助于解决它。我也意识到它不适用于我的本地环境，因为我链接到了一个错误版本的three.js和轨道控件。 –

不客气。请将答案标记为已接受，如果它解决了您的问题） – prisoner849

three.js所添加对象到现场，但没有渲染对象

回答

相关问题