0

私は物事に私自身のスピンを追加することを望んで、この投稿をフォローしました. ここにある例 は、Three.JS (49) の非常に古いリビジョンを使用していることに気付きました。ソース ファイルを最新バージョンに変更したら、テクスチャが表示されなくなりました。デモを見る

どのような減価償却が発生したかを把握するために多くの時間を費やしてきたので、これらの行に検索を絞り込みました。

// material

uniforms = {
                sunDirection: { type: "v3", value: new THREE.Vector3(0,1,0) },
            dayTexture: { type: "t", value: 0, texture: THREE.ImageUtils.loadTexture( "/images/world2.png" ) },
                nightTexture: { type: "t", value: 1, texture: THREE.ImageUtils.loadTexture( "/images/world5.png" ) }
            };

            uniforms.dayTexture.texture.wrapS = uniforms.dayTexture.texture.wrapT = THREE.Repeat;
            uniforms.nightTexture.texture.wrapS = uniforms.nightTexture.texture.wrapT = THREE.Repeat;

  material = new THREE.ShaderMaterial( {

                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent

                } );

おそらく私の問題と関係があるその他のもの

<script id="fragmentShader" type="x-shader/x-fragment">

        uniform sampler2D dayTexture;
        uniform sampler2D nightTexture;

        uniform vec3 sunDirection;

        varying vec2 vUv;
        varying vec3 vNormal;

        void main( void ) {
            vec3 dayColor = texture2D( dayTexture, vUv ).rgb;
            vec3 nightColor = texture2D( nightTexture, vUv ).rgb;

            // compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
            float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);

            // sharpen the edge beween the transition
            cosineAngleSunToNormal = clamp( cosineAngleSunToNormal * 10.0, -1.0, 1.0);

            // convert to 0 to 1 for mixing
            float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;

            // Select day or night texture based on mix.
            vec3 color = mix( nightColor, dayColor, mixAmount );

            gl_FragColor = vec4( color, 1.0 );
            //gl_FragColor = vec4( mixAmount, mixAmount, mixAmount, 1.0 );
        }
    </script>

    <script id="vertexShader" type="x-shader/x-vertex">

        varying vec2 vUv;
        varying vec3 vNormal;

        void main()
        {
            vUv = uv;
            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            vNormal = normalMatrix * normal;
            gl_Position = projectionMatrix * mvPosition;
        }

    </script>

ここでマイグレーション docx を確認しました 。その事実について、「ユニフォーム」または「シェーダー」についてはあまり説明がありません。

4

1 に答える 1

0

参照したMigration Wikiでは、r.51 の時点でテクスチャをユニフォームに割り当てるための新しいパターンを指定しています。

{ type: "t", value: 0, texture: map } => { type: "t", value: map }

だからあなたの場合、それは

dayTexture: { type: "t", value: THREE.ImageUtils.loadTexture( "/images/world2.png" ) },
nightTexture: { type: "t", value: THREE.ImageUtils.loadTexture( "/images/world5.png" ) }

three.js r.59

于 2013-08-02T03:46:07.597 に答える