创建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 );