three.js：手动创建几何

我试图从头创建一个THREE.Geometry。当我尝试使用它（在THREE.Mesh），我得到three.js：手动创建几何

TypeError: faces3 is undefined @ 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'生成的几何体中，也可能是一个three.js错误。我会提交一份报告。

我还应该提一下，执行确实是而不是停止，这是我的错误。我只是得到了错误，如果没有错误，它不会觉得我应该有任何错误。

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

来源

2013-10-23 tacospice

您可以发布可运行的代码，只是想检查是否GEOM插入一个网格，也的位置和大小都认为截内（可视） –

@乔治其实我不能在一个干净的脚本中重现错误，但我实际使用的代码在这里的前几行：https：//github.com/tacospice/tacosjs/blob/master/js/engine/ Entity/Plane.js – tacospice

我看，你测试了什么样的宽度/高度尺寸？ –

根据您在您可能需要你返回GEOM的对象之前加上这些行进一步的计算步骤做：

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

来源

2013-10-23 09:34:34 Subimago

geom.computeCentroids（）;不见了 – cquezel

首先，确保你使用的是最新版本的三个。 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-24 01:55:14 MCSharp

如果我不返回生成的几何图形，我将如何在任何地方使用它？我会回来undefined。 – tacospice

@tacospice我用功能代码更新了我的答案。我相信这会帮助你开始。 – MCSharp

three.js：手动创建几何

回答

相关问题