Thanks for your reply.
This is the start scene…

If the cube is rotated on the z axis as shown in the code, the rotateTowards will orientate the model as if leaning over but also faces front still.

I would like the model to face the cube by rotating on the y axis to emulate what you would do while standing on the ground. The intended end result should be…

The model should rotate to face the cube on the y axis regardless of how the cube is tilted.
My code is…
import * as THREE from './build/three.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
let scene, renderer, camera;
let model;
let cube;
init();
function init() {
const container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 1.5, - 7);
camera.lookAt(0, 0, 0);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
scene.fog = new THREE.Fog(0xa0a0a0, 10, 50);
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 20, 0);
scene.add(hemiLight);
const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(- 3, 10, - 10);
dirLight.castShadow = true;
dirLight.shadow.camera.top = 2;
dirLight.shadow.camera.bottom = - 2;
dirLight.shadow.camera.left = - 2;
dirLight.shadow.camera.right = 2;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 40;
scene.add(dirLight);
// ground
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add(mesh);
const loader = new GLTFLoader();
loader.load('/my-app/src/app/scene-models/Soldier.glb', function (gltf) {
model = gltf.scene;
model.position.set(0, 0, 0);
scene.add(model);
model.traverse(function (object) {
if (object.isMesh) object.castShadow = true;
});
animate();
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh(geometry, material);
cube.position.set(3, 0, 0);
cube.rotateZ(.5);
scene.add(cube);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
if (!model.quaternion.equals(cube.quaternion)) {
model.quaternion.rotateTowards(cube.quaternion, .01);
}
renderer.render(scene, camera);
}
Any further help is greatly appreciated.