精华内容
下载资源
问答
  • threejs照片墙
    千次阅读
    2019-11-08 19:20:57

    学习three.js的过程中,写的一个简易照片墙,可以使用鼠标滚轮上下浏览,采用的是移动相机的方式。

    代码贴出来,供学习这一块的朋友们参考和指导:

    
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
        <META charset="utf-8">
        <META name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <TITLE></TITLE>
        <STYLE>
            html, body {
                height: 100%;
            }
    
            body {
                background-color: #454545;
                margin: 0;
                overflow: hidden;
                background-size:cover;
            }
    
            .element {
                width: 240px;
                height: 320px;
            }
    
            .element img {
                position: absolute;
                border:none;
            }
    
        </STYLE>
    
    
    </HEAD>
    <BODY>
    
    <script src="js/jquery-3.1.1.min.js"></script>
    
    <script src="js/jquery.mousewheel.min.js"></script>
    
    <SCRIPT src="js/three.min.js"></SCRIPT>
    
    <SCRIPT src="js/CSS3DRenderer.js"></SCRIPT>
    
    <DIV id="container"></DIV>
    
    <DIV id="menu">
    
        <SCRIPT>
            var table = [];
    
            var camera, scene, renderer;
    
            createImages();
            init();
            animate();
    
            function init() {
                camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 3000;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
    
                scene = new THREE.Scene();
    
                for ( var i = 0; i < table.length ; i ++ ) {
                    var element = document.createElement( 'div' );
                    element.className = 'element';
                    element.id = 'element';
    
                    var photo = document.createElement('img');
                    photo.className = 'photo';
                    photo.id = table[ i ][0];
                    photo.src='images/'+table[ i ][0]+'?t='+Math.floor((Math.random()*100)+1);
    
                    element.appendChild( photo );
    
                    var objectCSS = new THREE.CSS3DObject( element );
                    objectCSS.position.x = ( table[ i ] [1] * 250 ) - 1750;
                    objectCSS.position.y = - ( table[ i ] [2]* 330 ) + 1200;
                    objectCSS.position.z = 0;
                    scene.add( objectCSS );
                }
    
                renderer = new THREE.CSS3DRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.domElement.style.position = 'absolute';
                document.getElementById( 'container' ).appendChild( renderer.domElement );
    
                window.addEventListener( 'resize', onWindowResize, false );
            }
    
            function onWindowResize() {
    
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
    
                renderer.setSize( window.innerWidth, window.innerHeight );
    
            }
    
            function animate() {
    
                renderer.render( scene, camera );
                requestAnimationFrame( animate );
    
            }
    
            $(window).mousewheel(function(event) {
                camera.position.y -= event.deltaY * event.deltaFactor;
                camera.position.z = 3000;
    
                var target = new THREE.Vector3();
                var _eye = new THREE.Vector3();
    
                _eye.subVectors( camera.position, target );
                camera.position.addVectors( target, _eye );
                camera.lookAt( _eye );
    
            });
    
            function createImages (){
                var files = [
                    {"name":"0.jpg"},
                    {"name":"1.jpg"},
                    {"name":"2.jpg"}
                ];
                var row =1;
                var col = 1;
                for(var i = 0; i < files.length;i++)
                {
                    var file = [];
                    file[0] = files[i]['name'];
                    file[1] = col++;
                    file[2] = row;
                    table[i] = file;
                    if(col > 13)
                    {
                        col = 1;
                        row++;
                    }
                }
            }
    
    
        </SCRIPT>
    </DIV>
    </BODY>
    </HTML>
    

    效果图如下:

    更多相关内容
  • 520快到了做一个抖音同款照片墙送给ta吧 效果请见:https://blog.csdn.net/qq_40482342/article/details/124590004?spm=1001.2014.3001.5501 本项目 用到 ES6 语法请用node打开 或者使用 编译器的 server 打开 如用...
  • Threejs-相册超炫酷.zip

    2019-08-26 16:22:26
    这是一个可以变成圆柱体,平面,平行的超炫酷的相册模版。主要使用three.js来实现的这样的炫酷效果。
  • js实现3D照片墙效果

    2021-01-19 21:18:05
    聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦 效果: 1、点击Start View进入照片墙 2、只有...
  • 这是一款使用纯javaScript制作的超炫酷3D照片墙展示特效。该3D照片墙展示特效支持ie8浏览器,具有响应式效果,点击照片墙缩略图可以将该图片放大居中显示,效果非常酷。
  • JS实现的非常漂亮的3D立体照片墙显示效果
  • 利用JS制作抖音同款3D照片墙(three.js) 520快到了,跟我一起学习threeJSthreeJS制作抖音同款3D照片墙 代码我会后续发布在我的GitHub中,有兴趣的小伙伴可以留言喔

    利用JS制作抖音同款3D照片墙(three.js)

    520快到了,跟我一起学习threeJS
    用threeJS制作抖音同款3D照片墙

    源码下载:3D照片墙源码下载地址
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • tree.js 制作酷炫照片墙

    千次阅读 2019-03-28 16:10:35
    1.tree.js 是一个用来 制作流畅效果,如果学习的比较深入的话,用来做 游戏 或者 动画片 都是可以的,是一个很不错的js插件; 2.使用教程参考 ... 这是一个中文网站,资料...2.2https://techbrood.com/threejs/docs/...

    1.tree.js 是一个用来 制作流畅效果,如果学习的比较深入的话,用来做 游戏 或者 动画片 都是可以的,是一个很不错的js插件;

    2.使用教程参考

    2.1  http://www.hewebgl.com/article/articledir/1  (比较推荐)

    这是一个中文网站,资料也比较齐全

     

    2.2  https://techbrood.com/threejs/docs/#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/%E5%85%A5%E9%97%A8%E4%BB%8B%E7%BB%8D/%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%9C%BA%E6%99%AF(Scene)

    2.3  https://threejs.org/

    或者你也可以进这个网站,有好多比较酷炫的效果,可以先睹为快

    2.4  https://threejs.org/examples/

    2.5 https://threejs.org/docs/

    3.有一些好看的效果,可以先睹为快

    3.1 网上找的,PHP版

    3.1.1 https://github.com/liuhill/i-Pper

    3.1.2 效果  (有四种效果,通过底部四个按钮进行切换)

    3.2  网上找的,node.js版 (和上边的是同一家的,好像)

    3.2.1 https://github.com/liuhill/kper

    3.3 网上找的 点击网址查看  https://github.com/Folgerjun/three.js-css3D

    3.4 或者,在这个中文api网站,也能看到一些效果

    http://www.hewebgl.com/article/getarticle/102

    3.5 https://github.com/Folgerjun/three.js-css3D

    3.7 https://wow.techbrood.com/fiddle/fork?id=37655

    3.8 https://www.techbrood.com/?q=three+%E6%97%8B%E8%BD%AC

    3.9 https://demo.demohuo.top/jquery/31/3149/demo/  (这里可以出现一直旋转的球,同时会弹出名片)

    3.10  https://www.haolizi.net/example/view_15355.html  (3.10的效果和3.9的效果相同)

    4.几点说明

    (1)  一些案例链接来自不同网站,如果有对应需要可前往,不同网站获得;

    (2) 3.10的效果估计用的比较多点,其实也是在官方demo的基础上,加了个计时器,在计时器的控制下,让他自由在 ‘表格’、‘球球’、‘螺旋’、‘格子’之间进行切换;

    (3) 同时会给 scene 一个沿着某个轴(y轴就比较好,就相当于垂直的轴)的旋转自增的动作,就能让它自己动起来;

    (4) 有些可能会涉及,页面头像是动态获得的,签到一个人,往里加一个人,这里的头像是一个数组,可以把初始化的动作封装为一个方法,在每次添加数据完成后,就执行一次初始化方法(盛放数据的变量,scene,camera,controls...都需要初始化,还有哪些计时器,否则计时器叠加之后,动画模式的切换和自己的旋转会越来越快)。在模式切换的那个地方的变量也应该保持当前值,添加完成后继续执行当前模式的动画即可;

    (5) 对于需要动态加载的头像照片墙来说,每次添加一个新的照片,则每种状态的数据都须要重新计算一次,当不再请求数据,则不需要再重新计算了,所以此时就可以使用已存在的老数据了,可以将计算的部分封装为函数然后做一个判断数组长度的判断,如果数组长度发生了变化则计算,否则只是执行切换动作同时执行动画即可,这样的话对性能优化比较友好。

    展开全文
  • 基于ThreeJs的3D图片相册插件,支持鼠标滚轮控制图片切换,仅兼容支持3D功能的浏览器,可以调整相册视角,支持循环轮播。
  • 实用JS照片墙

    2019-01-16 13:32:00
    公司年会用于抽奖,效果不错!不过需要略修改一点代码即可!现在都要分了!
  • 这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。
  • JS实现的非常漂亮的3D立体照片墙效果代码,是一段将需要的图片以非常不规则的形式展现出来的3D立体照片墙效果代码,进入页面时,所有图片均以小图显示,根据所点击选择的缩略图,会以不同的方式显示大图,同时,在...
  • 3D 签到墙 年会 Three.js

    2018-09-27 20:28:59
    非常实用且好用3d年会签到墙源码,可以轻松实现年会大气效果
  • 高仿d3.js官网照片墙

    2018-04-26 15:41:48
    此demo为高仿的d3.js照片墙,如有需要自行下载。 本次demo使用的是d3.v5.min.js 版本
  • 这是一款基于Threejs的鼠标移动图片跟随变形动画特效。该动画特效在鼠标移动到指定的区域时,会出现图片跟随鼠标效果,并且在图片移动的过程中,还会发生扭曲变形动画。
  • JS实现的非常漂亮的3D立体照片墙显示效果代码.zip
  • js实现图片3D轮播效果

    2021-01-21 14:02:50
    js实现3D图片逐张轮播幻灯片</title> </head> <body> <style> ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;} ul#bcty...
  • 采用three.js显示3D照片墙,共有4中样式分别如下 ####1.1 照片墙 ####1.2 水晶球 ####1.3 螺旋塔 ####1.4 展览厅 2、产品特点 ####2.1 绚丽 采用Three.js的3D样式,打破了传统照片墙单调乏味的风格 ####2.2 互动 + ...
  • 利用CSS和JS实现抖音超火3d照片墙

    千次阅读 2022-04-23 00:02:17
    利用CSS和JS实现抖音超火3d照片墙

    废话不多说,直接上代码:

    <!DOCTYPE html>
    <html lang="en" ondragstart="return false">
    <head>
          <meta charset="UTF-8">
          <meta name="Keywords" content="">
          <meta name="Description" content="">
          <title>3D旋转照片墙</title>
          <!-- 如果我有天醒来 -->
          <!-- 层叠样式表 -->
          <style type="text/css">
                /* 去掉默认效果 */
                * {
                      margin: 0;
                      padding: 0;
                }
    
                body {
                      background: #222;
                      overflow: hidden;
                      /* 取消选中 */
                      user-select: none;
    
                }
    
                @keyframes rotate {
                      100% {
                            transform: rotateY(360deg);
                      }
                }
    
                .perspective {
                      /*子元素透视 场景深度*/
                      perspective: 600px;
                }
    
                .wrap {
                      /* 3d */
                      width: 135px;
                      height: 240px;
                      margin: 100px auto;
                      position: relative;
                      /* border: 1px solid red; */
                      transform: rotateX(-20deg) rotateY(0deg);
                      transform-style: preserve-3d;
    
                }
    
                .wrap img {
                      display: block;
                      /* 绝对定位 */
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      transform: rotateY(0deg) translateZ(0px);
                      background: transparent;
                      box-shadow: 0 0 4px #fff;
                      border-radius: 5px;
    
                      /* webkit */
                }
    
                /* 照片底座 */
                .wrap p {
                      width: 1200px;
                      height: 1200px;
                      background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
                      position: absolute;
                      border-radius: 50%;
                      left: 50%;
                      top: 100%;
                      margin-left: -600px;
                      margin-top: -600px;
                      /* 沿着x轴按倒 */
                      transform: rotateX(90deg);
    
                }
          </style>
    </head>
    
    <body>
          <!-- 盒子容器 -->
          <div class="perspective">
                <div class="wrap" id="imgwrap">
                      <!-- 引入图片值页面 -->
                      <img class="f1" src="img/12.jpg" />
                      <img class="f1" src="img/13.jpg" />
                      <img class="f1" src="img/14.jpg" />
                      <img class="f1" src="img/15.jpg" />
                      <img class="f1" src="img/16.jpg" />
                      <img class="f1" src="img/1.jpg" />
                      <img class="f1" src="img/2.jpg" />
                      <img class="f1" src="img/3.jpg" />
                      <img class="f1" src="img/4.jpg" />
                      <img class="f1" src="img/5.jpg" />
                      <img class="f1" src="img/6.jpg" />
                      <img class="f1" src="img/7.jpg" />
                      <img class="f1" src="img/5.jpg" />
                      <img class="f1" src="img/6.jpg" />
                      <img class="f1" src="img/7.jpg" />
                      <img class="f1" src="img/8.jpg" />
                      <img class="f1" src="img/9.jpg" />
                      <img class="f1" src="img/10.jpg" />
                      <img class="f1" src="img/11.jpg" />
    
                      <img class="f1" src="img/17.jpg" />
                      <img class="f1" src="img/18.jpg" />
                      <img class="f1" src="img/19.jpg" />
                      <img class="f1" src="img/20.jpg" />
                      <img class="f1" src="img/21.jpg" />
                      <img class="f1" src="img/22.jpg" />
                      <img class="f1" src="img/23.jpg" />
                      <img class="f1" src="img/24.jpg" />
                      <img class="f1" src="img/25.jpg" />
                      <img class="f1" src="img/26.jpg" />
                      <img class="f1" src="img/27.jpg" />
                      <img class="f1" src="img/28.jpg" />
                      <img class="f1" src="img/29.jpg" />
                      <img class="f1" src="img/30.jpg" />
    
                      <!-- 引入图片值页面 -->
                      <img class="f2" src="img/1.jpg" />
                      <img class="f2" src="img/2.jpg" />
                      <img class="f2" src="img/3.jpg" />
                      <img class="f2" src="img/4.jpg" />
                      <img class="f2" src="img/5.jpg" />
    
                      <img class="f2" src="img/9.jpg" />
                      <img class="f2" src="img/10.jpg" />
                      <img class="f2" src="img/11.jpg" />
                      <img class="f2" src="img/12.jpg" />
                      <img class="f2" src="img/25.jpg" />
                      <img class="f2" src="img/26.jpg" />
                      <img class="f2" src="img/27.jpg" />
                      <img class="f2" src="img/28.jpg" />
                      <img class="f2" src="img/29.jpg" />
                      <img class="f2" src="img/30.jpg" />
                      <img class="f2" src="img/13.jpg" />
                      <img class="f2" src="img/14.jpg" />
                      <img class="f2" src="img/15.jpg" />
                      <img class="f2" src="img/16.jpg" />
                      <img class="f2" src="img/17.jpg" />
                      <img class="f2" src="img/18.jpg" />
                      <img class="f2" src="img/19.jpg" />
                      <img class="f2" src="img/20.jpg" />
                      <img class="f2" src="img/21.jpg" />
                      <img class="f2" src="img/22.jpg" />
                      <img class="f2" src="img/23.jpg" />
                      <img class="f2" src="img/24.jpg" />
                      <img class="f2" src="img/6.jpg" />
                      <img class="f2" src="img/7.jpg" />
                      <img class="f2" src="img/5.jpg" />
                      <img class="f2" src="img/6.jpg" />
                      <img class="f2" src="img/7.jpg" />
                      <img class="f2" src="img/8.jpg" />
                      <!-- 引入图片值页面 -->
    
                      <img class="f3" src="img/1.jpg" />
                      <img class="f3" src="img/2.jpg" />
                      <img class="f3" src="img/11.jpg" />
                      <img class="f3" src="img/12.jpg" />
                      <img class="f3" src="img/25.jpg" />
                      <img class="f3" src="img/26.jpg" />
                      <img class="f3" src="img/27.jpg" />
                      <img class="f3" src="img/3.jpg" />
                      <img class="f3" src="img/4.jpg" />
                      <img class="f3" src="img/5.jpg" />
    
    
                      <img class="f3" src="img/16.jpg" />
                      <img class="f3" src="img/17.jpg" />
                      <img class="f3" src="img/18.jpg" />
                      <img class="f3" src="img/10.jpg" />
    
                      <img class="f3" src="img/28.jpg" />
                      <img class="f3" src="img/29.jpg" />
                      <img class="f3" src="img/30.jpg" />
                      <img class="f3" src="img/13.jpg" />
    
                      <img class="f3" src="img/19.jpg" />
                      <img class="f3" src="img/20.jpg" />
                      <img class="f3" src="img/21.jpg" />
                      <img class="f3" src="img/22.jpg" />
                      <img class="f3" src="img/23.jpg" />
                      <img class="f3" src="img/24.jpg" />
                      <img class="f3" src="img/9.jpg" />
                      <img class="f3" src="img/14.jpg" />
                      <img class="f3" src="img/15.jpg" />
                      <img class="f3" src="img/6.jpg" />
                      <img class="f3" src="img/7.jpg" />
                      <img class="f3" src="img/5.jpg" />
                      <img class="f3" src="img/6.jpg" />
                      <img class="f3" src="img/7.jpg" />
                      <img class="f3" src="img/8.jpg" />
    
    
                      <p></p>
                </div>
          </div>
          <!--  src="JS/photo.js" -->
          <script type="text/javascript">
                var oImg = document.getElementsByClassName('f1')
                var oImg2 = document.getElementsByClassName('f2')
                var oImg3 = document.getElementsByClassName('f3')
                var len = oImg.length;
                console.log(len)
                var deg = 360 / len;
    
                var oWrap = document.getElementById("imgwrap");
                // var oWrap=document.querySelector('.wrap');
    
                //页面加载完毕在执行的代码
                window.onload = function () {
                      Array.prototype.forEach.call(oImg, function (ele, index, self) {
                            // 旋转并沿Z轴平移
                            ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                            //过渡时间1s
                            ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    
                      });
                      Array.prototype.forEach.call(oImg2, function (ele, index, self) {
                            // 旋转并沿Z轴平移
                            ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
                            //过渡时间1s
                            ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    
                      });
                      Array.prototype.forEach.call(oImg3, function (ele, index, self) {
                            // 旋转并沿Z轴平移
                            ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
                            //过渡时间1s
                            ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    
                      });
                      // Array.prototype.forEach.call(oImg, function (ele, index, self) {
                      //       // 旋转并沿Z轴平移
                      //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                      //       //过渡时间1s
                      //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";
    
                      // });
    
                }
                //翻动3D相册
                var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
    
                document.onmousedown = function (e) {
                      // 点击设置初值
                      lastX = e.clientX;
                      lastY = e.clientY;
    
                      this.onmousemove = function (e) {
                            newX = e.clientX;
                            newY = e.clientY;
                            minusX = newX - lastX;
                            minusY = newY - lastY;
    
                            rotX -= minusY * 0.2;
                            rotY += minusX * 0.1;
                            oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
                            lastX = newX;
                            lastY = newY;
    
                      }
                      this.onmouseup = function (e) {
                            //鼠标松开
                            this.onmousemove = null;//清除鼠标移动
                      }
                }
    
          </script>
    </body>
    
    </html>

    运行效果:

    抖音3d照片墙

    注意:

    需要自行添加30张照片,照片重命名1~30并且照片应为jpg格式,照片放在img文件夹下面

    如下图所示:

     

    展开全文
  • 基于three.js的3d全景实例,一张图片即可实现
  • js立体图片轮播特效

    2019-11-17 12:10:06
    js立体图片轮播特效
  • initial-scale=1.0"> 相册title> <link rel="icon" href="http://ramkxaclc.hn-bkt.clouddn.com/love.ico"> head> <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js">script> ...
  • 图片3D展示功能

    2021-04-03 16:35:26
    图片3D展示功能源码,利用图片序列实现类似三维显示图像的效果,可手动调节视角来观看图形的360°展示。 手动切换视角时,图片的展示不是十分流畅,希望作者继续完善。
  • three.js, JavaScript 3D 库 three.js 3D 库这个项目的目的是创建一个易于使用,轻量级,3D 库。 库提供 ,,CSS3D和渲染器。示例 - 文档- Wiki - Migratin
  • 采用three.js显示3D照片墙,共有4中样式分别如下####1.1 照片墙####1.2 水晶球####1.3 螺旋塔####1.4 展览厅2、产品特点####2.1 绚丽采用Three.js的3D样式,打破了传统照片墙单调乏味的风格####2.2 互动+ 通过微信就...
  • Three.js中的纹理Texture

    万次阅读 2016-05-22 15:11:49
    不仅仅将照片纹理添加到方块网格中,而且还将这些方块组成一个球体,下面LOVE四个按钮,可以转换成不同的效果,有照片墙,照片环等。 - ImageUtils.loadTexture:从指定位置加载图片文件,文件格式可以是PNG,GIF或...
  • 这是一款基于Threejs可着色和旋转的3D模型动画特效。在该特效中,通过鼠标的拖动和滚动,可以旋转和缩放3D模型。最大的特点是你可以对模型的各个部分进行自定义着色。下面...
  • 很有意思的一个js'小程序,程序也可以很浪漫,很浪漫的
  • 图片墙|图片展示墙特效,里面的jquery类库已为您修正为正确的地址,这款图片墙其实就是一个相册展示效果,下边的小圆点代表缩略图,鼠标放上的时候会显示出图片,上边的滑块用来指示当前的位置,请在支持HTML5的...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 205
精华内容 82
关键字:

threejs照片墙