I get in the console
THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index 1. Make sure all geometries have the same number of attributes.
You can only merge if the attributes of the geometries match.
Take a look at the error generation in the file used:
https://unpkg.com/three@0.160.0/examples/jsm/utils/BufferGeometryUtils.js
Update:
Depending on what you need, you can also merge geometries yourself.
An example:
see function link( geoms ) in Pino
Hello @hofk,
Thank you for your response. I’m having difficulty identifying the missing attribute and its associated geometry. The error message indicates an issue with the geometry at index 1, which should be one of the end caps. However, the debugGeometries() function I created suggests that the missing attribute is “position” for the TubeGeometry at index 0. This inconsistency is perplexing.
function debugGeometries(geometries) {
// Create an empty Set for attributesUsed
const attributesUsed = new Set();
for (let i = 0; i < geometries.length; ++i) {
const geometry = geometries[i];
let attributesCount = 0;
// gather attributes, exit early if they're different
for (const name in geometry.attributes) {
if (!attributesUsed.has(name)) {
console.error(`Geometry ${i}: Attribute "${name}" is missing; make sure it exists among all geometries, or in none of them.`);
return null;
}
if (attributes[name] === undefined) attributes[name] = [];
attributes[name].push(geometry.attributes[name]);
attributesCount++;
}
// Log the attributesCount and attributesUsed.size for debugging
console.log(`Geometry ${i}: attributesCount=${attributesCount}, attributesUsed.size=${attributesUsed.size}`);
// ensure geometries have the same number of attributes
if (attributesCount !== attributesUsed.size) {
console.error(`Geometry ${i}: Make sure all geometries have the same number of attributes.`);
return null;
}
// Update attributesUsed with the attributes of the current geometry
for (const name in geometry.attributes) {
attributesUsed.add(name);
}
}
}
Regarding your second suggestion, I implemented the link(geoms) function from Pino instead of using BufferGeometryUtils.mergeGeometries. However, I’m encountering an error:
example.html:202 Uncaught TypeError: Cannot read properties of undefined (reading 'count')
This error points to the following line inside the ‘link’ function:
for (let j = 0; j < geoms[i].attributes.normal.count * 3; j++) {
normals[j + posOffs] = geoms[i].attributes.normal.array[j];
}
I think the error here is the ‘normal’ and ‘uv’ attributes which are missing or undefined. Unfortunately as a beginner at Three.js I’m uncertain about how to proceed with debugging and resolving this issue.
Depending on what you need, you can also merge geometries yourself.
At a broader level, I aim to create an example demonstrating the sequential drawing of a tube or pipe using a mouse. The process involves specifying the starting point and a series of vertex points for the tube. I want the tube to include end caps. A bit further down the road I want to provide the capability to move the tube’s position (using TransformControls) and edit the tube by moving and modifying its vertex points after the initial creation.
As you can see with Pino, all the things to be united must also be present.
This is quite a challenging task to begin with - but it can be done step by step.
The problem with using the basic geometries predefined in three.js for beginners is that they are initially a “black box” for them. You have to try to understand the construction, e.g. by making changes to the code and seeing what happens.
I prefer to define my own geometries for such constructions. Then I can design things the way I want them for the application right from the start.
If you want to go this route, take a look at these examples from the Collection of examples from discourse.threejs.org
Start with
BufferGeometryNonIndexed
BufferGeometryIndexed
then
ProfileSurface and RemoveTriangles
a little more
SkewedRectangularPyramid
RoundedRectangle
RoundEdgedBoxFlat
tube
DynamicTubeGeometryCaps (need not be dynamic)
Do you want to do something similar with pipes?
Construction of frames with contour/profile
If errors occur, it is best to post an editable live example here, e.g. JSFiddle, Codepen.
UPDATE:
This might still interest you.
CustomCylinderAndKnee
BendCylinderToKnee
Hi @hofk,
thank you so much for your guidance and resources! I can see how these examples and skills will be very valuable for my current project. For the moment, it was quicker for me to come up with a solution based on predefined basic geometries, for which this example: Tube from 3d points helped me get the end caps rotated/aligned correctly .
In the end, this is what I came up with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Example</title>
<style>
body {
margin: 0;
}
</style>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@v0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@v0.160.0/examples/jsm/"
}
}
</script>
</head>
<body>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 12, 12);
scene.add(camera);
const grid = new THREE.GridHelper(20, 20);
scene.add(grid);
scene.add(new THREE.DirectionalLight(0xffffff, 0.5));
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
const tubeCoordinates = [new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(6, 0, 0),
new THREE.Vector3(6, 0, 4),
new THREE.Vector3(3, 0, 4),
new THREE.Vector3(2, 3, 4)
];
var tubeRadius = 0.5;
var tubeColor = 0xC1C1C1;
scene.add(new CappedTube(tubeCoordinates, tubeRadius, tubeColor));
function CappedTube(coordinates, radius = 1, color = 0xC1C1C1) {
const curve = new THREE.CatmullRomCurve3(coordinates);
const tubeGeometries = [];
const tube = new THREE.TubeGeometry(curve, 64, radius, 64);
tubeGeometries.push(tube);
const capA = new THREE.CircleGeometry(radius, 48)
.applyMatrix4(
new THREE.Matrix4()
.setPosition(curve.getPoint(0))
.lookAt(
curve.getPoint(0),
new THREE.Vector3(...(coordinates[1])),
new THREE.Vector3(1, 0, 0)
)
);
tubeGeometries.push(capA);
const capB = new THREE.CircleGeometry(radius, 48)
.applyMatrix4(
new THREE.Matrix4()
.setPosition(curve.getPoint(1))
.lookAt(
curve.getPoint(1),
new THREE.Vector3(...(coordinates[coordinates.length - 2])),
new THREE.Vector3(1, 0, 0)
)
);
tubeGeometries.push(capB);
const tubeMaterial = new THREE.MeshLambertMaterial({ color: color });
const mergedTube = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(tubeGeometries), tubeMaterial);
return mergedTube;
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
It is not perfect since there are some minimal gaps/space between end caps and tube, but for the moment it serves my purpose:
You only have a small error in your parameters.
const tube = new THREE.TubeGeometry(curve, 64, radius, 64);
new THREE.CircleGeometry(radius, 48) // <===
So it’s perfect. 
It’s a good solution.
UPDATE
Rejoiced too soon.
The segments do shift when twisted!
This is probably a bit more complicated and similar to my problem.
Inaccurate adjustment when cylinder is deformed
You can find a pdf reading there if you want to know more.
It obviously works with a self-defined geometry. Or have I overlooked something again? Just test different variants.
<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/end-caps-of-tubegeometry/9655/26 -->
<!-- see also https://discourse.threejs.org/t/how-to-update-tubegeometry-geometry-based-in-linecurve-modifications/40854/14 -->
<head>
<title> TubeGeometryCaps </title>
<meta charset="utf-8" />
<style>
body{
overflow: hidden;
margin: 0;
}
</style>
</head>
<body></body>
<script type="module">
// @author hofk
import * as THREE from "../jsm/three.module.160.js";
import { OrbitControls } from "../jsm/OrbitControls.160.js";
const scene = new THREE.Scene( );
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 12, 12 );
const renderer = new THREE.WebGLRenderer( { antialias: true });
renderer.setSize( innerWidth, innerHeight );
renderer.setClearColor( 0xdedede );
document.body.appendChild(renderer.domElement);
new OrbitControls( camera, renderer.domElement );
scene.add( new THREE.GridHelper( 20, 20 ) );
const materials = [
new THREE.MeshBasicMaterial( { side: THREE.FrontSide, map: new THREE.TextureLoader( ).load( 'uv_grid_opengl.jpg' ), wireframe: true } ),
new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, map: new THREE.TextureLoader( ).load( 'sunflower.png' ), wireframe: true } ),
new THREE.MeshBasicMaterial( { side: THREE.FrontSide, map: new THREE.TextureLoader( ).load( 'uv_grid_opengl.jpg' ), wireframe: true } ),
];
let points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(6, 0, 0),
new THREE.Vector3(6, 0, 4),
new THREE.Vector3(3, 0, 4),
new THREE.Vector3(2, 3, 4)
];
// points, radius, radialSegments, heightSegments, withTop, withBottom
const ctGeo = CustomTubeGeometry( points, 0.5, 64, 64, true, true );
const ctMesh = new THREE.Mesh( ctGeo, materials );
scene.add ( ctMesh );
animate( );
// ---------------------------------
function animate( ) {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function CustomTubeGeometry( points, radius, radialSegments, heightSegments, withTop, withBottom ) {
const g = new THREE.BufferGeometry( );
g.radius = radius;
g.heightSegments = heightSegments;
g.radialSegments = radialSegments;
let indices = [];
let uvs = [];
let index = 0;
let indexArray = [];
let groupStart = 0;
let groupCount = 0;
for ( let y = 0; y <= heightSegments; y ++ ) {
let indexRow = [];
let v = y / heightSegments;
for ( let x = 0; x <= radialSegments; x ++ ) {
uvs.push( x / radialSegments, 1 - v );
indexRow.push( index ++ );
}
indexArray.push( indexRow );
}
let a, b, c, d;
for ( let i = 0; i < radialSegments; i ++ ) {
for ( let j = 0; j < heightSegments; j ++ ) {
a = indexArray[ j ][ i ];
b = indexArray[ j + 1 ] [ i ];
c = indexArray[ j + 1 ][ i + 1 ];
d = indexArray[ j ] [ i + 1 ];
indices.push( a, b, d );
indices.push( b, c, d );
groupCount += 6;
}
}
g.addGroup( groupStart, groupCount, 0 );
groupStart += groupCount;
let verticesCount = ( radialSegments + 1 ) * ( heightSegments + 1 )
let centerIndexTop, centerIndexBottom;
if ( withTop ) {
let groupCount = 0;
uvs.push( 0.5, 0.5 );
centerIndexTop = index;
const c = centerIndexTop;
for ( let x = 1; x <= radialSegments; x ++ ) {
const i = centerIndexTop + x;
indices.push( i, i + 1, c );
groupCount += 3;
index ++;
}
g.addGroup( groupStart, groupCount, 1 ); // 1 top material
groupStart += groupCount;
verticesCount += radialSegments + 2; // with center
for ( let x = 0; x <= radialSegments; x ++ ) {
uvs.push( 0.5 * ( 1 + Math.sin( x / radialSegments * Math.PI * 2 ) ) );
uvs.push( 1 - 0.5 * ( 1 + Math.cos( x / radialSegments * Math.PI * 2 ) ) );
}
index ++; // for center top
}
if ( withBottom ) {
let groupCount = 0;
uvs.push( 0.5, 0.5 );
centerIndexBottom = ++ index;
const c = centerIndexBottom;
for ( let x = 1; x <= radialSegments; x ++ ) {
const i = centerIndexBottom + x;
indices.push( i + 1, i, c );
groupCount += 3;
index ++;
}
g.addGroup( groupStart, groupCount, 2 ); // 2 bottom material
groupStart += groupCount;
verticesCount += radialSegments + 2; // with center
for ( let x = 0; x <= radialSegments; x ++ ) {
uvs.push( 1 - 0.5 * ( 1 + Math.sin( x / radialSegments * Math.PI * 2 ) ) );
uvs.push( 1 - 0.5 * ( 1 + Math.cos( x / radialSegments * Math.PI * 2 ) ) );
}
}
g.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
g.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( verticesCount * 3 ), 3 ) );
g.setAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( uvs ), 2 ) );
g.setCoordinates = function( points ) { // sets the coordinate of all vertices
g.pts = new THREE.CatmullRomCurve3( points , false ).getSpacedPoints( g.heightSegments ); // new center points
// tangent( direction), normal, binormal, shape in space
let v3a = new THREE.Vector3( );
let v3b = new THREE.Vector3( );
let tangent = new THREE.Vector3( );
let normal = new THREE.Vector3( 0, 0, -1 ); // first normal to after ...
let binormal = new THREE.Vector3( );
let idx = 0;
for( let i = 0; i <= g.heightSegments; i ++ ) {
if ( i === 0 ) tangent.subVectors( g.pts[ 1 ], g.pts[ 0 ] );
if ( i > 0 && i < g.heightSegments ) tangent.subVectors( g.pts[ i + 1 ], g.pts[ i - 1 ] );
if ( i === g.heightSegments ) tangent.subVectors( g.pts[ i ], g.pts[ i - 1 ] );
binormal.crossVectors( normal, tangent );
normal.crossVectors( tangent, binormal );
binormal.normalize( );
normal.normalize( );
for( let j = 0; j <= g.radialSegments; j ++ ) {
// circle in space
v3a.addVectors( binormal.clone( ).multiplyScalar( Math.sin( Math.PI * 2 * j / g.radialSegments ) ), normal.clone( ).multiplyScalar( Math.cos( Math.PI * 2 * j / g.radialSegments ) ) );
v3a.multiplyScalar( g.radius );
v3b.addVectors( g.pts[ i ], v3a );
g.attributes.position.setXYZ( idx ++, v3b.x, v3b.y, v3b.z );
}
}
idx --; // idx = ( g.radialSegments + 1 ) * ( g.heightSegments + 1 ) - 1; // last index torso
const lastIndexTorso = idx;
if( withTop ) {
let x, y, z;
g.attributes.position.setXYZ( ++ idx, g.pts[ 0 ].x, g.pts[ 0 ].y, g.pts[ 0 ].z ); // center top
for( let j = 0; j <= g.radialSegments ; j ++ ) {
x = g.attributes.position.getX( j );
y = g.attributes.position.getY( j );
z = g.attributes.position.getZ( j );
g.attributes.position.setXYZ( ++ idx, x, y, z );
}
}
if( withBottom ) {
let x, y, z;
g.attributes.position.setXYZ( ++ idx, g.pts[ g.heightSegments ].x, g.pts[ g.heightSegments ].y, g.pts[ g.heightSegments ].z ); // center bottom
centerIndexBottom = idx;
const idxBtm = lastIndexTorso - g.radialSegments;
for( let j = 0; j <= g.radialSegments ; j ++ ) {
x = g.attributes.position.getX( idxBtm + j );
y = g.attributes.position.getY( idxBtm + j );
z = g.attributes.position.getZ( idxBtm + j );
g.attributes.position.setXYZ( ++ idx, x, y, z );
}
}
g.attributes.position.needsUpdate = true;
g.computeVertexNormals( );
}
g.setCoordinates( points );
return g;
}
</script>
</html>
Wow, that is truly impressive! The way you defined the tube geometry from scratch and created the endcaps as one geometry leaves me speechless. Here are my tubes with the current THREE.TubeGeometry() class:
And here with the new function you created:
The new tubes look spectacular! I can’t wait to thoroughly test it myself, though it’s late and I might end up losing more sleep this week than last week. 
Thank you for being so generous with your time and knowledge!
The CustomTubeGeometry( points, radius, radialSegments, heightSegments, withTop, withBottom ) is merely the adaptation of
DynamicTubeGeometry( radius, radialSegments, heightSegments, withTop, withBottom )
from How to update tubeGeometry geometry based in lineCurve modifications? - #14 by hofk
I removed the dynamics by calling the method to set the coordinates of all vertices once directly in the geometry definition (renamed from g.morph to g.setCoordinates).
This geometry is quite simple, more complicated were e.g. some things you can find at hofk (Klaus Hoffmeister) · GitHub.
