Question

我做了一个类似人的图形，现在当我单击waveButton时，我试图用他的左手使图形波动。我创建了一个层次结构，其中元素主体是父级，而leftArm，rightArm，leftLeg，rightLeg，head是其子级。

//creating body
var body = new THREE.Mesh( geometry, material );
body.position.set(0,0,0 );

//creating leftArm
var geometry = new THREE.BoxGeometry(sizes.armW,sizes.armH,sizes.armD);
var leftArm = new THREE.Mesh(geometry, material);
leftArm.position.set(sizes.bodyW/2 + sizes.armW/2,sizes.bodyH/100,0);


//with this function I am trying to rotate the arm for waving, but the arm is
 rotating like a clock hand, meaning rotating around its middle point.
function waveHand()
{
    leftArm.rotation.z += direction * 0.01;
}

我该如何编辑此功能，以便使手保持附着在身体上并挥动，而不是脱离主体并绕其中心旋转。

Answer 1

使用三角函数：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var box1Geom = new THREE.BoxGeometry(0.25, 2, 0.25);
box1Geom.translate(0, 1, 0);
var box1 = new THREE.Mesh(box1Geom, new THREE.MeshNormalMaterial());
scene.add(box1);

var box2Geom = new THREE.BoxGeometry(0.125, 1, 0.125);
box2Geom.translate(0, 0.5, 0);
var box2 = new THREE.Mesh(box2Geom, new THREE.MeshNormalMaterial());
box2.position.y = 2;
box1.add(box2);

var clock = new THREE.Clock();
var time = 0;
var delta = 0;

render();

function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta;
  box1.rotation.z = Math.sin(time * 2) * THREE.Math.degToRad(10);
  box2.rotation.z = Math.cos(time * 8) * THREE.Math.degToRad(20) + THREE.Math.degToRad(20);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

图three.js的挥手

1 个答案: