Question

我跟着this post希望在事物上添加自己的旋转。我注意到了这个例子 here正在使用Three.JS（49）的旧版本。当我将源文件更改为更新版本时，纹理不再出现。见Demo

我花了很多时间试图弄清楚贬值发生了什么，我把搜索范围缩小到了这些界限。

// 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

                } );

可能与我的问题有关的更多misc内容

<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 here 对于那个事实，“制服”或“着色器”并不多。

Answer 1

在您引用的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

更新Three.js版本时未显示纹理

1 个答案: