1

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

类型错误：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 中。它也发生在由 Three.js 内置的 PlaneGeometry 类生成的几何体上，所以也许这是一个three.js 错误。我会提交一份报告。

我还应该提到，执行实际上并没有停止，这是我的一个错误。我只是收到错误，如果没有任何问题，我觉得我不应该有任何错误。

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

4

2 回答 2

1

Depending on what you do in further computation steps you may need to add these lines before you return the geom-Object:

geom.computeCentroids();
geom.computeFaceNormals();
geom.computeVertexNormals();
于 2013-10-23T09:34:34.550 回答
0

首先，确保您使用的是最新版本的 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>
于 2013-10-24T01:55:14.053 回答