最小的three.js骨架动画?

时间:2017-12-05 19:48:11

标签: three.js

我想了解three.js如何在光荣的低级细节中激活装配模型。这是我目前的代码:

$out

renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); camera.position.set(0, 0, 50); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene = new THREE.Scene(); var geometry = new THREE.BoxGeometry(10, 1, 1); for (var i = 0; i < geometry.vertices.length; i++) { geometry.skinIndices.push(new THREE.Vector4(0, 1, 0, 0)); geometry.skinWeights.push(new THREE.Vector4(1, 1, 0, 0)); } var bones = []; var bone1 = new THREE.Bone(); bone1.position.x = 5; bones.push(bone1); var bone2 = new THREE.Bone(); bone2.position.x = -5; bones.push(bone2); bone1.add(bone2); var material = new THREE.MeshBasicMaterial({ color: 0x156289 }); var mesh = new THREE.SkinnedMesh(geometry, material); var skeleton = new THREE.Skeleton(bones); mesh.add(bone1); mesh.bind(skeleton); scene.add(mesh); skeletonHelper = new THREE.SkeletonHelper(mesh); skeletonHelper.material.linewidth = 2; scene.add(skeletonHelper); function animate() { requestAnimationFrame(animate); var time = Date.now() * 0.001; mesh.skeleton.bones[0].rotation.z = Math.sin(time) * 2; renderer.render(scene, camera); } animate(); 显然是动画的,但框不是。如何修复代码以设置框的动画效果?

这是带有上述代码的CodePen笔:

1 个答案:

答案 0 :(得分:0)

要修复,只需在材质中添加Application.Echo True Me.txtPleaseWait.Visible = False Me.Repaint Debug.Print Me.txtPleaseWait.Visible DoCmd.Hourglass False Debug.Print "got to end of resting form state" 属性即可。所以这一行:

skinning: true

会变成这样:

var material = new THREE.MeshBasicMaterial({ color: 0x156289 });