Three Js，如何改变旋转点？

Question

Three Js，如何改变旋转点？

3

我正在尝试在three.js中围绕一个点（蓝色）旋转一个对象（绿色）。如图所示，绿色对象围绕红点（0,0,0）旋转。第一个问题：我如何找到蓝色点的坐标？第二个问题：我如何围绕蓝色点旋转绿色对象？（在场景中，有3个不同的对象，第一个由红点指向，第二个由蓝点指向，第三个被绿色包围。）

loader.load("models/socle.obj", "models/socle.mtl", function(geometry) {
scene.add( geometry );
}, onProgress, onError); // Red OBJ

loader.load("models/motor1.obj", "models/motor1.mtl", function(geometry) {
scene.add( geometry );
}, onProgress, onError);

loader.load("models/motor12.obj", "models/motor12.mtl", function(geometry) {
scene.add( geometry );
}, onProgress, onError); // BLUE


loader.load("models/motor13.obj", "models/motor13.mtl", function(geometry) {
//geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) );

geometry.rotation.z = 0.17; // ~10 degrees
scene.add( geometry );
}, onProgress, onError); // RED

编辑：我直接从Blender中找到了蓝点的坐标：16，0，0 我尝试过：

loader.load("models/motor12.obj", "models/motor12.mtl", function(mesh) {
mesh.applyMatrix( new THREE.Matrix4().makeTranslation(16, 0, 0 ));


mesh.rotation.z = 0.17;
scene.add( mesh );
}, onProgress, onError);

但是结果并不如预期所愿。提前致谢。

- Epitouille

1个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Bob Woodley · Accepted Answer

首先有一点小问题：我会将你的回调函数重写成这样：

loader.load("models/motor12.obj", "models/motor12.mtl",     function(mesh) {
    scene.add( mesh );
}, onProgress, onError); // BLUE

这个加载器不会提交 THREE.geometry，它会提交一个 THREE.Object3D 例如一个网格。您应该明确两者之间的区别。

对于第一个问题，您可以通过查看其位置对象来找到蓝色的位置（坐标）,即 mesh.position.x mesh.position.y mesh.position.z。

对于第二个问题，有多种方法可以解决。我以前写过一篇博客文章，详细介绍了在 three.js 中旋转几何体和网格的各种选项和问题: http://rwoodley.org/?p=1073。

最简单的选择可能是将绿色对象作为蓝点的子级，并旋转蓝点。如果您不想旋转蓝点，只需将一个透明的对象放在蓝点的位置，使绿色对象成为透明对象的子级并旋转透明对象即可。