ObjectSpaceNormalMap 不适用于 MeshNormalMaterial

Question

我试图让 MeshNormalMaterial 与物体而不是相机保持对齐。据我所知，设置 .normalMapType = THREE.ObjectSpaceNormalMap 应该可以做到这一点。然而事实并非如此。

为了完成这项工作，我是否缺少某些东西或替代方案？

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>

Answer 1

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

normalMapType 确定法线贴图的类型（切线与 object-space）。您没有使用法线贴图，因此属性与您的用例无关。

您尝试实现的效果无法使用 MeshNormalMaterial 配置。你必须自己实现一个自定义着色器。

ObjectSpaceNormalMap 不适用于 MeshNormalMaterial

ObjectSpaceNormalMap not working with MeshNormalMaterial

javascript

three.js