3D签到墙 threejs(使用元素周期表修改)

所属分类:其他-动画效果

 68186  653  查看评论 (115)
分享到微信朋友圈
X
3D签到墙 threejs(使用元素周期表修改) ie兼容11

更新时间:2021-12-24 01:04:19

更新说明:已经更新了使用官方最新的js,本地运行需要以站点方式运行


更新时间:2021-12-22 11:44:37

更新说明:替换调用threejs官方最新版本出现的兼容问题


发布时间:2017-10-09 9:41:10

刚开始入的坑,做了一些简陋的修改,原来的元素周期展示为图片了,y轴旋转,自动更换场景后面还可以更好的优化,另外,图片达到500张之后我电脑就好卡,渲染不行,修改之后也没有检测性能所以,大家仅供参考

相关插件-动画效果

简单实用的jQuery和CSS3卡片自动翻牌特效

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backfacevisibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
  动画效果
 47304  356

three.js可旋转地球

使用three.js编写可旋转地球
  动画效果
 50051  348

jquery新婚快乐

jquery新婚快乐动画效果
  动画效果
 38058  395

背景彩带动画插件ribbon.js

只有1kb的javascript 可以使用 HTML5 画布在您的网站上生成背景彩带动画
  动画效果
 35276  408

讨论这个项目(115)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小忧桑 0
    2023/12/13 16:16:42
    怎么给图片 加点击事件呢 回复
    青空#浮华 0
    2023/7/15 18:16:51
    如何在vue里使用 回复
    心宿 0
    2023/3/14 12:20:42
    楼主 问下 如何点击弹出对应的照片 点击获取照片的方法有吗
        心宿0
        2023/3/30 15:17:31
        我加了 鼠标移入暂停,点击获取照片并放大等功能 有需要的 V:hejiubukaiche1
        小忧桑0
        2023/12/14 10:56:13
        求鼠标移入暂停、点击图片代码
    回复
    心宿 0
    2023/3/13 16:30:30
    跪求 如何手动控制 旋转 暂停旋转
        蘫銫の等鴏3
        2023/3/13 19:35:24

        这是一个来自`chatgpt`的方案,我修改了并测试可行

        let isAnimating = false; // 用于标记是否正在渲染场景
        
        const myButton = document.getElementById('myButton');
        myButton.addEventListener('click', function() {
            // 如果当前正在渲染场景,则不执行任何操作
            if (isAnimating) {
                return;
            }
        
            isAnimating = true; // 标记为正在渲染场景
        
            const intervalId = setInterval(function() {
                // 让场景通过y轴旋转
                scene.rotation.y += 0.008;
        
                render();
            }, 16.7); // 每秒渲染60帧,即每帧间隔16.7毫秒
        
            // 在按钮上添加一个标记,以便在下次点击时停止渲染
            myButton.dataset.intervalId = intervalId;
        });
        
        // 在按钮上添加一个“停止”事件处理程序,以便在点击时停止渲染
        const mouseup = document.getElementById('mouseup');
        mouseup.addEventListener('mouseup', function() {
            console.log(1111111)
            const intervalId = myButton.dataset.intervalId;
            if (intervalId) {
                clearInterval(intervalId);
                isAnimating = false; // 标记为停止渲染场景
                myButton.dataset.intervalId;
            }
        });
    回复
    心宿 0
    2023/3/13 12:04:26
    求教 作者 我不需要旋转效果 怎么改
        蘫銫の等鴏1
        2023/3/13 12:21:55
        把第538行注释
        心宿0
        2023/3/13 16:30:06
        跪求 如何手动控制 旋转 暂停旋转
    回复
    丿诺言丿 0
    2023/1/11 17:11:15
    我使用元素周期表 参考本按钮 就是弄不出来 自动旋转 不知道咋回事 哪儿出问题了也看不出来 求帮助
        丿诺言丿0
        2023/1/11 17:12:17
        //一直在执行
        function animate() {
            // 让场景通过x轴或者y轴旋转  & z
            // scene.rotation.x += 0.011;
            scene.rotation.y += 0.008;
        requestAnimationFrame( animate );
        TWEEN.update();
        controls.update();//这个控制了鼠标滑动 旋转动画
            // 渲染循环
            render();
            stats.update();
        }

        就旋转不生效

    回复
    zhajis 0
    2022/12/2 17:48:49
    这个自动旋转怎么控制的?我想在表格状态下不旋转,圆球状态下旋转
        蘫銫の等鴏1
        2022/12/2 18:11:44
        初始化之后调用了这个方法:animate();
    回复
    Poci 0
    2022/9/6 14:39:44
    这个是动态获取数据的吗
        蘫銫の等鴏0
        2022/9/6 14:44:47
        示例是模拟的,需要 自行做动态数据载入,下面第四楼有用webscoket来做。
    回复
    时过境迁 0
    2022/9/1 21:07:54
    你好 我打开怎么没有效果呢
        西瓜0
        2022/9/1 23:56:50
        需要在服务端运行,本地运行要配置的
        时过境迁0
        2022/9/3 11:05:41
        具体怎么弄的可以给我说一下嘛?
        ぁ别离0
        2023/2/20 13:41:55
        本地怎么运行呢
        西瓜0
        2023/2/20 16:29:56

        新版的Dreamweaver打开按f12自动部署,或者用vs code打开文件夹

        QQ图片20230220162824.png

    回复
    背着棺材跳舞 0
    2022/8/29 22:11:41
    图片一多就卡了,怎么处理一下呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复