在这里我遇到了这个问题，因为我需要将两个几何图形(或网格)合并为一个。使用 Three.js 的早期版本有一个很好的功能:
THREE.GeometryUtils.merge(pendulum, ball);
但是，它不再出现在新版本中。
我尝试使用以下代码合并pendulum和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
最佳答案
为了更清楚地解释 Darius 的答案(当我尝试更新 Doob 先生的程序城市版本以与 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)
// 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);
// render
requestAnimationFrame(function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
})
</script>
</body>至少，我是这么解释的；如果我有什么问题，请向任何人道歉，因为我距离成为 Three.js 专家还很远(目前正在学习)。我只是“运气不好”地尝试自定义杜布先生的程序城市代码，当最新版本破坏了一些东西(合并的东西就是其中之一，事实上 Three.js 不再使用立方体的四边形 - 咳咳- 盒子几何体 - 这带来了各种乐趣让阴影等再次正常工作)。
关于javascript - 如何使用 Three.js r71 合并两个几何图形或网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30245990/