Three.js 实现2022冬奥主题3D趣味页面 🐼

背景迎冬奥,一起向未来!2022冬奥会马上就要开始了,本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面.本文涉及到的知识点主要包括:TorusGeometry 圆环面.MeshLambertMaterial 非光泽表面材质.MeshDepthMaterial 深度网格材质.custromMaterial 自定义材质.Points 粒子.PointsMaterial 点材质等. 效果实现效果如以下动图所示,页面主要由…

Three.js 实现虎年春节3D创意页面

背景虎年春节将至,本文使用 React + Three.js 技术栈,实现趣味 3D 创意页面.本文包含的知识点主要包括:ShadowMaterial. MeshPhongMaterial 两种基本材质的使用.使用 LoadingManager 展示模型加载进度.OrbitControls 的缓动动画.TWEEN 简单补间动画效果等. 实现在线预览,已适配移动端:https://dragonir.github.io/3d/#/lunar 引入资源其中 GLTFLoader.FBXLoad…

webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）

序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的汗颜.除了为了生活所必须的工作时间外,还有大部分零散的时间不是给了短视频,就是给了短讯文章,简讯媒介,不说是毫无意义吧,但也着实是浮躁虚夸了. 用豆豆作品里的话术,"透视社会依次有三个层面:技术.制度和文化.小到一个人,大到一个国家一个民族,任何一种命运归根到底都是那种文化属性的产物". …

js和CSS3炫酷3D相册展示

<!doctype html> <html> <head> <meta charset="UTF"> <title>js和CSS3炫酷3D相册展示</title> <style> *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;hei…

解决js动态改变dom元素属性后页面及时渲染问题

今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话…

抓取Js动态生成数据且以滚动页面方式分页的网页

代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网站:http://toutiao.com/ 我们可以使用Selenium来搞定这件事情.Selenium的设计目的虽然是用于Web应用程序的自动化测试,但是却非常适合用来做数据抓取,可以非常简单地绕过网站的反爬虫限制,因为Selenium直接运行在浏览器中,就像真正的用户在操作一样. 使用Selen…

js 返回前一页并刷新页面方法

[导读] 要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中,下面我来给大家先介绍js 返回前一页并刷新页面,然后再把这些代码放在php中实现删除后返回当前页面并刷新页面.... JS 重载页面,本地刷新,返回上一页代码如下 1 2 3 <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()"…

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺…

js弹窗 js弹出DIV,并使整个页面背景变暗

1.首先写一个遮罩层div,然后再写一个弹窗的div  <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!…

js 和 css 中不能使用 jsp 页面中一些标签和 java 代码等，应注意

js 和 css 中不能使用 jsp 页面中一些标签和 java 代码等,应注意如 ${ } <%%> 等…

解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

解决HTML加载时,外部js文件引用较多,影响页面打开速度问题通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的js文件数量过多,就会导致页面展示延迟.那么,在开发的过程中,改怎么解决呢? 首先,我们看一看传统中js加载的做法,所有的<script>元素都应该放在页面的<head>元素中,例如: <!DOCTYPE html> <html> <head&g…

Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> var gMonths=new Array("一月","…

解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

例如这样然后这样出现这样的原因一般是静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); 这段代码是起主要作用的,但是这段代码是在页面初始化完毕才执行的(即把把其他引用的js文件下载好,并且里面的函数都…

JS window对象返回前一个浏览的页面 back()方法

JS window对象返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.history.back(); 注意:等同于点击浏览器的倒退按钮. back()相当于go(-1),代码如下: window.hist…

【面试题】js实现将excel表格copy到页面

js实现将excel表格copy到页面点击打开视频讲解更加详细其实最核心的技术,还是copy的是我们粘贴板上的数据就像平常怎么粘贴复制其他的数据一样,只是我们在excel粘贴的是一个表格数据这时我们首先也时获取我们粘贴板上的数据,如何对粘贴板上的数据进行处理,处理成我们想要的表格形式. 完整案例: <template> <div id="app"> <textarea rows="3" cols="60"…

三分钟学会用 js + css3 打造酷炫3D相册

之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者感受到学习的乐趣.我会尽可能讲得详细,不需要你对css和js有多么高深的理解,你也可以跟着一步步做出来.如果你是为了讨女票开心,那么也完全可以把图片换成对方的照片,在某个特别的时刻给对方一个惊喜哦 ~ css3的强大使得网页的展示变得空前得丰富起来,再配合简单的js代码,就可以实现这个效果.…

GJM ：JS + CSS3 打造炫酷3D相册 [转载]

感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有问题请联系我,侵立删,谢谢! 我的博客:http://www.cnblogs.com/GJM6/ - 传送门:[点击前往] 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者…

Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码项目GitHub地址:https://github.com/Wayou/3D_Audio_Spectrum_VIsualizer/tree/master 在线演示地址:http://wayou.github.io/3D_Audio_Spectrum_VIsualizer 如果你想的话,可以从这里下载示例音乐:http://pan.b…

使用Jquery.js框架和CSS3实现3D相册的制作

有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserve-3d): 3.jquery.js中对鼠标事件的一些处理和鼠标位置的获取. 下面详细介绍有关3D相册的一个简易实现过程: 一.首先我们定义好一个盒子div,在这个里面用来存放我们图材,一开始是处于重合状态如下: 后面将相应的照片进行一个位置的摆放,也就是说转换成3d的状态给人空间的感觉,这里主要是…

