Instead of trying to port something, it is often easier to programme it from scratch. Otherwise, one sticks too much to the template and overlooks essential differences.
That is why I have simplified the official example from the docs Three.js Bones Browser so that I can experiment on this basis. Maybe that will lead to the goal.
UPDATE
SkinnedMeshTest_02
Another, even more simplified variant for tests. Some terms changed. The term
segmentCount at sizing = { } in the original is the bone count ( constant 4 ) and not to be confused with the segments of the geometry.
In the original
sizing.segmentCount * 3, // heightSegments
( 4*3 height segments of the cylinder!)
By the way, in SkinnedMesh Docs: three.js docs
Code Example
const geometry = new THREE.CylinderGeometry( 5, 5, 5, 15, 5, 30 );
no matching definition for example: ( 5, 5, 32, 8, 12, true)
SkinnedMeshTest_01
<!DOCTYPE html>
<!-- adapted from https://threejs.org/docs/scenes/bones-browser.html -->
<!-- https://discourse.threejs.org/t/problem-porting-skinnedmesh-from-old-geometry-to-buffergeometry/33748 -->
<head>
<meta charset="utf-8">
<title> SkinnedMeshTest_01 </title>
</head>
<body> </body>
<script type="module">
import { Bone,Color,CylinderGeometry,DoubleSide,Float32BufferAttribute,MeshBasicMaterial,PerspectiveCamera,
PointLight,Scene,SkinnedMesh,Skeleton,SkeletonHelper,Vector3,Uint16BufferAttribute,WebGLRenderer
} from '../jsm/three.module.136.js';
import { OrbitControls } from '../jsm/OrbitControls.136.js';
let mesh, bones, skeletonHelper;
const scene = new Scene();
scene.background = new Color( 0xdedede );
const camera = new PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.set( 0,40,40 );
const renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
new OrbitControls( camera, renderer.domElement );
initBones();
function createGeometry( sizing ) {
const geometry = new CylinderGeometry(
5, // radiusTop
5, // radiusBottom
sizing.height,
8, // radiusSegments
sizing.segmentCount * 3, // heightSegments
true // openEnded
);
const position = geometry.attributes.position;
const vertex = new Vector3();
const skinIndices = [];
const skinWeights = [];
for ( let i = 0; i < position.count; i ++ ) {
vertex.fromBufferAttribute( position, i );
const y = ( vertex.y + sizing.halfHeight );
const skinIndex = Math.floor( y / sizing.segmentHeight );
const skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
}
geometry.setAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
geometry.setAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
return geometry;
}
function createBones( sizing ) {
bones = [];
let prevBone = new Bone();
bones.push( prevBone );
prevBone.position.y = -sizing.halfHeight;
for ( let i = 0; i < sizing.segmentCount; i ++ ) {
const bone = new Bone();
bone.position.y = sizing.segmentHeight;;
bones.push( bone );
prevBone.add( bone );
prevBone = bone;
}
return bones;
}
function createMesh( geometry, bones ) {
const material = new MeshBasicMaterial( { color: 0xff44ee, side: DoubleSide, wireframe: true } );
const mesh = new SkinnedMesh( geometry, material );
const skeleton = new Skeleton( bones );
mesh.add( bones[ 0 ] );
mesh.bind( skeleton );
skeletonHelper = new SkeletonHelper( mesh );
skeletonHelper.material.linewidth = 2;
scene.add( skeletonHelper );
return mesh;
}
function initBones() {
const segmentHeight = 8;
const segmentCount = 4;
const height = segmentHeight * segmentCount;
const halfHeight = height * 0.5;
const sizing = {
segmentHeight: segmentHeight,
segmentCount: segmentCount,
height: height,
halfHeight: halfHeight
};
const geometry = createGeometry( sizing );
const bones = createBones( sizing );
mesh = createMesh( geometry, bones );
scene.add( mesh );
}
function render( ) {
requestAnimationFrame( render );
const time = Date.now() * 0.001;
for ( let i = 0; i < mesh.skeleton.bones.length; i ++ ) {
mesh.skeleton.bones[ i ].rotation.x = 0.6 * Math.cos( 1.2 * time ) / mesh.skeleton.bones.length;
mesh.skeleton.bones[ i ].rotation.z = 0.6 * Math.sin( 1.2 * time ) / mesh.skeleton.bones.length;
}
renderer.render( scene, camera );
}
render( );
</script>
</html>
SkinnedMeshTest_02
<!DOCTYPE html>
<!-- adapted from https://threejs.org/docs/scenes/bones-browser.html -->
<!-- https://discourse.threejs.org/t/problem-porting-skinnedmesh-from-old-geometry-to-buffergeometry/33748 -->
<head>
<meta charset="utf-8">
<title> SkinnedMeshTest_02 </title>
</head>
<body> </body>
<script type="module">
import * as THREE from '../jsm/three.module.136.js';
import { OrbitControls } from '../jsm/OrbitControls.136.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 0.001, 1000 );
camera.position.set( 2, 7, 7 );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdedede, 1 );
document.body.appendChild( renderer.domElement );
new OrbitControls( camera, renderer.domElement );
scene.add( new THREE.AxesHelper( 2 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff44ee, side: THREE.DoubleSide, wireframe: true } );
// inputs
const radius = 0.5;
const radiusSegments = 6;
const boneHeight = 0.75;
const boneCount = 4;
const segmentsBone = 5;
const height = boneHeight * boneCount;
const geometry = new THREE.CylinderGeometry( radius, radius, height, radiusSegments, boneCount * segmentsBone, true );
const bones = [];
let prevBone = new THREE.Bone();
bones.push( prevBone );
prevBone.position.y = -height / 2
for ( let i = 0; i < boneCount; i ++ ) {
const bone = new THREE.Bone();
bone.position.y = boneHeight;
bones.push( bone );
prevBone.add( bone );
prevBone = bone;
}
const pos = geometry.attributes.position;
const vertex = new THREE.Vector3( );
const skinIndices = [];
const skinWeights = [];
for ( let i = 0; i < pos.count; i ++ ) {
vertex.fromBufferAttribute( pos, i );
const y = ( vertex.y + height / 2 );
const skinIndex = Math.floor( y / boneHeight );
const skinWeight = ( y % boneHeight ) / boneHeight;
skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
}
geometry.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
geometry.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
const mesh = new THREE.SkinnedMesh( geometry, material );
const skeleton = new THREE.Skeleton( bones );
mesh.add( bones[ 0 ] );
mesh.bind( skeleton );
scene.add( mesh );
mesh.position.y = height / 2;
scene.add( new THREE.SkeletonHelper( mesh ) );
let time;
bones[ 0 ].position.z = -0.5; bones[ 2 ].rotation.y = 0.7; bones[ 4 ].rotation.y = -0.7; // tests
animate( );
function animate( ) {
requestAnimationFrame( animate );
time = Date.now() * 0.001;
for ( let i = 0; i < mesh.skeleton.bones.length; i ++ ) { // shorter: bones.length
mesh.skeleton.bones[ i ].rotation.x = 0.1 * Math.cos( 1.3 * time ); // tests
mesh.skeleton.bones[ i ].rotation.z = 0.1 * Math.sin( 1.3 * time );
}
renderer.render( scene, camera );
}
</script>
</html>