0

私は楽しいプロジェクトのために Google の webGL グローブを使用しています。

Want: ユーザーが「月」アイコンの付いたボックスをクリックすると、地球儀の作成に使用される画像が 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 に答える