rotation - 三个J，改变旋转点

Question

我正在尝试围绕一个点(蓝色)旋转一个对象(绿色)在三个.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);

但结果却并非如此

提前致谢

Answer 1

首先是一个挑剔:我会像这样重写你的回调:

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

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