Question

我正在尝试从头开始创建一个THREE.Geometry。当我尝试使用它时（在THREE.Mesh中），我得到了

TypeError：faces3未定义@ three.js：20426

几何体已创建并在屏幕上显示，~~但执行停止~~。

以下是我正在使用的代码：

makePlane = function(width, height)
{
    var geom = new THREE.Geometry();

    var v0 = new THREE.Vector3(0, 0, 0);
    var v1 = new THREE.Vector3(width, 0, 0);
    var v2 = new THREE.Vector3(width, height, 0);

    geom.vertices.push(v0);
    geom.vertices.push(v1);
    geom.vertices.push(v2);

    var face = new THREE.Face3(0, 1, 2);

    geom.faces.push(face);

    return geom;
};

我还需要做些什么才能让它发挥作用？

更新仍然发生在R62。它也发生在由PlaneGeometry类构建的three.js生成的几何体中，所以也许它是一个three.js错误。我会提交一份报告。

我还应该提到执行确实不停止，这对我来说是个错误。我只是得到了错误，如果没有错，我觉得我不应该有任何错误。

更新2： 记录了一个问题here，但它已被关闭。

Answer 1

根据您在进一步计算步骤中的操作，您可能需要在返回geom-Object之前添加这些行：

geom.computeCentroids();
geom.computeFaceNormals();
geom.computeVertexNormals();

Answer 2

首先，请确保您使用的是最新版本的three.js库。

为了使几何图形起作用，您需要确保设置了一些东西。您需要拥有渲染器，相机，场景以及几何。

根据Geometry的文档，您需要提供一种方法，以便稍后对几何体执行某些操作，例如computeCentroids()和computeBoundingBox()。

此处不需要返回值。它实际上会阻止你的对象出现。以下是基于您的代码的完整功能代码。只需确保你的three.js参考是正确的：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Geometry</title>
</head>
<body>
    <script src="three.min.js"></script>
    <script>

        var container,
            camera,
            scene,
            renderer,
            geom;

        init();

        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);

            //renderer
            renderer = new THREE.CanvasRenderer(); //Use CanvasRenderer with simple geometry
            renderer.setSize(window.innerWidth, window.innerHeight);
            //scene
            scene = new THREE.Scene();
            //camera
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.z = 500;

            //Your custom geometry here
            makePlane(200, 300);

            container.appendChild(renderer.domElement);

            renderer.render(scene, camera);

        }

        function makePlane(width, height) {

            var material = new THREE.MeshBasicMaterial({ color: 0x297bbb });
            geom = new THREE.Geometry()

            geom.vertices.push(new THREE.Vector3(0, 0, 0));
            geom.vertices.push(new THREE.Vector3(width, 0, 0));
            geom.vertices.push(new THREE.Vector3(width, height, 0));

            geom.faces.push(new THREE.Face3(0, 1, 2));

            //return geom; //you don't need this

            geom.computeBoundingSphere(); //<--add what you need here

            geoMesh = new THREE.Mesh(geom, material); //added custom geometry to a mesh with a material
            geoMesh.position.y = -50;

            scene.add(geoMesh);
        };

    </script>
</body>
</html>

three.js：手动创建的几何体

2 个答案: