Estoy tratando de hacer que MeshNormalMaterial permanezca alineado con el objeto en lugar de con la cámara. Hasta donde yo sé, se supone que establecer .normalMapType = THREE.ObjectSpaceNormalMap hace esto. Sin embargo no lo es.
¿Hay algo que me falta o una alternativa para que esto funcione?
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; } <script src="https://unpkg.com/three@0.140.2/build/three.js"></script> <script src="https://unpkg.com/three@0.140.2/examples/js/controls/OrbitControls.js"></script>Hasta donde yo sé, se supone que establecer .normalMapType = THREE.ObjectSpaceNormalMap hace esto.
normalMapType determina el tipo de mapa normal (tangente frente a espacio de objetos). No está utilizando un mapa normal, por lo que esta propiedad no está relacionada con su caso de uso.
El efecto que está tratando de lograr no se puede configurar con MeshNormalMaterial . Tienes que implementar un sombreador personalizado por ti mismo.