【Three.js】防护罩效果

制作思路：

1.用Mesh创建一个几何体。

2.加载一个图片，设置图片垂直循环。

3.添加一个材质，把图片赋到材质里。

3.每帧更新图片的偏移值。

第一张gif的图片

直接上代码：

      // 加载图片。这里的图片我使用的是项目的绝对路径，图片我放在public下。也可以使用相对路径../../xxx.png，../代表当前脚本父文件夹。如果没反应就查看下log看看是否图片没加载出来let texture = new THREE.TextureLoader().load("images/test/test1.png") // 加载图片,好不好看取决你找的图片if (texture == null) {console.error("错误，检查你的图片路径是否准确，图片是否存在！");}texture.wrapS = THREE.RepeatWrapping;  // 纹理水平方向的平铺方式texture.wrapT = THREE.RepeatWrapping;  // 纹理垂直方向的平铺方式texture.repeat.set(1, 1);              // 重复产生N个相同贴图 产生N行// 用代码创建一个朝下的半圆几何体数据，具体的参数可以查看Three.js的官方文档const geometry = new THREE.SphereGeometry(15, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2);// 创建基础材质const material = new THREE.MeshBasicMaterial({map: texture,               // 图片。可以没有那就是纯色//color: 0xffff00,          // 颜色。如果设置了会叠加上面图片的颜色transparent: true,          // 是否开启透明度opacity: 0.6,               // 设置透明度值,只有开启了透明度这个值才好用side: THREE.DoubleSide,     // 正反面渲染});// 创建实体const sphere = new THREE.Mesh(geometry, material);scene.add(sphere); // 让这个实体添加在你的场景中,scene就是你创建的场景animate();function animate() {requestAnimationFrame(animate);material.map.offset.y += 0.01; //让图片按照Y轴位移速度}

【Three.js】防护罩效果相关推荐

JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
Js黑客帝国效果文字下落制作过程和思路
效果预览: http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/ Js黑客帝国效果文字向下落制作过程和思路 1.css控制文字竖显示 2.动态添加div ...
Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
展开收起js动画效果
展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Ad ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
HTML滚动条平滑移动,孟欣 - JS缓冲效果,平滑移动（滚动条平滑滚动）
JS缓冲效果,平滑移动(滚动条平滑滚动) 举个栗子: 点击导航栏的锚点,改变scroll的位置.(页面不是瞬间闪到,有个缓冲的效果) 点击button,页面瞬间闪到目标位置,这个功能很简单,不再啰嗦 ...
html右移动动画效果,图片的左右移动，js动画效果实现代码
图片的左右移动,js动画效果实现代码图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (sm ...
Three.js材质效果
Three.js材质效果本文是Three.js电子书的1.5节前面案例中几何体对应网格模型材质只是设置了一个颜色,实际渲染的时候往往会设置其他的参数,比如实现玻璃效果要设置材质透明度,一些光亮的表 ...
国内两个JS加密平台，加密JS代码效果对比
国内两个JS加密平台,加密JS代码效果对比如题,对比国内两家JS加密平台,加密JS的效果一.JShaman,JS加密平台测试用JS代码: function get_copyright(){ va ...
360开机小助手js循环效果出现的问题
360开机小助手js循环效果这里我想用这个案例探讨一下onclick和addEventListener嵌套问题,下面是案例的整体代码 <style>.box {width: 322px; ...

【Three.js】防护罩效果

【Three.js】防护罩效果相关推荐

最新文章

热门文章