Code below is just extended version from Three JS FBX loader. Added object.updateMatrix(); as you’ve recommended Michael, but I can’t see any change in the object position.
We use latest dev version of the Three JS.
Code:
container = document.getElementById(divName);
camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 112, 260);
controls = new THREE.OrbitControls(camera);
controls.target.set(0, 112, 0);
var limit = Math.PI * 0.125;
controls.enableZoom = false;
controls.minPolarAngle = Math.PI * 0.4;
controls.maxPolarAngle = Math.PI * 0.6;
controls.minAzimuthAngle = -limit;
controls.maxAzimuthAngle = limit;
controls.update();
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 200, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 200, 100);
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add(light);
var modelPath = '../models3d/Sheila/Talk2.fbx';
// model
var loader = new THREE.FBXLoader();
loader.load(modelPath, function (object) {
var baseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
object.mixer = new THREE.AnimationMixer(object);
mixers.push(object.mixer);
var action = object.mixer.clipAction(object.animations[0]);
action.play();
object.traverse(function (child) {
if (child.isMesh) {
if (child.material != null) {
var mat = child.material;
if (mat.transparent) {
mat.transparent = false;
}
mat.side = THREE.DoubleSide;
}
child.castShadow = true;
child.receiveShadow = true;
}
});
scene.add(object);
//object.position = new THREE.Vector3(500, 0, 0);
object.position.y = 3000;
object.updateMatrix();
});
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(container.offsetWidth, container.offsetWidth * 0.56);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
Object is still at it’s original position.
I’m guessing position might be overrided by the object’s animation position ?
Does this happen for you with other FBX models? I’ve tested this with a couple of models and I can’t reproduce your problem, they all get translated just fine with or without the animations applied.
That’s correct sir, it seems other models from Mixamo work fine.
Problem is only regarding this particular model exported from DAZ to Mixamo and then exported from Mixamo to Three JS, maybe there’s still something related with Euler’s orders regarding positioning (just guess) ?
One of the animations overwrites the position of this model — You’ll need to either stop the animation, or wrap the model in another THREE.Group and move that group around.