如何链接对象并在三个js中相对移动它们？

如何解决如何链接对象并在三个js中相对移动它们？

我用three.js创建了一个人体模型。

我希望能够：

链接所有具有父级连接的对象
相对移动对象（如果移动，则应移动肘部，但如果移动手腕，则不应移动其他部位）

我在下面编写了代码，并以jsfiddle为例。不确定这是否正确。

var scene,camera,renderer,pivot;

//main
init();
animate();

//init
function init() {
  //scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf0f0f0);

  //camera
  camera = new THREE.PerspectiveCamera(140,window.innerWidth / window.innerHeight,0.1,10000);

  //neck
  var geometry = new THREE.BoxBufferGeometry(2,3,1);
  var material = new THREE.MeshNormalMaterial({
    transparent: true,opacity: 0.5
  });
  var figure = new THREE.Mesh(geometry,material);
  figure.position.set(0,1.5,0);

  //body
  var geometry2 = new THREE.BoxBufferGeometry(0.5,0.5,0.5);
  /* geometry2.rotateZ(THREE.Math.degToRad(90)); // ROTATE GEOMETRY SO IT'S IN THE CORRECT ORIENTATION */
  var figure2 = new THREE.Mesh(geometry2,material);
  figure2.position.set(0,0); // MOVE THE GEOMOETRY UP BY HALF SO PIVOT IS AT THE BOTTOM OF THE GEO
  /* figure2.rotation.set(0,Math.PI / 2); */
  figure.add(figure2);

  //head
  var geometry3 = new THREE.SphereGeometry(0.75,32,32);
  var material3 = new THREE.MeshBasicMaterial({
    color: 0xffff00
  });
  var sphere3 = new THREE.Mesh(geometry3,material3);
  sphere3.position.set(0,2.5,0);
  figure.add(sphere3)

  //right shoulder 
  var geometry4 = new THREE.SphereGeometry(0.25,32);
  var material4 = new THREE.MeshBasicMaterial({
    color: 0xffff00
  });
  var sphere4 = new THREE.Mesh(geometry4,material4);
  sphere4.position.set(1.25,1.25,0);
  figure.add(sphere4)

  //right hand top
  var geometry5 = new THREE.BoxBufferGeometry(0.5,0.5);
  var figure5 = new THREE.Mesh(geometry5,material);
  figure5.position.set(1.25,0.25,0);
  figure.add(figure5);

  //right elbow
  var geometry6 = new THREE.SphereGeometry(0.25,32);
  var sphere6 = new THREE.Mesh(geometry6,material3);
  sphere6.position.set(1.25,-0.75,0);
  figure.add(sphere6)

  //right hand bottom
  var geometry7 = new THREE.BoxBufferGeometry(0.5,0.5);
  var figure7 = new THREE.Mesh(geometry7,material);
  figure7.position.set(1.25,-1.75,0);
  figure.add(figure7);
  
  //right hand bottom sphere
  var geometry8 = new THREE.SphereGeometry(0.25,32);
  var sphere8 = new THREE.Mesh(geometry8,material3);
  sphere8.position.set(1.25,-2.75,0);
  figure.add(sphere8);
  
  //right wrist
  var geometry9 = new THREE.BoxBufferGeometry(0.5,0.5);
  var figure9 = new THREE.Mesh(geometry9,material);
  figure9.position.set(1.25,-3.25,0);
  figure.add(figure9);
  
  //left shoulder 
  var geometry10 = new THREE.SphereGeometry(0.25,32);
  var sphere10 = new THREE.Mesh(geometry10,material4);
  sphere10.position.set(-1.25,0);
  figure.add(sphere10)

  //left hand top
  var geometry11 = new THREE.BoxBufferGeometry(0.5,0.5);
  var figure11 = new THREE.Mesh(geometry11,material);
  figure11.position.set(-1.25,0);
  figure.add(figure11);

  //left elbow
  var geometry12 = new THREE.SphereGeometry(0.25,32);
  var sphere12 = new THREE.Mesh(geometry12,material3);
  sphere12.position.set(-1.25,0);
  figure.add(sphere12)

  //left hand bottom
  var geometry13 = new THREE.BoxBufferGeometry(0.5,0.5);
  var figure13 = new THREE.Mesh(geometry13,material);
  figure13.position.set(-1.25,0);
  figure.add(figure13);
  
  //left hand bottom sphere
  var geometry14 = new THREE.SphereGeometry(0.25,32);
  var sphere14 = new THREE.Mesh(geometry14,material3);
  sphere14.position.set(-1.25,0);
  figure.add(sphere14);
  
  //left wrist
  var geometry15 = new THREE.BoxBufferGeometry(0.5,0.5);
  var figure15 = new THREE.Mesh(geometry15,material);
  figure15.position.set(-1.25,0);
  figure.add(figure15);
  
  //left hip
  var geometry16 = new THREE.SphereGeometry(0.5,32);
  var sphere16 = new THREE.Mesh(geometry16,material3);
  sphere16.position.set(-0.5,-2.25,0);
  figure.add(sphere16);
  
  //left haunch
  var geometry17 = new THREE.BoxBufferGeometry(1,1.75,1);
  var figure17 = new THREE.Mesh(geometry17,material);
  figure17.position.set(-0.5,-3.65,0);
  figure.add(figure17);
  
  //left knee
  var geometry18 = new THREE.SphereGeometry(0.5,32);
  var sphere18 = new THREE.Mesh(geometry18,material3);
  sphere18.position.set(-0.5,-5,0);
  figure.add(sphere18);
  
  //left shin
  var geometry19 = new THREE.BoxBufferGeometry(1,1);
  var figure19 = new THREE.Mesh(geometry19,material);
  figure19.position.set(-0.5,-6.35,0);
  figure.add(figure19);
 
  //left ankle
  var geometry20 = new THREE.SphereGeometry(0.25,32);
  var sphere20 = new THREE.Mesh(geometry20,material3);
  sphere20.position.set(-0.5,-7.5,0);
  figure.add(sphere20);
  
  //left foot
  var geometry21 = new THREE.BoxBufferGeometry(1,1.5);
  var figure21 = new THREE.Mesh(geometry21,material);
  figure21.position.set(-0.5,-7.85,0.25);
  figure.add(figure21);
  
  //right hip
  var geometry22 = new THREE.SphereGeometry(0.5,32);
  var sphere22 = new THREE.Mesh(geometry22,material3);
  sphere22.position.set(0.5,0);
  figure.add(sphere22);
  
  //right haunch
  var geometry23 = new THREE.BoxBufferGeometry(1,1);
  var figure23 = new THREE.Mesh(geometry23,material);
  figure23.position.set(0.5,0);
  figure.add(figure23);

  //right knee
  var geometry24 = new THREE.SphereGeometry(0.5,32);
  var sphere24 = new THREE.Mesh(geometry24,material3);
  sphere24.position.set(0.5,0);
  figure.add(sphere24);
  
  //right shin
  var geometry25 = new THREE.BoxBufferGeometry(1,1);
  var figure25 = new THREE.Mesh(geometry25,material);
  figure25.position.set(0.5,0);
  figure.add(figure25);
 
  //right ankle
  var geometry26 = new THREE.SphereGeometry(0.25,32);
  var sphere26 = new THREE.Mesh(geometry26,material3);
  sphere26.position.set(0.5,0);
  figure.add(sphere26);
  
  //right foot
  var geometry27 = new THREE.BoxBufferGeometry(1,1.5);
  var figure27 = new THREE.Mesh(geometry27,material);
  figure27.position.set(0.5,0.25);
  figure.add(figure27);


  //add figure
  scene.add(figure);

  scene.add(new THREE.AxesHelper());

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //add grid
  /* scene.add(new THREE.GridHelper(10,20)) */

  camera.position.z = 5;

  //top view on object
  /*  camera.position.set(0,10,0);
   camera.up.set(0,-1);
   camera.lookAt(0,0); */

  //controls to rotate camera
  controls2 = new THREE.OrbitControls(camera,renderer.domElement);
  controls2.minPolarAngle = Math.PI/2;
  controls2.maxPolarAngle = Math.PI/2;

  //controls to drag object in 3d
  /*   var cubePoints = [];
    cubePoints.push(figure2);
    var controls = new THREE.DragControls(cubePoints,renderer.domElement); */

}


//animate
function animate() {
  requestAnimationFrame(animate);

  render();
};

//render
function render() {
  renderer.render(scene,camera);
};

解决方法

要在Three.js中链接网格，我通常使用组（请参见https://threejs.org/docs/#api/en/objects/Group），我还使用它们通过将网格放在所需的枢轴点为一组的组中来更改网格的枢轴点。组的坐标。

当然，您可以为您的案例嵌套组，例如带有手网格的组可以位于另一个具有前臂网格的组内，依此类推。

为了根据手部位置移动肘部位置（如果我说对了），您应该使用Inverse Kinematics，对于Three.js，有https://github.com/jsantell/THREE.IK之类的实现，但我从未使用过我不能告诉你更多有关此事。

希望您能解决您的问题。

如何链接对象并在三个js中相对移动它们？

如何解决如何链接对象并在三个js中相对移动它们？

解决方法

相关推荐