The geometry of the icosahedron does not render

I am just learning how to do it. I can draw and animate the cube. But when I change the geometry to an icosahedron, nothing appears.

Inside my js src forlder, I only have a three.min.js file. Do I need a different .js file?

Here's an example of my code. I am just a beginner and spend hours trying to figure this out. Please, help.

<body>
    <script src="js/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 geometry = new THREE.BoxGeometry(1,1,1);
        var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);*/

        var geometry = new THREE.IcosahedronGeometry( 200,1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: false, wireframeLinewidth: 2 } );
        var mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        var pointlight = new THREE.PointLight(0xffffff);
        pointlight.position.x = 10;
        pointlight.position.y = 50;
        pointlight.position.z = 1000;

        scene.add(pointlight)

        camera.position.z = 5;

        var render = function () {
            requestAnimationFrame(render);

            cube.rotation.x += .01;
            cube.rotation.y += .01;



            renderer.render(scene, camera);
        };

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

      

+3


source to share


1 answer


I know this is an old post, but for future visitors, live code answered the question here.

I also went ahead and cleaned it up a bit and added comments to the comments to indicate how I solved your problem.



<body>
  <script src="https://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
    );
    camera.position.z = 5;

    var pointlight = new THREE.PointLight(0xffffff);
    pointlight.position.x = 10;
    pointlight.position.y = 50;
    pointlight.position.z = 1000;

    scene.add(pointlight)

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

    var mesh = new THREE.Mesh(
      // Notice radius decreased to 2 because it has to be smaller
      // than camera.position. If camera is placed inside the mess,
      // then we won't see it.
      new THREE.IcosahedronGeometry(2, 0),
      
      // I went ahead and added Phong shading in order to make result clearer
      new THREE.MeshPhongMaterial({
        color: 0x156289,
        emissive: 0x072534,
        side: THREE.DoubleSide,
        flatShading: true,
      }),
     );
     
    scene.add(mesh);

    var render = function() {
      requestAnimationFrame(render);

      // fixed the rotation to reference your mesh
      mesh.rotation.x += .01;
      mesh.rotation.y += .01;

      renderer.render(scene, camera);
    };

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

Run codeHide result


0


source







All Articles