轴改旋转轴三js

时间:2018-08-02 15:15:04

标签: javascript three.js 3d augmented-reality

您好,我实际上使用three.js,我想通过x轴旋转3d模型,但是当我尝试代码时:clear all close all Trial = ones(1,0); Category = ones(1,0); Rating= ones(1,0); Interpretation = ones(1,0) T = table; SaveAllResults = table; basedir = ''; % Define input directory output = ''; % Define output directory for subjects = []; enter subject id fullMatFileName = fullfile(basedir, ['M', num2str(subjects), '_postfix.txt'])%Enter filename if ~exist(fullMatFileName, 'file') message = sprintf('%s does not exist', fullMatFileName); uiwait(warndlg(message)); else fid = fopen(fullMatFileName, 'r') datavar = []; row = 1; while ~feof(fid) aline = fgetl(fid); aline = regexp(aline, '\t', 'split'); datavar(row, :) = cellfun(@str2double, aline); row = row+1; end fclose(fid); end 它不像我想要的那样工作。下图在左图上显示了目前的工作方式,在右图上显示了我想要的内容。 PS:类似公爵的形状是我的3D模型 enter image description here

3 个答案:

答案 0 :(得分:3)

这里发生的是,您的鸭子图片(做得好!)清楚地说明了网格的原点不在中心。

一种解决方案是沿Y方向平移网格的顶点,以使原点到达中间(另请参见this answer):

geometry.translate( distX, distY, distZ );

还有一种自动方法,可以通过使用边界框定义网格的中心来重置网格的原点(也就是说,您不必计算沿Y轴平移顶点的距离):

// Create a bounding box:
var box = new THREE.Box3().setFromObject( mesh );
// Reset mesh position:
box.center(mesh.position);
mesh.position.multiplyScalar(-1);

然后将网格添加到枢轴对象:

var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(mesh);

(另请参见this answer)。现在,您应该能够根据需要围绕X轴旋转鸭子了。

答案 1 :(得分:1)

我尝试了两种方法来解决此问题,但没有成功,这是我的代码: 安迪是我的对象

// Create a bounding box:
                                var box = new THREE.Box3().setFromObject( andy );
                                // Reset mesh position:
                                box.getCenter(andy.position);
                                andy.position.multiplyScalar(-1);
                                var pivot = new THREE.Group();
                                scene.add(pivot);
                                pivot.add(andy);


                                //var xAxis = new THREE.Vector3(0,-1,0);

                                //rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);

                                markerRoot.add(andy);

                                /********* génère la vitesse de rotation de l'objet *************/
                                onRenderFcts.push(function(){ //loop function
                                    //andy.children[0].material.opacity -= 0.01;
                                    //andy.position.x -= 0.01;
                                    pivot.rotation.x -= 0.01;
                                    //andy.rotation.x += 0.01;
                                    //andy.rotation.y += 0.01;
                                    //andy.rotation.z += 0.01;
                                })

编辑:我解决了问题,这里是代码:

// Create a bounding box:
                                var box = new THREE.Box3().setFromObject( andy );
                                // Reset mesh position:
                                box.getCenter(andy.position);
                                andy.position.multiplyScalar(-1);
                                var pivot = new THREE.Group();
                                scene.add(pivot);
                                pivot.add(andy);


                                //var xAxis = new THREE.Vector3(0,-1,0);

                                //rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);
                                andy.children[0].geometry.center();
                                markerRoot.add(andy);

                                /********* génère la vitesse de rotation de l'objet *************/
                                onRenderFcts.push(function(){
                                    //andy.children[0].material.opacity -= 0.01;
                                    //andy.position.x -= 0.01;

                                    andy.rotation.x += 0.01;
                                    //andy.rotation.y += 0.01;
                                    //andy.rotation.z += 0.01;
                                })

答案 2 :(得分:0)

Object.children [0] .geometry.center()-这是关键行。在这行之后,一切都应该没事。