【翻译】在Ext JS中创建特定主题的重写

Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类.这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为.在本文,将展示如何实现特定主题类的重写. 原文:http://www.sencha.com/blog/creating-theme-specific-overrides-in-ext-js/ 作者:Lee Boonstra Lee is a technical trainer at Sencha. She's l…

演练Ext JS 4.2自定义主题

本文将根据API文档中关于主题的介绍做的一次演练,以便熟悉自定义主题的过程. 练习环境: Sencha Cmd v4.0.1.45 Ruby 1.9.3-p392 firefox 26 首先,使用以下Sencha Cmd命令创建一个名为TestMyTheme的应用程序: sencha -sdk c:\ext4 generate app TestMyThemec:\TestMyTheme 命令中,参数sdk声明了框架文件所在目录为C盘的ext4目:generate为命令(commands),表示要…

使用Three.js为QQ用户生成3D头像阵列

东西其实比较简单,就是输出某一范围内QQ账号的3D头像涉及的技术主要是Three.js的基本使用而后通过腾讯的接口异步并发请求QQ用户头像,Canavs作图生成Texture应用在球体上需要注意的是,必须修改Chrome启动参数允许访问跨域资源才可正常打开此页面 GitHub地址:https://github.com/gstoken/qq-cube 先上效果图然后是主要代码 <!DOCTYPE html> <html lang="en"> <hea…

css3加js做一个简单的3D行星运转效果

前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处理的不是很好,如果有好的建议万望留言告知,不胜感谢.源代码已上传到github上,点这里获取.好了不说废话了,下面附上代码. HTML部分 <div class="path-Saturn"> <div id="Saturn" title="土…

Three.js实现脸书元宇宙3D动态Logo

背景 Facebook 近期将其母公司改名为 Meta,宣布正式开始进军元宇宙领域.本文主要讲述通过 Three.js + Blender 技术栈,实现 Meta 公司炫酷的 3D 动态 Logo,内容包括基础模型圆环.环面扭结.管道及模型生成.模型加载.添加动画.添加点击事件.更换材质等. 什么是元宇宙元宇宙 Metaverse 一词源于 1992 年尼尔·斯蒂芬森的 <雪崩>,该书描述了一个平行于现实世界的虚拟世界 Metaverse,所有现实生活中的人都有一个网络分身 Avatar…

如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

文章前,先聊点啥吧. 最近元宇宙炒的挺火热,在所有人都争相定义元宇宙的时候,资本就开始着手入场了.当定义明确,全民皆懂之后,风口也就过去了. 前两天看到新闻,新世界CEO宣布购入最大的数字地块,这块虚拟土地的投资金额约为 3200 万元人民币.在这之前新世界以及他购买的虚拟土地持有公司名称也都是鲜为人知的.这就是资本的力量,即打了广告,又占了风口坑位,一举多得,好像现在没个几千万上亿的动态,都不足以博得大众眼球. 那么何为元宇宙,为何不是元世界.元地球,而是疯狂到了宇宙这个范围.如果真的虚拟到…

用js写的比较简单3D旋转效果

HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #radio{ position: relative; margin:0 auto; width: 1280px; height: 800px;border: 1px solid red;} .radio_style{border: 5px sol…

js jquery 关闭弹出页面并刷新父页面（window.opener）

function Closepage() { if (window.opener && !window.opener.closed) { window.parent.opener.location.reload(); } window.close(); return false; } 其它方法可借鉴: window.opener用法 http://www.cnblogs.com/zhangzt/archive/2009/12/24/1631253.html window.opener 实际…

js 刷新windows.open另一个窗口页面或window.open的页面如何刷新(父页面)上层页面

一.js完整代码如下: //js打开新窗口 functionopenWin() {window.open('addInfo.jsp', '_blank','width=300,height=400,top=200,left=400');} //刷新当前页面方法,用于回调函数refreshWin function refreshWin() { //调用刷新页面的方法,此处RefreshSocket为刷新页面对应的方法 //也就是说,如果页面有个刷新按钮, //则点击按钮提交的类名就是此处的类名 w…

JS 判断图片尺寸大小，以便页面resize时，动态调整页面元素位置

){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4pool = setInterval("show_prize_pool()",1500); //页面大小改变后,要再次计算奖池元素的高度. $(window).resize(function(){ show_prize_pool(); }); 简单说明下: 1.$('img.pool_li…

用js实现在加载完成一个页面后自动执行一个方法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="en"> <…

【Three.js 实现2022冬奥主题3D趣味页面 🐼】的更多相关文章