Javascript THREE.js中的法线贴图

我一直在尝试使法线贴图在three.js中工作，但没有效果。尽管已经有人提出了这个问题（包括和），但没有一个问题是非常有用的，因为它们已经过时了，而且制作法线贴图的方法不再有效（在r71中，这是我正在使用的，也是到本文为止的最新版本）。我试过以下方法，但不知道为什么不起作用。使用法线贴图时没有错误，只是缺少可见的更改

我试过的东西有很多优点。还有，我尝试过的代码：

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);

---

是否有我做得不正确的地方或我可以使用的最新参考？

法线贴图工作正常-加载纹理并通过

material.normalMap=texture应用它

关于您的JSFIDLE：

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

在回调中应用法线贴图并渲染对象时，您需要告诉three.js更新材质，如下所示：
cube.material.needsUpdate=true

这是您的法线贴图：
您只需设置
cube.material.needsUpdate=true如果以前渲染过对象。删除程序最后一行中对
render（）
的调用，您可以删除
cube.material.needsUpdate=true也来自回调。感谢您添加更多信息，您的帖子内容非常丰富！我总是担心修改Askers的例子太多，这样他就不会感到困惑。@FalkThiele想修改多少就修改多少，这只是一个例子，表明我认为我无法让它工作。谢谢！我还刚刚意识到，我正在设置摄像机的位置和旋转两次。Oops（虽然不重要）。我知道如果问得更详细，这应该是另一个问题，但是有没有一种方法可以轻松地使用置换贴图（例如材质的属性）或者我必须使用着色器？