使用three.js开始使用WebGL

Web developer creating 3D shape graphics

WebGL的在所有现代浏览器中广泛支持,使您可以使用硬件加速的3D图形JavaScript的为基于浏览器的应用和游戏开辟了广泛的可能性 - 只需查看这些内容20个令人惊叹的WebGL实例为了证明。

WebGL本身相当低级,你不太可能想以它的香草形式使用它。有一系列库甚至游戏引擎可用于提供更高级别的功能。

在本教程中,我将向您展示如何制作应用程序或使用WebGL的网站Three.js所,这是一个免费的开源库,提供WebGL的抽象。

01.得到three.js

你需要从掌握开始Three.js所。获得最新版本后,将three.js放入项目文件夹中。然后我们将其作为脚本添加到我们的页面,就像任何其他JavaScript库一样。我们将自己的代码放入一个单独的JavaScript文件中。

开始使用three.js 

02.设置场景

我们需要三件事来开始使用WebGL:一个场景,一个摄像头和一个渲染器。场景是我们放置要由three.js显示的对象的地方。相机是我们将看到它们的观点。渲染器将两者组合在一起并相应地绘制屏幕。完成这些设置后,我们将渲染器添加到文档中。

var width = window.innerWidth; var height = window.innerHeight; var viewAngle = 45; var nearClipping = 0.1; var farClipping = 9999; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(viewAngle,width / height,nearClipping,farClipping); var renderer = new THREE.WebGLRenderer(); renderer.setSize(width,height); document.body.appendChild(renderer.domElement);

03.创建一个循环

接下来,我们需要创建一个实际渲染场景的循环。我们这样做是使用Renderer.render()功能,但关键部分是递归使用RequestAnimationFrame(),这是一个内置函数,使浏览器在准备好绘制一个框架时可以请求另一个框架。运用RequestAnimationFrame()更容易,并且比自己尝试绘制帧的时间更容易动画。

function animate(){requestAnimationFrame(animate); renderer.render(场景,相机); animate();

04.创建基本对象

现在我们可以开始向场景添加一些对象了。我们可以通过创建Mesh对象并将它们添加到它来实现。网格由几何(对象的形状)和材质(用于绘制它的颜色或纹理)组成。我们将通过定义三种不同的几何体并为它们分配不同的颜色材料来创建一些基本对象。

var cubeGeometry = new THREE.BoxGeometry(1,1,1); var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000}); var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); var coneGeometry = new THREE.ConeGeometry(0.5,1,4); var coneMaterial = new THREE.MeshLambertMaterial({color:0x00ff00}); var cone = new THREE.Mesh(coneGeometry,coneMaterial); var sphereGeometry = new THREE.SphereGeometry(0.5,8,8); var sphereMaterial = new THREE.MeshLambertMaterial({color:0x0000ff}); var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

05.指定一个职位

默认情况下,对象是在场景的原点(x = 0,y = 0,z = 0)处添加的,这也是我们的相机所在的位置,因此我们还需要为它们指定位置。然后我们准备将网格添加到我们的场景中,这意味着它们会自动渲染到场景中动画()环。

cube.position.x = -2 cube.position.z = -5; cone.position.z = -5; sphere.position.z = -5; sphere.position.x = 2; cube.position.z = -5; scene.add(立方体); scene.add(锥); scene.add(球);

06.添加光源

如果你现在查看你的页面,你会发现事情看起来有点平淡。没有对物体施加照明,因此它们是纯色原色并且看起来是二维的。要解决这个问题,我们需要切换MeshBasicMaterial一种支持照明的材料;我们会用的MeshLambertMaterial。我们还需要为场景添加光源。

var light = new THREE.PointLight(0xFFFFFF); light.position.x = 0; light.position.y = 10; light.position.z = 0; scene.add(光);

07.移动源

现在我们到了那里!您应该在页面上看到非常明显的三维对象。我们尚未完成的工作充分利用了动画()功能。让我们做一些改变,让我们的光源在物体上方以圆周运动移动。

var lightAngle = 0; function animate(){lightAngle + = 5; if(lightAngle> 360){lightAngle = 0;}; light.position.x = 5 * Math.cos(lightAngle * Math.PI / 180); light.position.z = 5 * Math.sin(lightAngle * Math.PI / 180); requestAnimationFrame(animate); renderer.render(场景,相机); }

08.添加纹理

在实践中,我们可能不希望我们的对象是平面颜色。从文件中对它们应用一些纹理会更典型。我们可以这样做THREE.TextureLoader()。让我们改变我们的锥体对象的创建方式,以利用我们从文件中加载的纹理。加载文件时调用该函数。

var textureLoader = new THREE.TextureLoader(); textureLoader.load(“./ grass_texture.jpg”,texture => {var coneGeometry = new THREE.ConeGeometry(0.5,1,4); var coneMaterial = new THREE.MeshLambertMaterial({map:texture}); var cone = new THREE.Mesh(coneGeometry,coneMaterial); cone.position.z = -5; scene.add(cone);},);

09.让它自然

事情看起来更好,但事情仍然不太自然。纹理看起来非常平坦,并且不响应照明。我们可以通过使用凹凸贴图来解决这个问题,这使我们能够使用图像的亮部和暗部来模拟对象表面上的纹理。让我们尝试一下球体上的不同纹理。我们将材料切换为MeshPhongMaterial,这允许我们指定一个BumpMap属性。

var textureLoader = new THREE.TextureLoader(); textureLoader.load(“./ bump_map.jpg”,texture => {var sphereGeometry = new THREE.SphereGeometry(0.5,8,8); var sphereMaterial = new THREE.MeshPhongMaterial({color:0x0000ff,bumpMap:texture,bumpScale: 1.0}); var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); sphere.position.z = -5; sphere.position.x = 2; scene.add(sphere);},);

10.添加控件

作为最后的触摸,让用户对场景进行一点控制。为了增加平移能力,有一个额外的库附带了three.js,这使得它非常容易。确保将three.js包中的OrbitControls.js提取到项目目录中,并将其包含在您的页面中。这是几个带有three.js的控制库之一,以实现常见的摄像机控制方式。

11.适用于相机

现在我们需要做的就是创建一个THREE.OrbitControls对象并将其应用于我们的相机。图书馆将为您完成剩下的工作:您不需要听取点击,鼠标移动等操作。您可能还希望将对象移回原点,然后偏移相机,以便它可以整齐地平移在对象周围。

有了这个,我们完成了我们的介绍。您应该有三个具有不同纹理样式的对象,一些动态光照和一个用户控制的相机。

camera.position.z = 10; var controls = new THREE.OrbitControls(camera);

本文介绍了Web Designer的第268期,这是一本创意网页设计杂志 - 提供专家教程,前沿趋势和免费资源。立即订阅Web Designer。

喜欢这个?试试这些:



翻译字数超限