CODEWITHSUNDEEP
javascriptthree.js
David Plotnik
David Plotnik

Reputation: 27

Three.js program returns: "Cannot read property '0' of undefined"

The following code is used to animatean object according toquaternion` data: 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 0.3, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xf4b942 } );
var obj = new THREE.Mesh( geometry, material );
scene.add( obj );

var geometry = new THREE.BoxBufferGeometry(1, 0.3, 2 );
var edges = new THREE.EdgesGeometry(geometry);
var lines = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x000000 }));
scene.add( lines );

camera.position.z = 5;
renderer.render(scene,camera);
var xpos_o = obj.rotation.x;
var ypos_o = obj.rotation.y;
var zpos_o = obj.rotation.z;
var xpos_lo = lines.rotation.x;
var ypos_lo = lines.rotation.y;
var zpos_lo = lines.rotation.z;

let i = 0; let m = 0;
var animate = function (quat_data) {
    requestAnimationFrame( animate );

    if (m % 5 == 0 || m == 0) {
        if (m !== 0) {i++;}

        if (i >= quat_data.length){
            obj.rotation.x = xpos_o;
            obj.rotation.y = ypos_o;
            obj.rotation.z = zpos_o;
            lines.rotation.x = xpos_lo;
            lines.rotation.y = ypos_lo;
            lines.rotation.z = zpos_lo;
            i=0; 
        }

        let quat = quat_data[i]; 

        var quaternion = new THREE.Quaternion(quat[0],quat[1],quat[2],quat[3]);
        obj.applyQuaternion(quaternion);
        lines.applyQuaternion(quaternion);

        renderer.render( scene, camera );    
    }

    m++;    
}

var animate1 = function() {

    var quat_data1 = [  [0.681492531,-0.014533572,0.711492547,-0.170668778  ], 
            [-0.81103207,0.125979118,0.555748976,-0.132257921  ],
            [-0.459080697,-0.267181198,-0.846533742,0.035103342  ],
            [0.874097952,-0.166578614,-0.244525976,0.385231457  ],
            ...

    animate(quat_data1);
}

var animate2 = function() {

    var quat_data2 = [[-0.395306087,-0.567475272,-0.168275478,-0.702416024  ], 
            [0.591221013,-0.226393713,-0.208636898,0.745435603  ],
            [-0.279990579,0.754847831,0.56444738,-0.182233852  ],
            [-0.419803039,-0.623439075,-0.538698243,-0.380648559  ],
            [0.878036311,0.088829796,-0.024437397,0.469642749  ],
            ...

    animate(quat_data2);
}

var animate3 = function() {

    var quat_data3 = [ [-0.17958507,0.232682609,-0.217296778,-0.930800793  ], 
            [-0.178598829,0.228014038,-0.2182292,-0.931927075  ],
            [-0.177601473,0.223351625,-0.219152185,-0.933029522  ],
            [-0.176574343,0.218685883,-0.220066047,-0.934113976  ],
            [-0.175533915,0.214015872,-0.22097227,-0.935177153  ],
            [-0.174483815,0.209350901,-0.221866773,-0.936217247  ],
            [-0.173407996,0.204681945,-0.222753878,-0.937238325  ],
            ...

    animate(quat_data3);
}

I have omitted some of the quaternion data and replaced it with ellipses to save space. The beginning section simply establishes the geometry of the scene. The animate function takes an array of quaternions. After each iteration of requestAnimationFrame , m increases by 1, and every time it reaches a multiple of 5, it executes the animation code. (This is because I wanted to convert the 60 fps of requestAnimationFrame to 12 fps.) The animation code increases i by 1 (to move to the next quaternion) and applies the quaternion. If i exceeds the length of the quaternion data array, then it loops back around to the beginning of the data and resets the objects original orientation.

There are three other functions, animate1, animate2, and animate3, that use different sets of quaternion data to execute the animate function.

When I click a button in the html code to execute animate1, the console is giving me the error stated in the question, at the following line:

var quaternion = new THREE.Quaternion(quat[0],quat[1],quat[2],quat[3]);

Upvotes: 1

Views: 461

Answers (1)

Rabbid76
Rabbid76

Reputation: 210878

The issue is that animation (requestAnimationFrame) is performed at the wrong place and with the wrong callback target. TO the call back function is passe one single argument, which is time value.

var animate = function (quat_data) {
    requestAnimationFrame( animate );

    // [...]

    let quat = quat_data[i]; 
    var quaternion = new THREE.Quaternion(quat[0],quat[1],quat[2],quat[3]);

    // [...]
}

What you expect is that the input to the function animate is the array of animation data, but it is a single time value.

You've to do it like this:

var animate = function (quat_data) {
    requestAnimationFrame( function() { animate(quat_data); } );

    // [...]
}

Upvotes: 1

Related Questions