すべてのフォーラムを検索しましたが、この問題を抱えている人は他にいません...球にシェーダーを使用して、1)内側の輝きを作成し、2)地球のテクスチャを適用しています。これを行うと、内側の輝きは表示されますが、テクスチャは表示されません。コンソールで次のように入力すると、uniforms.texture1.texture.image.src-テクスチャの正しいソースの場所が表示されます:* http:// localhost:8091 / media / world.jpg "
シェーダーはテクスチャを認識しているようですが、表示していません。テクスチャを持つ新しいオブジェクト(たとえば立方体)をシーンに追加すると、球は突然、新しい立方体オブジェクトのテクスチャを想定します。シーンに2つの新しいオブジェクトを追加すると(たとえば、ウッドボックステクスチャのボックスとスターテクスチャのスカイボックス)、球はウッドボックステクスチャと星テクスチャの両方を同時に想定しようとするため、ちらつきが発生します。効果(どちらも私が望んでいたテクスチャではありません)。
私のコードは次のとおりです。
var Shaders = {
'earth' : {
uniforms: {
'texture': { type: 't', value: THREE.ImageUtils.loadTexture( "media/world.jpg" ) }
},
vertexShader: [
'varying vec3 vNormal;',
'varying vec2 vUv;',
'void main(void) {',
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'vNormal = normalize( normalMatrix * normal );',
'vUv = uv;',
'}'
].join('\n'),
fragmentShader: [
'uniform sampler2D texture;',
'varying vec3 vNormal;',
'varying vec2 vUv;',
'void main(void) {',
'vec3 diffuse = texture2D( texture, vUv ).xyz;',
'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );',
'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );',
'gl_FragColor = vec4(diffuse + atmosphere, 1.0);',
'}'
].join('\n')
}
};
すべての初期化で(ライト、カメラ、シーンなどをセットアップした後)-次のように球を作成します。
var geometry = new THREE.SphereGeometry(250, 40, 40)
var shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);
material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
});
mesh = new THREE.Mesh(
new THREE.SphereGeometry(250, 40, 40), material);
mesh.matrixAutoUpdate = false;
scene.add(mesh);
このコードをHTMLの頭にも入れてみましたが(もちろん引用符はありません)、何も変わりませんでした。何か助けていただければ幸いです。私はthree.jsのr51を使用しており、r52も試しました。
前もって感謝します!