创建WebGL 3D网页是向观众留下良好第一印象的一种方式。使用WebGL,您可以在浏览器中提供高质量的可视内容。你可以在没有插件或任何特殊要求的情况下完成。所有现代浏览器都支持WebGL,以及移动设备和平板电脑。WebGL使您可以创建令人难以置信的3D场景。它可以为webVR体验提供动力,操纵视频,渲染图形着色器等等。
在本教程中,您将为制作制作一个加载过度页面。这个是一个非常具有戏剧性和视觉上的吸引力的一个网站页面,因为一个神秘的物体反映和旋转以响应鼠标的互动。颗粒在它周围旋转,在移动时改变颜色。您将完成创建此交互式页面的每个步骤,允许您为项目生成自己的页面。
您将仅使用Three.js的附加功能,这是一个功能强大的Web渲染库。您可以将自己的图像用作纹理,使其独一无二。您还将学习如何利用网格,光照和纹理来增强表面细节,如何使用环境贴图,以及如何为深度和兴趣添加图层。
由于整个教程代码比较多,篇幅比较长,所以我们将整个教程分为三个部分讲解。我们采取每天一讲的方式更新,更加有利于您的学习和了解。全教程设计成21个步骤和知识点。
01.基本的HTML设置
首先,您需要在某处查看3D场景。设置基本HTML文件并包含three.js。这可以在外部托管,也可以从three.js存储库添加。添加一些简单的CSS以使页面全屏并删除任何滚动条。将文件保存到本地Web服务器,以便在准备测试时提供HTML。添加以下代码以开始使用。
<!DOCTYPE html>
<html>
<head>
<title>Relative Studios
</title>
<script src=”libs/three.min.js”></script>
<style>
html, body { margin: 0; padding:0; overflow: hidden; }
</style>
</head>
<body>
<script>
// 3D控制代码部分
</script>
</body>
</html>
02.添加全局变体
在其余代码中,您需要一些变量用于引用。立即设置它们。这将包括一个容纳粒子的数组,一个用于四面体,鼠标,raycaster和灯光的't'变量。
在脚本标记内,首先添加以下代码。
// vars
var num
=30;
var objects
=[];
var raycaster
=
new
THREE.Raycaster();
var mouse
=
new
THREE.Vector2();
var light
,t
;
03.添加场景,相机和渲染
我们需要先添加一个包含所有对象的场景。然后我们添加一个可以在其中移动的摄像头,根据需要进行平移,倾斜和移动。第一个属性是视野。第二个是宽高比。您还可以在第三个和第四个属性中定义近剪裁平面和远剪裁平面。最后,添加渲染器,该渲染器处理将场景绘制到画布。
在脚本标记中添加以下代码。
// create camera
var camera
=
new
THREE.PerspectiveCamera
(
65, window
.innerWidth
/window
.innerHeight
,
0.1,
1000
);
camera
.position
.set(0.0,0.0,5);
// create a scene
var scene
=
new
THREE.Scene();
// create renderer
var renderer
=
new
THREE.WebGLRenderer(
{antialias
:true});
renderer
.setSize( window
.innerWidth
, window
.
innerHeight
);
document
.body
.appendChild( renderer
.domElement
);
04.添加一个聚光灯
接下来,您需要为场景添加灯光。Three.js配有各种灯,包括点,方向,环境和聚光灯。为此使用聚光灯。它将为您提供位置和方向属性,并允许您在以后希望投射阴影。
添加以下代码以添加聚光灯。
//Create a Spot light
light
=
new
THREE.SpotLight(
0xccddff,.8
);
light
.position
.set(0,0,5);
scene
.add( light
);