我会先说我是 Blender/3DS MAX/ThreeJS 和图形编程的新手。
我从《星际争霸》编辑器中将飞龙(来自《星际争霸》)拍打翅膀的动画导出为 .m3 文件,然后将其导入到 Blender 中。导出后,我可以将生成的 .json 导入到我的 ES6 应用程序中,但由于某种原因,使用 THREE.Animation,虽然导入的 Mutalisk 的位置正确更改,但它会左右摇摆,而 Mutalisk 对象的实际拍动却不会不会发生。
我的渲染器如下所示:
import THREE from 'three';
export default class Renderer {
constructor(game, canvas) {
this.game = game;
this.canvas = canvas;
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, this.canvas.width / this.canvas.height, 1, 10000);
this.camera.position.z = 2;
this.camera.position.y = 1;
this.clock = new THREE.Clock;
this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
this.renderer.setSize( this.canvas.width, this.canvas.height );
}
// called by my Game class, which waits for the mesh to load before attempting to add it to the scene
addMeshToScene(mesh) {
this.mesh = mesh;
this.scene.add(this.mesh);
this.animation = new THREE.Animation(
this.mesh,
this.mesh.geometry.animations[ 2 ]
);
this.animation.play();
}
renderFrame() {
THREE.AnimationHandler.update(this.clock.getDelta());
this.renderer.render(this.scene, this.camera);
}
}
这是渲染图。正如我所说,我的浏览器中的飞龙沿着 Y 轴弹跳,但没有拍打。
谁能解释一下为什么会发生运动而不是拍打?
编辑:这是我的 Blender 导出设置。
最佳答案
已解决。问题是 Material 必须处于蒙皮模式才能正确包裹骨架。当我从 JSON 创建网格时,我必须设置 material.skinning = true
import THREE from 'three';
export default class Mesh {
constructor(name) {
this.name = name;
this.loaded = false;
this.filepath = `./meshes/${this.name}.json`
this.load();
}
load() {
var loader = new THREE.JSONLoader();
loader.load(this.filepath, (geometry) => {
this.geometry = geometry;
var material = new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } );
material.skinning = true; // this is where the magic happens
this.mesh = new THREE.SkinnedMesh(geometry, material);
this.loaded = true;
});
}
}
关于javascript - ThreeJS动画几何体不更新但位置会更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32665180/