专栏首页京程一灯使用Three.js制作酷炫无比的无穷隧道特效

使用Three.js制作酷炫无比的无穷隧道特效

一些有WebGL体验的页面,浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。

例子地址 下载资源

WebGL变得原来越流行,我们可以看到一些列的网站使用WebGL来达到惊艳且具创造力的效果。 Fornasetti 近期发布了一个网站,其中借助WebGL达到了极好的效果:让我们身临穿梭于带有不断变换背景的隧道之中的运动。最有趣的莫过于可以通过鼠标控制我们穿梭的方向。本文将分享一些类似的Three.js管道运动。 注意: 你的浏览器需要支持WebGL(> IE10)以便可以浏览这些例子。

Fornasetti的网站截图

起步

在例子中我们会使用Three.js这个常用的库,来使构建WebGL效果更为便捷。在生成隧道前,我们先需要创建渲染器(renderer),场景(scene)以及相机(camera)。

当你对于使用Three.js不是那么顺畅,我建议你先阅读一些入门课程。这里提供一个Rachel Smith写的三部分的入门课程。

一旦创建好了场景(scene)我们就可以继续下面的流程:

  1. 创建一条曲线来确定隧道的形状
  2. 生成基于曲线的隧道
  3. 向前移动
  4. 增添交互

曲线

有赖于Three.js,我们有好用的函数用来基于一组点去创建曲线。我们首先需要计算这些点的位置,一旦完成这一步骤,我们可以用如下方法创建曲线:

// 穿建空数组来储存点
var points = [];

// 点沿z轴方向定义
for (var i = 0; i < 5; i += 1) {
    points.push(new THREE.Vector3(0, 0, 2.5 * (i / 4)));
}

// 创建基于点的曲线
var curve = new THREE.CatmullRomCurve3(points)

在实际过程中,我们会改变曲线来保证管道形状变化。如你所见,所有的点都有相同的x,y值。目前,这条曲线还只是简单的直线。

隧道

现在我们有了一条曲线(一点也不弯),我们可以使用Three.js来创建一个隧道。为此我们需要:何体模型(用来描述管道的形状),材质(用来展示管道的视觉效果)以及最终的将几何体与材质结合成网格(mesh)。

// 基于曲线创建一个隧道几何模型
// 每个值的含义: 
// 70 : 隧道模型的轴向片段数
// 0.02 : 曲率(虽然是个小隧道)
// 50 : 隧道模型径向片段数
// false : 用来决定隧道模型是否闭合
var tubeGeometry = new THREE.TubeGeometry(this.curve, 70, 0.02, 50, false);

// 用一张纹理贴图而非单一的颜色来作为隧道呈现的材质
var tubeMaterial = new THREE.MeshStandardMaterial({
    side: THREE.BackSide, // Since the camera will be inside the tube we need to reverse the faces
    map: rockPattern // rockPattern is a texture previously loaded
});
// 使用重复图案填充以防止纹理被拉伸Repeat the pattern to prevent the texture being stretched
tubeMaterial.map.wrapS = THREE.RepeatWrapping;
tubeMaterial.map.wrapT = THREE.RepeatWrapping;
tubeMaterial.map.repeat.set(30, 6);

// 基于tubeGeometry与tubeMaterial创建网格(mesh)
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);

// 将隧道添加进场景(sence)
scene.add(this.tubeMesh);

向前移动

由于运动的原理并非我最初所想,这震撼到了我,因此这是我最喜欢的部分。我最初认为隧道实际上沿相机的方向运动,之后我觉得因该让相机移动进隧道中。但这两种想法都是错误的。

实际的解决方案非常巧妙: 场景中没有任何物体发生了实际的运动,发生的仅仅只是隧道贴图位置的移动.

为此,我们需要对每一帧的贴图都定义一个偏移量从而实现视觉上的运动。

function updateMaterialOffset() {
  // 以定义的速度来更新材质的偏移量
  tubeMaterial.map.offset.x += speed;
};

用户交互

没有用户交互的例子不是好例子。当你的鼠标在浏览器上移动的时候,你可以控制隧道的形状。这里的小技巧去更新我们在第一个步骤中创建的曲线。一旦曲线改变了,我们便可以借由一些过渡来更新隧道。

// 更新第三个的在x轴及y轴上的位置
curve.points[2].x = -mouse.position.x * 0.1;
curve.points[2].y = mouse.position.y * 0.1;

// 更新最后一个点的x轴位置
curve.points[4].x = -mouse.position.x * 0.1;

万事大吉?

其实并没有,实际的代码会比文章中提到的更复杂一点。但是如果你理解了以上的步骤,那么对例子是如何运作的原理会有大致的认识。如果你希望更深入地理解,查看第一个例子的源码。我已收到大量的评论。如果你依然有困惑,不要犹豫来Twitter上找我吧。

例子

一旦你有了基础的隧道模型,你可以不同的方向来改造它。浏览一下例子可以给你一些启发!

上文中介绍过的砖块图案。

点击你的鼠标或者是点按屏幕来释放粒子彩虹!

这个例子灵感来源于科幻电影的时空穿梭。

进入你的身体,观察一下血管吧:)

为何所有的隧道都是圆的?是时候让我们穿梭在三角形的隧道中了。

在手机或平板上尝试这个例子,并通过设备朝向来控制方向!

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 讲给前端的正则表达式(4):避免灾难性回溯[每日前端夜话0x105]

    正则表达式可以解决许多问题,但也有可能是使我们头痛的根源。最近 Cloudfare 的一次停机事故就是由于正则表达式导致全球大量机器上的 CPU 峰值飙升至10...

    疯狂的技术宅
  • 移动web开发需要注意的二十点

    (现在大部分移动浏览器包括wp都支持viewport的width选项),这些meta标签在开发webapp时起到非常重要的作用,可以给用户提供更好的体验

    疯狂的技术宅
  • CSS 层叠相关知识指北

    亲爱的观众老爷们大家好~我发现我写文章都是因为工作碰到问题才写,什么探索最前沿的最讨厌了(其实是力有所不及)!言归正传,最近碰到的问题是这个:准备开发一个平台,...

    疯狂的技术宅
  • 秒懂!四步16点高效搞定高性能web服务器nginx

    Nginx(读音engine x)服务器由于性能优秀稳定、配置简单以及跨平台,被越来越多的公司和个人所采用,现已成为市场份额继Apache之后的第二大Web服务...

    小小科
  • 嘿!你喜欢我么?

    身为未来的程序员,你要是用一般的表白方式,是不是很low,怎么才能高大上呢?跟着小编看看这道题。

    闫小林
  • easyui表单校验拓展

    /** * Created by chaozhou on 2016/5/30. */ /** * 扩展的基本校验规则, */ $.extend($.fn...

    用户1141560
  • DeepMind人工智能系统可有效处理50多种眼科疾病

    【概要】谷歌旗下的DeepMind公司联合多家研究机构所开发出来的一套人工智能系统可以有效处理50多种眼科疾病,可与优秀的人类专家媲美。

    人工智能快报
  • 阿联酋选出首位 AI 国务部长

    2017年10月,阿联酋政府推出“阿联酋人工智能策略(AI)”。这标志着移动后的政府阶段将依靠各种未来的服务,部门和基础设施项目。该战略在该地区和世界是同类首创...

    企鹅号小编
  • JS-原生代码或方法实现特定效果总结(更新中...)

    xing.org1^
  • Python基础项目实战:69行代码编写记忆数独游戏

    freegames是Apache2许可的免费Python游戏集合,旨在用于教育和娱乐,完全是开源的,我们只要引用编写就好

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券