Question

我有一个球体和光源（基本上是太阳和地球）。在球体上，我使用了地形纹理的灰度高度图，所以我使用的是三个.js的ShaderTerrain.js。我也在使用定向光源。我的代码：

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
lightCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
controls = new THREE.OrbitControls( camera, renderer.domElement );
lightControls = new THREE.TrackballControls(lightCamera, renderer.domElement);

light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(0,0,20);
lightCamera.position.z = 225;
lightCamera.add(light);
camera.add(lightCamera);
scene.add(camera);

var terrainShader = THREE.ShaderTerrain[ "terrain" ];
uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);

// displacement is heightmap (greyscale image)
uniformsTerrain[ "tDisplacement" ].value = THREE.ImageUtils.loadTexture('heightmap.jpg');
uniformsTerrain[ "uDisplacementScale" ].value = 15;

// diffuse is texture overlay
uniformsTerrain[ "tDiffuse1" ].value = THREE.ImageUtils.loadTexture('earth.jpg');
uniformsTerrain[ "enableDiffuse1" ].value = true;

var material = new THREE.ShaderMaterial({
    uniforms:       uniformsTerrain,
    vertexShader:   terrainShader.vertexShader,
    fragmentShader: terrainShader.fragmentShader,
    lights:         true,
    fog:            false
});

var geometry = new THREE.SphereGeometry(100,100,100);
geometry.computeTangents();

scene.add(new THREE.Mesh(geometry, material));

使用此代码，可以使用凸起的纹理和所有内容创建球体。

问题在于，当我旋转球体时，光源似乎不会保持固定。它与球体一起旋转，最终会出现黑点（而不是总是来自前方的光线，并保持用户看到的照明）。

如果我创建一个简单的球体，就像这样：

geometry = new THREE.SphereGeometry(100,100,100);
material = new THREE.MeshLambertMaterial({color: 0x00ee00, wireframe: true, transparent: true, needsUpdate: true});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

一切都很完美。当球体/相机旋转时，光源保持固定。

我还尝试过简单地旋转（第一个）球体（使用ShaderMaterial的球体）而不是相机（将一个函数附加到mousemove事件并简单地执行{{{ 1}}用鼠标位置）。这也不起作用;当球体旋转时，用户仍然会看到阴影。

不确定我在这里缺少什么。

这是一个jsfiddle：http://jsfiddle.net/Z5sS5/1/。左键单击/拖动以旋转所有内容（相机+灯光），右键单击/拖动以仅旋转灯光。要查看它是否有效，请将sphere.rotation.x/y取消注释。要查看它无效，请发表评论basicSphere()并取消注释basicSphere()。

在three.js中使用THREE.ShaderTerrain时保持光线固定

0 个答案: