使用Three.js的炫酷无限管道特效

最新推荐文章于 2024-07-26 16:01:33 发布

太小不点

最新推荐文章于 2024-07-26 16:01:33 发布

阅读量1w

点赞数 1

分类专栏： Canvas 文章标签： webgl 创意 Three.js

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于WebGL越来越受欢迎，我们开始看到一大堆使用它的网站用于出色的创意设计。品牌Fornasetti最近使用WebGL的强大功能发布了他们的网站，效果非常好：让我们看起来像是在变化的模式中穿越隧道的动画。这个经验中最有趣的部分是通过隧道的运动是由鼠标的移动来控制的。今天我们将和大家分享一些类似的Three.js动力隧道实验。

注意：您将需要支持WebGL（> IE10）的最新浏览器才能看到演示。

WX20171224-233003@2x.png

入门

对于这个演示，我们使用Three.js这是一个有用的库来创建WebGL，而不会弄脏你的手。在生成管之前，我们首先需要使用渲染器，相机和空场景来设置场景。

如果你觉得使用Three.js不太熟悉，我建议你先阅读一个教程来开始使用它。雷切尔·史密斯（Rachel Smith）在这里写了三篇好文章。

一旦我们有了我们的场景，我们将继续这些步骤：

曲线

由于Three.js，我们有一个有用的功能，可以让我们创建一个基于一组点的曲线。我们首先需要计算这些点的位置。一旦完成，我们可以像这样创建我们的曲线：

// Create an empty array to stores the points
var points = [];

// Define points along Z axis
for (var i = 0; i < 5; i += 1) {
    points.push(new THREE.Vector3(0, 0, 2.5 * (i / 4)));
}

// Create a curve based on the points
var curve = new THREE.CatmullRomCurve3(points)

该曲线稍后将被更新以实时修改管的形状。正如你所看到的，所有的点都有相同的X和Y位置。此刻，曲线是一条直线。

管子

现在我们有一条曲线（根本不是曲线），我们可以使用Three.js创建一个管。要做到这一点，我们需要三个部分：一个几何体（管的形状），一个材料（如何看起来），最后是一个网格物体（几何体和材料的组合）：

// Create the geometry of the tube based on the curve
// The other values are respectively : 
// 70 : the number of segments along the tube
// 0.02 : its radius (yeah it's a tiny tube)
// 50 : the number of segments that make up the cross-section
// false : a value to set if the tube is closed or not
var tubeGeometry = new THREE.TubeGeometry(this.curve, 70, 0.02, 50, false);

// Define a material for the tube with a jpg as texture instead of plain color
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);

// Create a mesh based on tubeGeometry and tubeMaterial
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);

// Add the tube into the scene
scene.add(this.tubeMesh);

向前移动管子

这部分是我最喜欢的，因为让我吃惊的是动画并没有起作用，因为我最初相信。我首先想到的是管子实际上正在朝着相机的方向移动。然后，我建议摄像机在管内移动。但是这两个想法都是错的！

实际的解决方案是非常聪明的：没有任何东西在沿着管子翻译的纹理旁边的“物理”上前进。

为此，我们需要在每个帧上定义纹理的偏移量，以创建运动幻觉。

function updateMaterialOffset() {
  // Update the offset of the material with the defined speed
  tubeMaterial.map.offset.x += speed;
};

用户交互

如果我们没有实现一些用户交互，演示将不会那么好。在浏览器中移动鼠标时，可以控制管的形状。这里的技巧是更新我们在第一步创建的曲线的点。一旦曲线发生变化，我们可以通过一些转换来更新管道。

// Update the third point of the curve in X and Y axis
curve.points[2].x = -mouse.position.x * 0.1;
curve.points[2].y = mouse.position.y * 0.1;

// Update the X position of the last point
curve.points[4].x = -mouse.position.x * 0.1;