0

我正在使用谷歌的 webGL 地球来完成我的一个有趣的项目。

想要：当用户单击带有“月亮”图标的框时，它会将用于制作地球的图像从 world.jpg 更改为 world_night.jpg。

有一个文件可以处理地球的纹理元素。这是负责获取图像位置以包裹地球的代码行。

scene = new THREE.Scene();
sceneAtmosphere = new THREE.Scene();

var geometry = new THREE.Sphere(200, 40, 30);

shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);

*uniforms['texture'].texture = THREE.ImageUtils.loadTexture('/images/world' +
    '.jpg');*

重要的线在底部的星号内。

我正在使用这样的简单函数来更改纹理

<style>
function nightTime() {
uniforms['texture'].texture = THREE.ImageUtils.loadTexture('/images/world_night' +
        '.jpg');
}
</style>
...filler html
<img src="moon.png" width="30px" onClick="nightTime()">

谁能帮我解决这个问题。

再次，当有人点击月亮图标时，我需要这个

*uniforms['texture'].texture = THREE.ImageUtils.loadTexture('/images/world' +
        '.jpg');*

改成这个

*uniforms['texture'].texture = THREE.ImageUtils.loadTexture('/images/world_night' +
        '.jpg');*

注意：我要更改的是一个名为 globe.js 的文件。该函数位于 index.html 文件中

4

1 回答 1

0

这个：https ://github.com/mrdoob/three.js/wiki/Uniforms-types 这个：http ://blog.cjgammon.com/?p=392

应该足以向您解释自定义着色器如何工作以及它们如何与您需要的所有制服绑定。

myTex = THREE.ImageUtils.loadTexture('/images/world' + '.jpg');
myUniforms = [
myTex: { type: 't' /*texture type*/, value: myTex} ];

material = new THREE.ShaderMaterial({
uniforms: myUniforms,
vertexShader: someMyVS,
fragmentShader: someMyFS});

// function onclick()
myUniforms.myTex = THREE.ImageUtils.loadTexture('/images/world_night' +
    '.jpg');

希望这可以帮助。

于 2013-05-29T08:04:09.567 回答