Three.js的Shader展示16张瓦片图

海上彼尚

已于 2024-06-09 14:09:30 修改

阅读量162

点赞数 2

分类专栏： Three.js 文章标签： javascript

于 2024-05-30 21:33:51 首次发布

本文链接：https://blog.csdn.net/weixin_63443072/article/details/139335170

版权

Three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

=<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Shader Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        varying vec2 vUv;
 
        void main() {
            vUv = uv;
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
            gl_Position = projectionMatrix * mvPosition;
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform sampler2D textures[16];
        varying vec2 vUv;
 
        void main() {
            vec2 uv = vUv;
            float index = floor(mod(gl_FragCoord.x + gl_FragCoord.y, 16.0));
            vec4 color = texture2D(textures[int(index)], uv);
            gl_FragColor = color;
        }
    </script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
 
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        var geometry = new THREE.SphereGeometry(2, 32, 32);
        var material = new THREE.ShaderMaterial({
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent,
            uniforms: {
                textures: { value: [] }
            }
        });
 
        var sphere = new THREE.Mesh(geometry, material);
        scene.add(sphere);
 
        var textureLoader = new THREE.TextureLoader();
        var textures = [];
        var loadedTextures = 0;
        var totalTextures = 16;
 
        function loadTexture(index) {
            var textureUrl = 'path_to_your_texture_' + index + '.jpg';
            textureLoader.load(textureUrl, function(texture) {
                textures[index] = texture;
                loadedTextures++;
                if (loadedTextures === totalTextures) {
                    material.uniforms.textures.value = textures;
                }
            });
        }
 
        function checkCameraPosition() {
            if (camera.position.z < 10 && loadedTextures !== totalTextures) {
                for (var i = 0; i < totalTextures; i++) {
                    loadTexture(i);
                }
            }
        }
 
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
            checkCameraPosition();
        }
        animate();
    </script>
</body>
</html>