Search code examples
javascriptthree.jscameraquaternions

correct way of implementing this older R70 threejs code to work with newer version


I have this bit of code which is throwing an error. However, it works in this jsfiddle just fine. I'm trying to rotate a cube and also pan it with trackball controls. This works in the fiddle but when I bring it into visual studio it's throwing this error in chrome, "Cannot read property 'multiplyQuaternions' of undefined".

https://jsfiddle.net/perrinprograms/n6u6asza/668/

This is the code which I am trying to implement. I'm guessing it's because the fiddle is using an older version of three.js and I am using a newer one in my project. Does anyone know if there is a way to properly write this line, "geometry.quaternion"? Thanks.

var geometry = new THREE.Geometry(); 

deltaRotationQuaternion = new THREE.Quaternion()
                    .setFromEuler(new THREE.Euler(
                        toRadians(deltaMove.y * 0.4),
                        toRadians(deltaMove.x * 0.4),
                        0,
                        'XYZ'
                    ));
            geometry.quaternion.multiplyQuaternions(deltaRotationQuaternion, geometry.quaternion);
         }

Solution

  • THREE.Geometry doesn't have a quaternion property (and from what I can tell, r70 didn't have it either).

    THREE.Object3D does have that property, and is the base class for THREE.Mesh, so you can use it like this:

    var myMesh = new THREE.Mesh(geometry, material);
    myMesh.quaternion.multiplyQuaternions(deltaRotationQuaternion, myMesh.quaternion);
    

    Edit: Looking at your fiddle, it looks like you already figured that out, correct?

    three.js r87