Question

I'm writing an export script (ruby) in SketchUp, and I'm having trouble applying the same transformation in Three.js side, so that objects have the same rotation in Three.js as they appear in SketchUp.

I can read the rotation using the SketchUp Transformation class: http://www.sketchup.com/intl/en/developer/docs/ourdoc/transformation.php

I can get these kind of values from a rotated component that I pass to my Three.js code. All are Vectors in the form of X, Y, Z

xaxis: 0.0157771536190692,-0.0,-0.0199058138160762
yaxis: -0.0199058138160762,0.0,-0.0157771536190692
zaxis: 0.0,0.0254,-0.0 
origin: 1.4975125146729,0.0,-1.25735397455338

Objects are positioned correctly if I just copy the values from origin to Object3D.position. But I have no idea how to apply the xaxis, yaxis and zaxis values to Object3D.rotation.

Three.js has various ways to rotate a model, via Matrix manipulation, quaternion, angles, radians and whatnot. But how to set object rotation using those axis values?

EDIT:

SketchUp Transformation provides also a .to_a (to array) method, which I think is supposed to return a 16 element matrix. I tried to use that in Three.js:

// tm is from SketchUp:Transformation to_a
var tm = "0.621147780278315,0.783693457325836,-0.0,0.0,-0.783693457325836,0.621147780278315,0.0,0.0,0.0,0.0,1.0,0.0,58.9571856170433,49.5021249824165,0.0,1.0";
    tm = tm.split(",");
for (var i = 0; i < tm.length; i++) {
  tm[i] = tm[i] * 1.0;
}

var matrix = new THREE.Matrix4(tm[0], tm[1], tm[2], tm[3], tm[4], tm[5], tm[6], tm[7], tm[8], tm[9], tm[10], tm[11], tm[12], tm[13], tm[14], tm[15]);

obj.applyMatrix(matrix);

This results in a total mess however, so there's still something wrong.

Was it helpful?

Solution

Based on information here: http://sketchucation.com/forums/viewtopic.php?f=180&t=46944&p=419606&hilit=matrix#p419606

I was able to construct a working Matrix4. I think the problem was both in unit scales (see the .to_m conversion in some of the elements) and the order of matrix array elements. In Sketchup:

tr = transformation.to_a

trc = [tr[0],tr[8],-(tr[4]),tr[12].to_m, tr[2],tr[10],-(tr[6]),tr[14].to_m, -(tr[1]),-(tr[9]),tr[5],-(tr[13].to_m), 0.0, 0.0, 0.0, 1.0] # the last 4 values are unused in Sketchup

el.attributes["tm"] = trc.join(",") # rotation and scale matrix

el.attributes["to"] = convertscale(transformation.origin) # position

In Three.js

var origin = this.parsevector3(node.getAttribute("to"));
obj.position = origin;


var tm = node.getAttribute("tm");
    tm = tm.split(",");
for (var i = 0; i < tm.length; i++) {
  tm[i] = tm[i] * 1.0;
}

var matrix = new THREE.Matrix4(tm[0], tm[1], tm[2], tm[3], tm[4], tm[5], tm[6], tm[7], tm[8], tm[9], tm[10], tm[11], tm[12], tm[13], tm[14], tm[15]);

obj.applyMatrix(matrix);

Sorry there is some application specific logic in the code, but I think the idea can be found regardless, if someone runs into similar problems.

OTHER TIPS

SketchUp Transformation provides also a .to_a (to array) method, which I think is supposed to return a 16 element matrix.

It has been a while since you posted this, but here's a useful link for people who bump into this in the future: http://www.martinrinehart.com/models/tutorial/tutorial_t.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top