Question

我正在使用Google的webGL globe来创建一个有趣的项目。

想要：当用户点击带有“月亮”图标的框时，它会更改使用的图像使世界从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文件

中

Answer 1

这：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');

希望这有帮助。

JavaScript：使用onclick事件更改webgl globe上的纹理

1 个答案: