Bone position coordinate values are doubled on render

Questions
, ,
1

I am setting up a basic geometry with bones for simulation and testing but I’m having an issue regarding positioning bones. I created a simple plane geometry composed of 2 quads and with dimensions of 1x1 units. For some reason, while positioning its bones, the bones are having twice the usual coordinate increments.

Here is what is rendered on my canvas
image

And here is the code I used

    let vertices = new Float32Array([
        0.0, 0.0, 0.0,
        0.0, 1.0, 0.0,
        0.0, 2.0, 0.0,
        1.0, 2.0, 0.0,
        1.0, 1.0, 0.0,
        1.0, 0.0, 0.0
    ]);

    let geometry = new THREE.BufferGeometry();
    geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

    let uvs = new Float32Array([
        0.0, 1.0,
        0.0, 0.5,
        0.0, 0.0,
        1.0, 0.0,
        1.0, 0.5,
        1.0, 1.0
    ]);
    geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );

    let indices = new Uint8Array([
        0, 5, 1,
        4, 1, 5,
        1, 4, 2,
        3, 2, 4
    ]);

    geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );


    let skin_indices = new Uint8Array([
        0, 0, 0, 0,
        1, 0, 0, 0,
        1, 0, 0, 0,
        1, 0, 0, 0,
        1, 0, 0, 0,
        0, 0, 0, 0
    ]);

    let skin_weights = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
    ]);

    geometry.addAttribute( 'skinIndex', new THREE.BufferAttribute(skin_indices, 4 ));
    geometry.addAttribute( 'skinWeight', new THREE.BufferAttribute(skin_weights, 4));

    //-------------BONES

    let bones = [];
    let top_bone = new THREE.Bone();
    let bottom_bone = new THREE.Bone();

    bottom_bone.add(top_bone);

    bones.push(bottom_bone);
    bones.push(top_bone);


    bottom_bone.position.x = 0;
    top_bone.position.y = 1;

    let skeleton = new THREE.Skeleton(bones);
    let material = new THREE.MeshBasicMaterial( {color: 'white', wireframe: true, side: THREE.DoubleSide, skinning: true });
    let mesh = new THREE.SkinnedMesh( geometry, material );

    mesh.add(skeleton.bones[0]);
    mesh.bind(skeleton);
    this.scene.add(mesh);

    // bottom_bone.rotation.x = 45 * (Math.PI/180);
    // top_bone.rotation.x = 45 * (Math.PI/180);

    var helper = new THREE.SkeletonHelper( mesh );
    helper.material.linewidth = 1;
    this.scene.add( helper );

As you can see in my code, top_bone has a y position of 1 but when rendered on the viewport it is placed on the upper left corner of the geometry which has the coordinate of (0,2,0).

This code is actually working and is rendering fine on a basic html file but somehow had this issue when I moved it to typescript, although typescript’s js output is correct.

2

I’m afraid I can’t reproduce the issue with this fiddle: https://jsfiddle.net/jyng3xvr/1/

As you can see, the result looks different than your screenshot.

3

It seems like it’s a bug on the three js version that I linked on my project. It was a cdn from https://cdnjs.com/libraries/three.js/100. Issue was fixed when I used my downloaded copy (version 0.95.0) of three js that I used in the basic html version of my code.

4

The fiddle uses the latest stable version R101.

1 Like