JavaScript:用onclick事件改变webgl的纹理

JavaScript: Changing a texture on webgl globe with onclick event

本文关键字：webgl 纹理 改变 事件 onclick JavaScript      更新时间：2023-09-26

我正在使用谷歌的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');*

注意:我想改变的东西是在一个名为global .js的文件。该函数位于index.html文件

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

相关文章：