Question

我正在学习如何做到这三点。魔术。我能够绘制立方体并为其制作动画。但是，当我将几何体改为二十面体时，没有任何东西出现。

在我的js src forlder里面我只有三个.min.js文件。我在那里需要另一个.js文件吗？

以下是我的代码示例。我只是一个初学者，并且花了好几个小时试图解决这个问题。请帮忙。

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

Answer 1

我知道这是一篇旧帖子，但是对于未来的访问者来说，这里的问题是现场代码。

我也继续清理了一下并注释了一些注释，以帮助指出我是如何解决你的问题的。

＆＃13;

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

＆＃13;

二十面体几何体不能渲染

1 个答案: