SteerBehavior - Vehicle facing the wrong direction

[mikeyriver2]

Hi! I'm quite new to threejs and 3d stuff in general and I've been experimenting the SteeringBehavior.

I recently purchased a model from sketchfab and basically my goal is to have the model follow the cursor around in a 2d plane. The model seems to be following the target (point of the cursor) just fine, but the model is facing the wrong way.

Loading the gltf file:

let dog;
    const gltfLoader = new GLTFLoader();
    
    gltfLoader.load('./premium_wolf/source/model.gltf', (gltcScene) => {
      dog = gltcScene;
      dog.scene.matrixAutoUpdate = false; 
      vehicle.setRenderComponent(dog.scene, sync);
      scene.add(dog.scene);
    });

Applying seek behavior to vehicle/my model:

    const seekBehavior = new YUKA.ArriveBehavior(target.position, 2, 1); 
    vehicle.steering.add(seekBehavior);

Output:

Expected Behavior:

• Head should be facing towards the target (and not the butt :p)

Is there a way to rotate the model while the steering behavior is active?

[Mugen87]

Is there a way to rotate the model while the steering behavior is active?

Yes, you have to make sure that the default forward direction of the model is (0,0,1). That means when you load the model and add it to the scene, it should look along the positive z-axis.

Ideally, you fix this in Blender and just import the updated model. If you don't want to do that, transform the model's geometry via rotateX(), rotateY() or rotateZ()(depending on your use case). More information about the geometry API at the three.js docs.

[mikeyriver2]

Hi @Mugen87 thanks for the reply! I managed to get around this by rotating the model by 180 degrees using the threejs editor :>

If you don't want to do that, transform the model's geometry via rotateX(), rotateY() or rotateZ()(depending on your use case). More information about the geometry API at the three.js docs.

Right, this was what I tried before editing the gltf itself. But if I'm not mistaken, since I had to call dog.scene.matrixAutoUpdate = false; to allow YUKA to do the calculations instead, using rotation.x or rotateX() did not apply. Is there a way for YUKA to handle rotations manually? I also tried rotateTo but since the steering behavior is applied to the model, it didn't rotate - https://mugen87.github.io/yuka/docs/Vehicle.html

[Mugen87]

using rotation.x or rotateX() did not apply.

You are using the Object3D interface. When using the methods from BufferGeometry, the calculations of Yuka do not interfere.

Check out how a cone geometry is transformed in order to achieve a proper alignment:

yuka/examples/math/orientation/index.html

Lines 39 to 40 in e6250dc

	const entityGeometry = new THREE.ConeBufferGeometry( 0.1, 0.5, 8 );
	entityGeometry.rotateX( Math.PI * 0.5 );