Converting Sketchup Transformation to Three.js rotation+scale+position or Matrix

拜拜、爱过 提交于 2019-12-11 23:18:10

问题


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.


回答1:


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.




回答2:


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



来源:https://stackoverflow.com/questions/17493888/converting-sketchup-transformation-to-three-js-rotationscaleposition-or-matrix

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!