2

我对通过搅拌机插件从搅拌机导出到 THREE.js 的动画对象有问题。动画没有开始运行...

当然，我在从 blender 导出并导入到 THREE.js 库时尝试了许多设置组合，但都没有成功。

这是代码，我认为应该可以。评论关键部分注释可能是一些错误的地方。示例中也包含指向源 JSON 的链接。当然，如果需要，我可以提供源 *.blend 文件...

var tgaLoader = new THREE.TGALoader();
var objectLoader = new THREE.ObjectLoader();

var clock = new THREE.Clock();

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.getElementById('container').appendChild(renderer.domElement);

objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) {
  scene = loadedScene;
  mesh = scene.children[0];

  scene.background = new THREE.Color('white');
  mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA') });

  hemiLight = new THREE.HemisphereLight('white', 'white', 0.6);
  scene.add(hemiLight);

  camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  camera.position.set(500, 200, -100);

  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, 50, 0);
  controls.update();

  var geometry = new THREE.PlaneBufferGeometry(200, 200);
  var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
  var ground = new THREE.Mesh(geometry, material);

  ground.rotation.x = - Math.PI / 2;

  scene.add(ground);

  mesh.scale.set(-1, -1, 1);

  // Critical section...
  mixer = new THREE.AnimationMixer(mesh);
  var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true);
  var animation = mixer.clipAction(sequence);
  animation.play();
  // End of critital section

  animate();
});

window.onresize = function() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
};

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var delta = 0.75 * clock.getDelta();
  mixer.update(delta);
  renderer.render(scene, camera);
}
body {
  margin: 0px;
  overflow: hidden;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

感谢您的任何建议。

4

1 回答 1

4

我深入研究动画并注意到它使用morphTargets. 然后我想起了这个例子。因此，关键时刻是将.morphTarget材料的参数设置为true，因此，我已将其应用于代码片段中的材料并开始工作：

mesh.material = new THREE.MeshPhongMaterial({
    map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),
    morphTargets: true
});

虽然，我不确定这种方法是否正确，但至少它是有效的）

var tgaLoader = new THREE.TGALoader();
var objectLoader = new THREE.ObjectLoader();

var clock = new THREE.Clock();

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.getElementById('container').appendChild(renderer.domElement);

objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) {
  scene = loadedScene;
  mesh = scene.children[0];

  scene.background = new THREE.Color('white');
  mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'), morphTargets: true });

  hemiLight = new THREE.HemisphereLight('white', 'white', 0.6);
  scene.add(hemiLight);

  camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  camera.position.set(500, 200, -100);

  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, 50, 0);
  controls.update();

  var geometry = new THREE.PlaneBufferGeometry(200, 200);
  var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
  var ground = new THREE.Mesh(geometry, material);

  ground.rotation.x = - Math.PI / 2;

  scene.add(ground);

  mesh.scale.set(-1, -1, 1);

  // Critical section...
  mixer = new THREE.AnimationMixer(mesh);
  var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true);
  var animation = mixer.clipAction(sequence);
  animation.play();
  // End of critital section

  animate();
});

window.onresize = function() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
};

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var delta = 0.75 * clock.getDelta();
  mixer.update(delta);
  renderer.render(scene, camera);
}
body {
  margin: 0px;
  overflow: hidden;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

于 2017-10-26T10:29:15.720 回答