Trzy sposoby obracania się wokół centrum obiektu zamiast centrum świata

Question

dwa obiekty na scenie. oś obrotu sześcianu powinna być środkiem sześcianu, tak się spodziewam.

, ale oś obrotu modelu buta jest osią y świata.

mój oryginalny kod to.

cube.rotation.y += 0.01; 
shoe.rotation.y += 0.01; 

Znalazłem rozwiązanie w stackoverflow coś takiego:

cube.rotation.y += 0.01; 
var pivot = new THREE.Object3D(); 
pivot.add(shoe); 
pivot.rotation.y += 0.01; 

ale to nie działa. , a następnie zmieniam pozycję buta.

cube.rotation.y += 0.01; 
var pivot = new THREE.Object3D(); 
shoe.position.set(-5,0,0); 
pivot.add(shoe); 
pivot.rotation.y += 0.01; 

wynik jest teraz lepszy, ale nadal nie jest doskonały. a ponieważ istnieje wiele modeli obuwia, nie mogę określić innej pozycji dla każdego modelu obuwia.

Answer 1

Jeśli twoja siatka nie obraca się wokół środka, to dlatego, że wierzchołki geometrii są przesunięte względem punktu początkowego.

można zautomatyzować repozycjonowanie za pomocą obwiedni do określenia rozsądnego centrum, a następnie przesunięcie położenia siatki w taki sposób:

var box = new THREE.Box3().setFromObject(mesh); 
box.center(mesh.position); // this re-sets the mesh position 
mesh.position.multiplyScalar(- 1); 

Następnie dodać siatkę do obiektu przegubu:

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

W pętli animacji obróć przestawny;

pivot.rotation.y += 0.01; 

---

EDIT: A different solution jest przełożenie wierzchołki geometrii więc geometria jest wokół, lub w pobliżu, pochodzenie:

geometry.translate(distX, distY, distZ); 

Three.js r.78

Answer 2

Wykorzystanie THREE.Geometry.prototype.center w następujący sposób:

myGeometry.center(); 

To jest jak użycie myGeometery.translate (x, y, z) z automatycznym centrowaniem (x, y, z).

Answer 3

Rozwiązania przestawne nie działa dla mnie.

Z OBJLoader.js (do ładowania obiektów .obj), musisz zdobyć boundingBox obiektu, uzyskać jego środek, pomnożyć skalar przez -1 i użyć go do przetłumaczenia geometrii KAŻDEGO z geometrii dziecka. Następnie musisz ponownie zaktualizować boundingBox, jeśli chcesz go użyć do jakiegoś celu.

Oto funkcja, która ładuje obiekt i "normalizuje" jego wierzchołki geometrii, biorąc pod uwagę katalog i nazwę plików OBJ i MTL (teksturę) (na przykład, jeśli pliki OBJ i MTL to dir1/myObject.obj i dir1/myObject.mtl, następnie wywołujemy loadObj ("dir1", "myObject")).

function loadObj(dir, objName) { 
     var onProgress = function(xhr) { 
      if (xhr.lengthComputable) { 
       var percentComplete = xhr.loaded/xhr.total * 100; 
       console.log(Math.round(percentComplete, 2) + '% downloaded'); 
      } 
     }; 

     var onError = function(xhr) {}; 

     // Manager 
     var manager = new THREE.LoadingManager(); 
     manager.onProgress = function(item, loaded, total) { 
      console.log('Started loading file: ' + item + '.\nLoaded ' + loaded + ' of ' + total + ' files.'); 
     }; 

     var mtlLoader = new THREE.MTLLoader(); 
     mtlLoader.setPath(dir); 
     mtlLoader.load(objName + '.mtl', function(materials) { 
      materials.preload(); 

      // Model 
      var loader = new THREE.OBJLoader(manager); 
      loader.setMaterials(materials); 
      loader.setPath(dir); 
      loader.load(objName + '.obj', function (object) { 

      var objBbox = new THREE.Box3().setFromObject(object); 

      // Geometry vertices centering to world axis 
      var bboxCenter = objBbox.getCenter().clone(); 
      bboxCenter.multiplyScalar(-1); 

      object.traverse(function (child) { 
       if (child instanceof THREE.Mesh) { 
        child.geometry.translate(bboxCenter.x, bboxCenter.y, bboxCenter.z); 
       } 
      }); 

      objBbox.setFromObject(object); // Update the bounding box 

      scene.add(object); 
      }, onProgress, onError); 
     }); 
    } 

Answer 4

Herezje jak mam rzeczy do pracy na R86

// Store original position 
let box = new THREE.Box3().setFromObject(this.mesh); 
let offset = box.getCenter(); 

// Center geometry faces 
this.geometry.center(); 

// Add to pivot group 
this.group = new THREE.Object3D(); 
this.group.add(this.mesh); 

// Offset pivot group by original position 
this.group.position.set(offset.x, offset.y, offset.z);