本文介绍使用Three.js构建Web 3D场景的入门指南。内容涵盖开发工具如WebStorm和Sublime Text的选择，以及Three.js、jQuery、stats.js等核心库的配置。通过完整的HTML与JavaScript代码示例，演示如何初始化渲染器、相机和场景，帮助初学者快速搭建第一个三维应用。
Three.js 入门概述与工具选择
近期关注Web 3D技术，若直接使用OpenGL ES编写基础3D场景难度较大，但幸运的是，目前已有大量成熟的第三方库可供选用。
常见的3D库包括Three.js和SceneJS。Three.js拥有更丰富的中文资料，相对易于上手；SceneJS在官方文档中强调其工程与医学模拟能力，实时性表现优异，但中文学习资源相对匮乏。本文主要基于Three.js进行讲解。
在学习过程中，整理了部分常用工具与库。开发工具方面，推荐使用WebStorm。虽然初学者初期可能不建议直接使用集成开发环境（IDE），但WebStorm提供的代码智能提示和函数说明功能，能有效验证代码输入的正确性，即使参考教程也能确保代码无误。
Sublime Text也是可选的文本编辑器，配置后可获得一定的代码提示，尽管其智能提示功能不如专业IDE强大，但运行速度较快。相关工具文件体积较大，建议直接前往官网下载获取。
核心依赖库配置
项目中涉及的核心库包括：
- Three.js（具体介绍可通过搜索引擎查询）：
- jQuery-1.9.0.js：
- jQuery-3.2.1.js：
- stats.js：
- dat.GUI.js：
- controlKit.js：
- SceneJS.js：
作为初学者，本文使用WebStorm进行开发。以下是Three.js的第一个示例代码，其中包含详细注释，建议边写边阅读注释以加深理解。学习时建议将下载的库文件重命名，并与HTML文件统一存放于同一文件夹中，以便直接引用，避免使用绝对路径。
首个三维场景代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js 第一章学习</title>
<!--需要的基本JS库-->
<script src="jquery19.js"></script>
<script src="three.js"></script>
<script src ="stats.js"></script>
<script src = "dat.gui.js"></script>
<script src = "controlKit.js"></script>
<!--给body加入一个样式，边框为0（零，不显示边框）；滚动条隐藏-->
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!--建立一个DIV，WebGL渲染的基本物体会在此处输出-->
<div id="WebGL-output">
</div>
<!--定义一个JQuery函数，所有的WebGL操作展示将在该函数中进行-->
<script type="text/javascript">
$(function () {
<!--构建场景-->
var scene = new THREE.Scene();
<!--建立相机，查看场景,透视相机-->
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
<!--构建渲染器，进行渲染-->
var renderer = new THREE.WebGLRenderer();
<!--渲染背景色,不知道为什么在此学习过程中，该函数setClearColorHex()老是提示错误？-->
// renderer.setClearColorHex(0xEEEEEE);
renderer.setClearColor(0xAAFFCC);
<!--渲染尺寸-->
renderer.setSize(window.innerWidth,window.innerHeight);
<!--添加一个辅助坐标轴-->
var axes = new THREE.AxisHelper(20);
scene.add(axes);
<!--构建一个平面，物体将会放置在这个平面上-->
<!--平面尺寸，100x60，宽度方向平分几分，高度方向平分几分，如果参数最后2位不是（1,1），平面会显示为网格平面-->
var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
<!--平面材质,仅仅指定颜色 0xcccccc-->
var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});
<!--有尺寸和材质构建一个平面-->
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
<!--把平面选择-90°，方便观察-->
plane.rotation.x = -0.5*Math.PI;
<!--指定平面的位置-->
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
<!--把平面加入到场景中-->
scene.add(plane);
<!--建立物体，一个立方体，一个球体-->
<!--建立一个立方体-->
<!--指定立方体的几何尺寸，长宽高，不包括位置-->
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
<!--指定立方体的材质，仅仅指定颜色：0xFF0000，是否使用线框模式显示：是-->
var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
<!--以给定的几何尺寸和材质构建一个立方体-->
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
<!--指定立方体的具体位置xyz-->
cube.position.x =-4;
cube.position.y =3;
cube.position.z = 0;
<!--把建立的立方体放入场景-->
scene.add(cube);
<!--建立一个球体sphere-->
<!--指定球体的几何尺寸，不包括位置；最后2个参数感觉是指定网格密度-->
var sphereGeometry = new THREE.SphereGeometry(4,50,50);
<!--指定球体材质，仅仅指定颜色：0xFF0000，是否以线框形式显示：是-->
var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
<!--以给定的几何尺寸和材质，建立一个球体-->
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
<!--指定球体的位置 X Y Z-->
sphere.position.x =20;
sphere.position.y=4;
sphere.position.z = 0;
<!--把建立的球体加入到场景中-->
scene.add(sphere);
<!--指定相机的位置和方向，决定我们在场景中如何看，能看到什么-->
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
<!--利用JQuery查找到ID为WebGL-output的DIV，并把渲染到的东西输出到该DIV-->
$("#WebGL-output").append(renderer.domElement);
<!--利用渲染器以给定的相机去渲染场景-->
renderer.render(scene,camera);
}) ;
</script>
</body>
</html>运行效果如下：
以上内容希望对各位的学习有所帮助，欢迎大家继续支持本站。