如何使用three.js r71合并两个几何体或网格物体？

这里我碰到了这个问题，因为我需要将两个几何体（或网格）合并为一个。使用three.js的早期版本有一个很好的功能：如何使用three.js r71合并两个几何体或网格物体？

THREE.GeometryUtils.merge(pendulum, ball);

但是，它不在新版本了。

我试图合并pendulum和ball用下面的代码：

ball是网状。

var ballGeo = new THREE.SphereGeometry(24,35,35); 
var ballMat = new THREE.MeshPhongMaterial({color: 0xF7FE2E}); 
var ball = new THREE.Mesh(ballGeo, ballMat); 
ball.position.set(0,0,0); 

var pendulum = new THREE.CylinderGeometry(1, 1, 20, 16); 
ball.updateMatrix(); 
pendulum.merge(ball.geometry, ball.matrix); 
scene.add(pendulum);

毕竟，我得到了以下错误：

THREE.Object3D.add: object not an instance of THREE.Object3D. THREE.CylinderGeometry {uuid: "688B0EB1-70F7-4C51-86DB-5B1B90A8A24C", name: "", type: "CylinderGeometry", vertices: Array[1332], colors: Array[0]…}THREE.error @ three_r71.js:35THREE.Object3D.add @ three_r71.js:7770(anonymous function) @ pendulum.js:20

来源

2015-05-14 Darius Miliauskas

最后，我发现了一个可能的解决方案。因为在浪费了大量时间的情况下可能对其他人有用，所以我发帖了。棘手的是有关处理网格和几何形状的概念：

var ballGeo = new THREE.SphereGeometry(10,35,35); 
var material = new THREE.MeshPhongMaterial({color: 0xF7FE2E}); 
var ball = new THREE.Mesh(ballGeo, material); 

var pendulumGeo = new THREE.CylinderGeometry(1, 1, 50, 16); 
ball.updateMatrix(); 
pendulumGeo.merge(ball.geometry, ball.matrix); 

var pendulum = new THREE.Mesh(pendulumGeo, material); 
scene.add(pendulum);

来源

2015-05-14 19:54:23

_“不用为没有泰勒康普顿的事迹在生活中” _ - _Lady Galadriel_ 感谢这个 – LaughingMan

为了更清楚地说明大流士的答案（因为我用它挣扎着，试图更新一个版本杜布先生的程序性城市与Face3工作盒子）：

基本上，你正在将所有的网格物体合并成一个单一的几何体。所以，如果你，比如，要合并的一个盒子，球体：

var box = new THREE.BoxGeometry(1, 1, 1); 
var sphere = new THREE.SphereGeometry(.65, 32, 32);

...成一个单一的几何形状：

var singleGeometry = new THREE.Geometry();

...你会为每一个几何网：

var boxMesh = new THREE.Mesh(box); 
var sphereMesh = new THREE.Mesh(sphere);

...然后调用用于每个单个几何的合并方法，传递每个的几何形状和基质进入方法：

boxMesh.updateMatrix(); // as needed 
singleGeometry.merge(boxMesh.geometry, boxMesh.matrix); 

sphereMesh.updateMatrix(); // as needed 
singleGeometry.merge(sphereMesh.geometry, sphereMesh.matrix);

合并后，从单一的几何体创建一个网格，添加到场景：

var material = new THREE.MeshPhongMaterial({color: 0xFF0000}); 
var mesh = new THREE.Mesh(singleGeometry, material); 
scene.add(mesh);

工作的示例：

<!DOCTYPE html> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script> 
 
<!-- OrbitControls.js is not versioned and may stop working with r77 --> 
 
<script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script> 
 

 
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'> 
 
    <script> 
 
    // init renderer 
 
    var renderer = new THREE.WebGLRenderer(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    document.body.appendChild(renderer.domElement); 
 

 
    // init scene and camera 
 
    var scene = new THREE.Scene(); 
 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.01, 3000); 
 
    camera.position.z = 5; 
 
    var controls = new THREE.OrbitControls(camera) 
 
    \t 
 
    // our code 
 
    var box = new THREE.BoxGeometry(1, 1, 1); 
 
    var sphere = new THREE.SphereGeometry(.65, 32, 32); 
 

 
    var singleGeometry = new THREE.Geometry(); 
 

 
    var boxMesh = new THREE.Mesh(box); 
 
    var sphereMesh = new THREE.Mesh(sphere); 
 

 
    boxMesh.updateMatrix(); // as needed 
 
    singleGeometry.merge(boxMesh.geometry, boxMesh.matrix); 
 

 
    sphereMesh.updateMatrix(); // as needed 
 
    singleGeometry.merge(sphereMesh.geometry, sphereMesh.matrix); 
 

 
    var material = new THREE.MeshPhongMaterial({color: 0xFF0000}); 
 
    var mesh = new THREE.Mesh(singleGeometry, material); 
 
    scene.add(mesh); 
 

 
    // a light 
 
    var light = new THREE.HemisphereLight(0xfffff0, 0x101020, 1.25); 
 
    light.position.set(0.75, 1, 0.25); 
 
    scene.add(light); 
 
\t 
 
    // render 
 
    requestAnimationFrame(function animate(){ 
 
\t  requestAnimationFrame(animate); 
 
\t  renderer.render(scene, camera); \t \t 
 
    }) 
 
    </script> 
 
</body>

至少，这就是我怎么我正在解释事物;如果我有什么不对，向任何人道歉，因为我不是在接近成为three.js专家（目前正在学习）的地方。我只是在运气不好的时候试图自定义Doob先生的程序城市代码，当最新版本破坏事情时（合并的东西就是其中之一，事实上three.js不再使用四边形的方块--ahem - 另一个盒子的几何形状 - 这导致各种有趣的获得阴影，并再次正常工作）。

来源

2015-10-28 16:12:57

感谢。更新我刚从500,000条警告移植过来的代码看起来非常令人生畏。对于这种处理方式，我并不是很高兴，但对于我无法控制的事情来说，找到答案太困难了。 – fluffybunny

错误消息是正确的。 CylinderGeometry不是Object3D。网格是。网格由几何和材质构成。 Mesh可以添加到场景中，而Geometry不能。

在最新版本的三。js，几何有两种合并方法：合并和mergeMesh。

合并需要强制性参数几何和两个可选参数矩阵和materialIndexOffset。
geom。 mergeMesh（mesh）基本上是geom的简写。合并（网格几何，网格矩阵），在其他答案中使用。（'geom'和'mesh'分别是几何和网格的任意名称。）网格的材质被忽略。

来源

2016-05-25 19:12:55

如何使用three.js r71合并两个几何体或网格物体？

回答

相关问题