如何使用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合併兩個幾何體或網格物體？

回答

相關問題