Question

另一个新的工作项目让我进入了ThreeJS（我们的项目使用的webGL库）。在学习过程中，我一直试图修改这个例子：

我已经从顶点和面部创建了一个八面体。这是练习，因为我最终必须渲染的对象要复杂得多，我想确保我理解如何设置顶点和面。

然而，一旦我修改了这个例子，我没有光线，多面体完全是黑色的！我已经尝试了几种解决方案，但它们似乎都没有起作用：

我有点难过:(这里是当前的代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>G Beam Class Test</title>
    </head>
    <body>
        <script type="text/javascript" src="js/three.min.js"></script>
        <script type="text/javascript" src="js/OrbitControls.js"></script>
        <script>
            var scene, camera, renderer;
            var gbeam;

            init();
            animate();

            // initiate the graphics
            function init() {
                // Create the scene and set the scene size.
                scene = new THREE.Scene();
                var WIDTH = window.innerWidth,
                    HEIGHT = window.innerHeight - 50;

                // Create a renderer and add it to the DOM.
                renderer = new THREE.WebGLRenderer({antialias:true});
                renderer.setSize(WIDTH, HEIGHT);
                document.body.appendChild(renderer.domElement);

                // Create a camera, zoom it out from the model a bit, and add it to the scene.
                camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
                camera.position.set(0,6,0);
                scene.add(camera);

                // Create an event listener that resizes the renderer with the browser window.
                window.addEventListener('resize', function() {
                  var WIDTH = window.innerWidth,
                      HEIGHT = window.innerHeight;
                  renderer.setSize(WIDTH, HEIGHT);
                  camera.aspect = WIDTH / HEIGHT;
                  camera.updateProjectionMatrix();
                });

                // Set the background color of the scene.
                renderer.setClearColorHex(0xffffff, 1);

                // Create a light, set its position, and add it to the scene.
                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.set(1, 1, 1).normalize();
                scene.add(directionalLight);

                // create vertecies
                var vertices = [
                    new THREE.Vector3(0, 0, 2),
                    new THREE.Vector3(1, 0, 0),
                    new THREE.Vector3(0, 1, 0),
                    new THREE.Vector3(-1, 0, 0),
                    new THREE.Vector3(0, -1, 0),
                    new THREE.Vector3(0, 0, -2)
                ];

                var faces = [
                    new THREE.Face3(0, 1, 2),
                    new THREE.Face3(0, 2, 3),
                    new THREE.Face3(0, 3, 4),
                    new THREE.Face3(0, 1, 4),

                    new THREE.Face3(5, 1, 2),
                    new THREE.Face3(5, 2, 3),
                    new THREE.Face3(5, 3, 4),
                    new THREE.Face3(5, 1, 4)
                ];


                // create the geometry
                var geometry = new THREE.Geometry();
                geometry.vertices = vertices;
                geometry.faces = faces;

                // compute normals.
                geometry.computeVertexNormals();
                geometry.computeFaceNormals();



                // Build the mesh
                var material = new THREE.MeshLambertMaterial({color: 'blue'});
                material.side = THREE.DoubleSide;
                var mesh = new THREE.Mesh(geometry, material);
                mesh.rotation.x = Math.PI * 0.1;
                //
                scene.add(mesh);

                // Add OrbitControls so that we can pan around with the mouse.
                controls = new THREE.OrbitControls(camera, renderer.domElement);
            };

            // Renders the scene and updates the render as needed.
            function animate() {
                // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
                requestAnimationFrame(animate);

                // Render the scene.
                renderer.render(scene, camera);
                controls.update();
            }
        </script>
    </body>
</html>

Answer 1

您需要计算照明的几何法线才能正常工作。

geometry.computeFaceNormals();
geometry.computeVertexNormals();

ThreeJS颜色和照明

1 个答案: