javascript - THREE.js 中的法线贴图

Question

我一直在尝试让法线贴图在 Three.js 中工作，但没有成功。尽管已经有问题提出这个问题(包括 Three.js Normal Mapping forcing mesh to not render 和 How to make a normal map in THREE.js correctly? )，但它们都没有太大帮助，因为它们已经过时，并且制作法线贴图的方式不再有效(在 r71 中，这就是我想要的)使用，这是本文中最新的)。我已尝试以下方法，但我不知道为什么它不起作用。没有错误，只是使用法线贴图时缺乏可见的变化。

有一个JSFiddle我所尝试过的。另外，我尝试过的代码:

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var ambient = 0x050505,
    diffuse = 0x331100,
    specular = 0xffffff,
    shininess = 10,
    scale = 23;

scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.z = 0;
camera.position.y = 0;
camera.lookAt({
    x: 0,
    y: 0,
    z: 0
});
scene.add(camera);
camera.position.set(0, 100, 1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));

scene = new THREE.Scene();

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var light = new THREE.PointLight(0xffffff, 1);
light.position.copy(camera.position);
scene.add(light);

var plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), new THREE.MeshLambertMaterial({
    color: 0x22FF11,
    side: THREE.DoubleSide
}));
plane.position.set(0, 0, -500);
plane.receiveShadow = true;
scene.add(plane);

var cube = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50), new THREE.MeshPhongMaterial({
    color: 0xCC0000,
}));
//A picture I found on the internet:
var normalMap = THREE.ImageUtils.loadTexture('http://4.bp.blogspot.com/-nVnWCcT-VkY/VC2FnM6ZOmI/AAAAAAAAA4k/bWRniM20L_s/s1600/T_Wood512_N.jpg', undefined, function () {
    cube.material.normalMap = normalMap;
    renderer.render(scene, camera);
});
cube.position.set(0, 0, -250);
scene.add(cube);

renderer.render(scene, camera);

是否有我做错的事情或者我可以使用的最新引用？

Answer 1

法线贴图工作正常 - 加载纹理并通过 material.normalMap =texture; 应用它。

关于你的jsfiddle:

1. 控制台错误:安全错误:操作不安全。。加载文件时需要允许跨源加载，添加THREE.ImageUtils.crossOrigin = '';。

2. 在回调中应用法线映射时并且之前已渲染对象，您需要告诉 Three.js 更新 Material ，如下所示:cube.material.needsUpdate = true ;

这是你的法线 map : http://jsfiddle.net/akpbvn9p/3/