3D Three.js初探 + 广告业务的关联思考

随着5G大浪潮越演越烈,越发越感觉到VR、裸眼3D、全息投影等技术体验离我们普通人的生活越来越近。作为广告部门的一只前端程序猿,也在思考Three.js在业务中能有什么用。好在之前在大学做项目的时候接触过OpenGL,渲染原理基本上都差不多,在初步学习完之后,列出一些自己的初步思考。这篇文章的前半部分会简单介绍一下Three.js这个技术的基本原理,以及入门知识;而后半部分会聊一下自己认为目前业务中的可能应用。感兴趣的朋友们可以留言,我们一起探索哟。

技术背景:

-什么是Three.js

首先来聊一下什么是Three.js。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。简单地来说,three.js的出现,使我们这些小前端们可以快速上手搭起3D程序,而非跟WebGL原生的API死磕到底。通过Three.js, 可以创建三维图形;在三维场景中生成动画、移动物体;在物体上渲染纹理和材质;从三维建模软件中加载图形等。

-浏览器的支持性

因为Three.js其实是一个基于WebGL的JavaScript的库。所以只要是支持WebGL的浏览器,就可以运行Three.js,如下图所示(详细信息请参阅 caniuse.com/#feat=webgl )。基本上,Three.js可在任何流行的浏览器上运行,除了IE的大部分版本,自IE11开始,微软才开始支持WebGL。

-Three.js的原理

Three.js主要有三大组件,场景(Scene), 相机(Camera)和渲染器(Render)。在场景里我们可以定义各种物体和灯光,通过相机我们可以调整观察者的视角;而渲染器是根据相机和场景的相对位置和关系,渲染出来在那种条件下,可以看到的景象。这一过程,其实可以比作拍电影,先布置好场景,然后确定好相机的位置,可以看到的景象也就应运而生了。

-Three.js调用

如果想在项目中使用Three.js,加载库的方式也很简单。

可以将three.js通过script tag加到HTML里,也可以直接通过NPM,直接以模块方式在项目的javascript文件中调用。

<!-- index.html -->
<script src="path/to/three.js"></script>复制代码

npm install three --save  // or use yarn add three.js alternatively
import * as THREE from 'three';复制代码

如果想要把3D渲染的场景在HTML中展示,我们就需要制定一个简单的<div>元素,并为其制定一个唯一的ID作为钩子。这个 <div id="scene-container"/> 被称为"divider element",它不会告诉浏览器会其内部会怎样,或者会显示什么,只是起到将周围其它元素与其内部隔开而已。scene-container这个ID,会被当做钩子与相关的js代码建立关联,告诉js/app.js哪里去放置渲染后的3D场景。

<body>
  <h1>广告示例</h1>
  <div id="scene-container"> // This div will hold our scene
  </div>
  <script src="js/app.js"></script>
</body>function init() {
  container = document.querySelector('#scene-container'); // where to drawn  
  
  scene = new THREE.Scene();
  createCamera();
  createControls();
  createLights();
  createMeshes();
  createRenderer();
  renderer.setAnimationLoop(() => {
    update();
    render();
  });
}复制代码

当app.js拿到钩子的位置后,

container = document.querySelector('#scene-container')

就会生成在其内部添加一个 <canvas> 元素。所有的three.js WebGL场景都会被画到这个 <canvas/> 上。three.js会把控制权交给底层的WebGL,WebGL会调用显卡(graphics card)来生成图片或一些列图片(如果有动画效果的话),最后这些渲染结果会被在canvas上展示。

-Three.js基本组件

如果我们想要生成下图这个简单的demo,应该怎么来做呢?在上文中,我们提到了Three.js主要有三大组件,场景(Scene), 相机(Camera)和渲染器(Render)。在这里会以这个简单的demo情形为例子,讲解一下从代码细节上我们怎么能够实现这一渲染过程。基本要做的就是布置好场景,创建物体,放好摄像机,开拍!

首先需要做的是创建一个场景,并给场景设置一个背景色。因为本人是个女孩子,就设置成我所偏爱的紫色了。

// create a Scene
scene = new THREE.Scene();
scene.background = new THREE.Color('#9370DB');复制代码

有了场景之后,我们就可以往里面增添物体啦!如果需要往场景里添加物体,就调用

scene.add( object )复制代码

反之,如果不想要某个物体了(做动画效果时),就用

scene.remove( object )复制代码

是不是很简单!

往里面加物体了,其实可以被理解为我们3D场景中的演员。3D计算机图形中,物体通常是用Mesh来生成的。Mesh中又包括geometry,也就是需要声明的物体的形状;以及material,即物体的材质。通过下面的代码,我们制造出来一个长宽高分别为2单位长度的正方体,给其附上了橙色的一般材质,并把它加入了场景中。

// create a geometry - here is a box
const geometry = new THREE.BoxBufferGeometry(2, 2, 2);
// create a orange Standard material
const material = new THREE.MeshStandardMaterial({ color: '#FF6347' });
// create a Mesh containing the geometry and material
mesh = new THREE.Mesh(geometry, material);
// add the mesh to the scene object
scene.add(mesh);复制代码

在有了场景和演员之后,就要开始拍大片了。那么,相机需要放在什么位置,其视角又应该如何设定呢?相机配置的参数稍微有点复杂,我们慢慢来看。

首先需要明确的是,为了在2D的浏览器上展示出人眼感觉的3D图像,我们的相机就要模拟人眼的成像原理。这里使用的是PerspectiveCamera,透视相机,基本成像原理用大白话来说,就是“近大远小”。透视原理的相机,需要4个参数,来定义其能看到范围(专业名称叫viewing frustum)。这四个参数分别为:fov, aspect, near, far。near是定义从相机多近的位置开始渲染场景,far是指相机能看到多远,这两个截面内的物体,才属于相机的可视范围。

fov是field of view的缩写,定义了视场的角度。aspect是渲染输出结果的横向长度和纵向长度的比值。由于这个例子会选用整个窗口作为输出界面,就用窗口的长宽比。这个长宽比决定了水平视场和垂直视场的比例关系。

// set up the options for a perspective camera
const fov = 35; // fov = Field Of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 100;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// every object is initially created at ( 0, 0, 0 )
 // we'll move the camera back a bit so that we can view the scene
camera.position.set(0, 0, 10);复制代码

由于在上面添加物体的时候,我们并未声明具体位置,所以物体就被放置在了默认的位置(0,0,0)。所以这里,我们需要把相机的位置稍微往后一点,这样才能看到物体。

之后,我们可以再增加一个灯光,实现光照效果。灯光有很多效果可以选择,我们这里选用了最简单的光照效果,DirectionalLight。该效果是模拟单一光源的,从某个位置向四处发射光线,例如太阳。

// Create a directional light
const light = new THREE.DirectionalLight(0xffffff, 3.0);
// move the light back and up a bit
light.position.set(10, 10, 10);
// remember to add the light to the scene
scene.add(light);复制代码

在有了场景,物体,灯光后,就需要renderer来生成2D图像了,并将其插入canvas元素内。当调用WebGLRenderer,会自动生成一个HTML <canvas/> 。这里需要用renderer.setSize()来定义canvas画布的大小。在最初,这个canvas会被存在renderer.domElement里。之后采用浏览器内置的方法appendChild,将其插入到上文提到的HTML的钩子元素 <div id="scene-container"/> 中。

container = document.querySelector('#scene-container');
......
// create a WebGLRenderer and set its width and height
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// add the automatically created <canvas> element to the page
container.appendChild(renderer.domElement);复制代码

之后要做的就是,告诉renderer我们所建立的场景和相机,让其渲染产生图像。

renderer.render( scene, camera );复制代码

代码写到这里,我们得到了这样的一个静态2D图像。

为了达到3D动态效果,我们需要让物体或相机动起来。这里,我们用比较简单的方法,让正方体运动起来。在animate函数不停地调用自己,利用requestAnimationFrame来处理调用频率。让正方体在每次函数调用时,在X,Y,Z方向都旋转一点点。并且每次都重新调用渲染函数,生成新的图像。

这些连续变化的图片连起来,就形成了我们想要的动画效果。

function animate() {
  // call animate recursively
  requestAnimationFrame(animate);
  // increase the mesh's rotation each frame        
  mesh.rotation.z += 0.01;
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}复制代码

-Three.js广告业务中的应用(个人瞎想...原创哦!!!)

在长篇介绍完Three.js之后,想必小伙伴们已经对它有了初步的了解。那么如何把自己业余时间的学习,与业务联系在一起呢?在此,发挥脑洞的时刻到了。由于本人是广告部门的,所以就初步地瞎想了一些可能用到的场景,如果小伙伴们有更cool的想法,欢迎一起讨论。

下面是自己初步做的一些小demo,欢迎轻拍~~~

1. 3D banner 广告 - 可以把banner广告立体化,用户可以从多角度来改变视角观赏巨幅banner,就有种大街上广告牌的感觉。

2. 3D交互式广告 - 可以把广告牌放置在一个3D空间里,然后用户探索式地去发现广告

此处简单地做了个例子,用户驾驶着可以飞的骑车,在浩瀚的太空中环游,并浏览广告

3. 3D动画广告 - 适合用在一些官网首页,用于效果宣传

4. 3D文字广告 - 通过3D变化 增强观看者对文字关键字的记忆

总的来说,我觉得Three.js在广告业务中的应用可以总结为两个方向(原创):

1)2D广告的图片直接依附于3D空间展示 - 因为2D空间是3D空间的一个子集,那么目前比较流行的2D图片广告,其实可以作为3D空间的一个面,依附于3D空间里。后续的开发基本就是增加各种物体与这个面的交互;

2)将广告创意直接涉及到3D界面里 - 让3D场景中的物体表达出广告的信息,例如后两种广告。更复杂的一点设想是,打造一个3D场景,例如城市街景,然后以游戏探索的方式,把广告加入进去。

以上就是我在业余时间初步学习Three.js并基于业务的一些想法,因为也是刚刚利用业余时间接触这个技术捏,如果有不足的地方,欢迎指出!如果有感兴趣的小伙伴,欢迎点赞留言我,我们一起探索!

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章