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

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

背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面,特此纪念一下.非常感谢大家的关注 ,后续我会更加专注前端知识的整理分享,写出更多高质量的文章.(希望其他平台也早日破千 ) 本文使用 React + Three.js 技术栈,实现粉丝突破 1000 的 3D 纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight…

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果.本文中涉及到的知识点主要包括:CSS 网格背景.MeshNormalMaterial 法向材质.FontLoader 字体加载器.TextGeometry 文本缓冲几何体.…

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 深居内陆的人们,大概每个人都有过大海之梦吧.夏日傍晚在沙滩漫步奔跑:或是在海上冲浪游泳:或是在海岛游玩探险:亦或静待日出日落--本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping.Water 类.Sky 类.Shader 着色.ShaderMaterial 着色器材质.Raycaster 检测遮挡以及…

JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script>中,页面的加载和渲染都必须停下来等待脚本文件的执行完成.因为在脚本文件中可能会修改页面的内容.这就会出现一个问题,当HTML文件中引入很多的外部脚本文件和内联脚本时,可能会导致页面的严重阻塞,影响页面的加载和渲染,用户体验特别的差.因而需要寻找适当的方法来减小脚本文件对页面加载带来的影响. 改善性能的几种方…

js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88%96%E5%9B%BE%E7%89%873D%E7%AB%8B%E4%BD%93%E9%A2%84%E8%A7%88%E6%95%88%E6%9E%9C.rar…

JS读写浏览器cookie及读取页面参数 var zbrowser = { //设置浏览器cookie,exdays是cookie有效时间 setCookie: function (c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = value + ((exdays == null) ? "" : "; expire…

使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个是年龄....还有很多,为了数据的简单明了,只举例部分数据即可 在vue中,el是作用的范围,这个直接获取html 中的id即可,再一个是data,这个是vue中存储数据的部分,刚才说到,这里有一个用户名,一个年龄.而没一个用户名对用一个年龄,这个是固定的,对于固定的东西,我们喜欢绑定在一起,这样在…

js引入的数组 会被页面缓存,如需要被强制性不缓存,请用function return 就ok了…