Fusioné con éxito mis cubos, aunque parecen fusionarse volviendo a su posición/rotación original, ignorando la posición/rotación declarada
var geometries = []; cube1.position.set( 0, 0, 0 ); geometries.push( cube1 ); cube2.position.set( 1, 0, 0 ); geometries.push( cube2 ); cube3.position.set( 0, 1, 0 ); geometries.push( cube3 ); const cubes = BufferGeometryUtils.mergeBufferGeometries( geometries ); scene.add( cubes );//All the cubes get merged on 0, 0, 0 - overlapping one another¿Cómo coloco los cubos para que puedan fusionarse en sus posiciones declaradas?
Aquí hay un ejemplo práctico del uso de BufferGeometryUtils y .applyMatrix4() :
body{ overflow: hidden; margin: 0; } <script type="module"> import * as THREE from "https://cdn.skypack.dev/three@0.136.0"; import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js"; import * as BufferGeometryUtils from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/utils/BufferGeometryUtils"; let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000); camera.position.setScalar(1).setLength(6); let renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setClearColor(0x404040); document.body.appendChild(renderer.domElement); let controls = new OrbitControls(camera, renderer.domElement); let light = new THREE.DirectionalLight(0xffffff, 1); light.position.setScalar(1); scene.add(light, new THREE.AmbientLight(0xffffff, 0.5)); let boxes = [ makeBox(2, 0, 0, 0xff0000), makeBox(0, 2, 0, 0x00ff00), makeBox(0, 0, 2, 0x0000ff) ]; let materials = []; let g = BufferGeometryUtils.mergeBufferGeometries(boxes.map(b => { materials.push(b.material); b.updateMatrixWorld(); // needs to be done to be sure that all transformations are applied return b.geometry.applyMatrix4(b.matrixWorld); }), true); let o = new THREE.Mesh(g, materials); scene.add(o); window.addEventListener("resize", onWindowResize); animate(); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } function onWindowResize() { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); } function makeBox(x, y, z, color) { let g = new THREE.BoxGeometry(); let m = new THREE.MeshLambertMaterial({ color: color }); let box = new THREE.Mesh(g, m); box.position.set(x, y, z); return box; } </script>