103 THREE.JS 实现局部纹理刷新

2018-11-02 19:06:58 人阅读

案例查看有问题?
全屏试试!

案例源代码


                        
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分块图片实现</title>
    <!--<script src="https://johnson2heng.github.io/vConsole/dist/vconsole.min.js"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>-->
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">

</body>
<script src="https://cdn.bootcss.com/three.js/95/three.min.js"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh;

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000); //实例化相机
        camera.position.set(0, 0, 3000);
    }

    //创建模型
    function initMesh() {
        material = new THREE.MeshBasicMaterial({map:new THREE.Texture()}); //创建材质

        let sceneBlockModel = {
            sceneWidth: 6912,
            sceneHeight: 3456,
            fileBlockWidth: 1024,
            fileBlockHeight: 512,
            dir: "636753681750720000/Block/"
        };

        let plane = new THREE.Mesh(new THREE.PlaneGeometry(sceneBlockModel.sceneWidth, sceneBlockModel.sceneHeight), material);
        scene.add(plane);

        let img = new Image();
        img.onload = function () {

            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");

            canvas.width = sceneBlockModel.sceneWidth;
            canvas.height = sceneBlockModel.sceneHeight;

            ctx.drawImage(img, 0, 0, sceneBlockModel.sceneWidth, sceneBlockModel.sceneHeight);

            material.map.image = canvas;
            material.map.minFilter = THREE.LinearFilter;
            material.map.generateMipmaps = false;
            material.map.needsUpdate = true;

            //加载分块图片
            let xLen = Math.ceil(sceneBlockModel.sceneWidth / sceneBlockModel.fileBlockWidth);
            let yLen = Math.ceil(sceneBlockModel.sceneHeight / sceneBlockModel.fileBlockHeight);

            //延迟三秒开始加载分块图片
            setTimeout(function () {
                for (let x = 0; x < xLen; x++) {
                    for (let y = 0; y < yLen; y++) {
                        let img = new Image();
                        img.src = sceneBlockModel.dir + x + "_" + y + ".jpg";
                        img.onload = function () {

                            let texture = new THREE.Texture(img);

                            //获取渲染的起始位置
                            let position = new THREE.Vector2();

                            position.x = y * sceneBlockModel.fileBlockWidth;

                            if (x === yLen - 1) {
                                position.y = 0;
                            }
                            else {
                                position.y = (yLen - 2 - x) * sceneBlockModel.fileBlockHeight + (sceneBlockModel.sceneHeight % sceneBlockModel.fileBlockHeight);
                            }

                            renderer.copyTextureToTexture(position, texture, material.map);
                        }
                    }
                }
            }, 3000);
        };

        img.src = sceneBlockModel.dir + "preview.jpg";
    }

    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数

        renderer.render(scene, camera); //渲染界面
    }

    //初始化函数,页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();

        animate();
    }
</script>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多