3d效果之由近及远

最新推荐文章于 2022-10-28 15:24:28 发布

Albert_Tiger

最新推荐文章于 2022-10-28 15:24:28 发布

阅读量601

点赞数

分类专栏： css技巧

本文链接：https://blog.csdn.net/qq_35425276/article/details/79495192

版权

css技巧专栏收录该内容

25 篇文章 0 订阅

订阅专栏

了解代码需要一定的3d基础，读者可先阅读之前的基础文章。效果并不完善，但主要内容已具备。

效果图：这里写图片描述

<!doctype html>
<html lang="en">
<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>Document</title>
    <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>
    <script src="js/tween.min.js"></script>
    <script src="js/css3drenderer.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        var camera,scene,render;
        var oss = [];
        var targets = {grid: [] };
        var table = [
            '1.jpg',
            '2.jpg',
            '3.jpg',
            '4.jpg',
            '5.jpg',
            '6.jpg',
            '7.jpg',
            '8.jpg',
            '9.jpg',
            '10.jpg',
            '11.jpg',
            '12.jpg',
        ]
        function init() {
            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100000);
            camera.position.z = 2800;
            scene = new THREE.Scene();
            for( var i = 0,len = table.length;i<len;i++){
                var element = document.createElement('div');
                element.className = 'element';
                var img = document.createElement('img');
                img.src = './images/'+table[i];
                if( i==12 || i==37 || i==62 || i==87 || i==112){
                    img.style.width = img.style.height = '300px';
                }
                element.appendChild( img );

                var ott = new THREE.CSS3DObject( element );
                ott.position.x = ((i % 5) * 600) - 1200;
                ott.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
                ott.position.z = 200-i*60*1.5;

                scene.add(ott);
                oss.push(ott);
            }
            var vector = new THREE.Vector3();

            for(var i=0,l = oss.length;i<l;i++){
                var ott = new THREE.Object3D();
                ott.position.x = ((i % 5) * 600) - 1200;
                ott.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
                ott.position.z = 200-i*60*1.5;

                vector.x = ott.position.x;
                vector.y = ott.position.y;
                vector.z = ott.position.z;

                ott.lookAt(vector);

                targets.grid.push(ott)
            }
            renderer = new THREE.CSS3DRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight);
            renderer.domElement.style.position = 'absolute';
            renderer.domElement.className = 'abc';
            document.getElementById('container').appendChild(renderer.domElement);
            window.addEventListener('resize', onWindowResize, false)
        }
        function transform(shape,duration,style,time) {
            TWEEN.removeAll();
            scene_init();
            for(var i=0;i<oss.length;i++){
                var ott = oss[i];
                var target = shape[i];

                new TWEEN.Tween(ott.position)
                    .to({x:target.position.x, y:target.position.y, z:target.position.z},duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();
                new TWEEN.Tween(ott.position)
                    .to({x:target.position.x, y:target.position.y, z:target.position.z},1000)
                    .delay(195000)
                    .start();
            }
            new TWEEN.Tween(this)
                .to({},1000000)
                .onUpdate(function () {
                    render(style)
                })
                .start();
        }
        function onWindowResize() {
            camera.aspect  = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth,window.innerHeight);
            render();
        }
        function animate() {
            window.requestAnimationFrame(animate)
            TWEEN.update();
        }
        function scene_init() {
            scene.position.x = 0;
            scene.position.y = 0;
            scene.position.z = 0;
        }
        function update() {
            for(var i =0;i<oss.length;i++){
                var ott= oss[i];
                ott.position.z +=60;
                if(ott.position.z > 800){
                    ott.position.z = 200-(oss.length-1)*60*1.5;
                }
            }
        }
        function render(style) {
            if(style == 'grid'){
                update();
            }
            renderer.render(scene,camera)
        }
        init(); 
        animate(); 
        transform(targets.grid,1000, 'grid', 100);
    </script>
</body>
</html>