ObjectSpaceNormalMap not working with MeshNormalMaterial

Question

I'm trying to get MeshNormalMaterial to stay aligned with the object rather than the camera. As far as I know, setting .normalMapType = THREE.ObjectSpaceNormalMap is supposed to do this. However it isn't.

Is there something I'm missing or an alternative in order to make this work?

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
camera.position.applyAxisAngle(new THREE.Vector3(1, 0, 0), 0.3);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

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

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
material.normalMapType = THREE.ObjectSpaceNormalMap;
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

function animate() {
    requestAnimationFrame(animate);

    //cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    controls.update();
    
    renderer.render(scene, camera);
};

animate();

body { margin: 0; overflow: hidden; background: black; }

user_5250847 · Answer

As far as I know, setting .normalMapType = THREE.ObjectSpaceNormalMap is supposed to do this.

normalMapType determines the type of normal map (tangent vs. object-space). You are not using a normal map so this property is unrelated to your use case.

The effect you are trying to achieve can't be configured with MeshNormalMaterial. You have to implement a custom shader by yourself.

ObjectSpaceNormalMap not working with MeshNormalMaterial

1 Answers