一、 前言

Three.js 是一款 webGL（3D绘图标准，在此不赘述）引擎，可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ，为我们提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染。（官网：https://threejs.org/）

二、 为什么要选择Three.js？

Three.js 作为原生 web3D 引擎，对插件式 web3D 引擎的优势不言而喻：不需要安装插件、在移动端支持好。

Three.js 与其他原生 web3D 引擎对比：

• Babylon.js：一个强大的 3D 游戏引擎，由 Microsoft 的员工 David Cathue 主导开发。和 Three.js 相比，three.js 更倾向于动画，而 Babylon.js 则更适合游戏开发。
• PhiloGL：增加了额外的功能帮助你可以使用本地的 WebGL ，这个 WebGL 的接口不是百分之百的被封装好了的，这使得 PhiloGL 上手难度较高。
• SceneJS：一个开源的 JavaScript 3D 引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。
• CopperLicht：一个“商业级别的 WebGL 3D 引擎和编辑器”，你可以免费使用，但是要想获得未压缩的完整版带支持文档的源码和其他服务，则需要购买授权。
  

相对这些 web3D 引擎，Three.js 的还有以下几点优势：

• 开发和维护比较活跃；
• 文档齐全，案例丰富，易于学习；
• 设计灵活、方便拓展以及增加新的特性；
  

我们可以根据自己的需要去选择web3D引擎。

三、 开始Three.js

1、 引导

在开始我们的第一个 3D 程序之前，我们需要了解 Three.js 的一些基础，以下是 Three.js 制作 3D 的五要素：

1、渲染器（render）

我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。

2、场景（scene）

相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。

3、照相机（camera）

相当于眼睛，我们想要看到物体，就需要眼睛去看。

4、光源（light）

物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。

5、物体（object）

我们想要表现的内容，会有形状和材质属性。

了解了五要素之后，就可以开始写我们的代码了。

2、 创建渲染器

首先，我们创建一个渲染器。创建渲染器有两种方式：

a. 在 html 上写出 canvas 元素

<canvas id="mainCanvas" width="600px" height="450px" ></canvas>
然后创建渲染器时绑定此元素
var renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(“#000”); // 设置渲染器背景为黑色

b. html 上不创建 canvas 元素，而是使用普通的元素作为容器

<div id="mainCanvas" style="width:600px;height:450px;" ></div>
然后创建渲染器，放入容器中
var canvasContainer = document.getElementById('mainCanvas');
var width = canvasContainer.clientWidth; //获取画布的宽
var height = canvasContainer.clientHeight; //获取画布的高
var renderer = new THREE.WebGLRenderer({
 antialias: true //抗锯齿开
});
renderer.setSize(width, height); //设置渲染器的宽和高
renderer.setClearColor(0x000000); //设置渲染器的背景颜色为黑色
var canvas = renderer.domElement; //获取渲染器的画布元素
canvasContainer.appendChild(canvas); //将画布写入html元素中

这样，我们的渲染器就创建成功了。创建渲染器时，还可以设置多个属性，比如抗锯齿、透明度等等，详见 three.js 官方文档。

3、 创建场景

渲染器创建之后，我们再创建场景，准备将我们需要绘制的东西放入场景。

var scene = new THREE.Scene();

4、 创建照相机

照相机常用的有两种，一种叫正投影相机：

THREE.OrthographicCamera( left, right, top, bottom, near, far )；

下图为该照相机的视野：

一种叫做透视照相机：

THREE.PerspectiveCamera( fov, aspect, near, far ) ;

下图为该照相机的视野：

下图为两个照相机展示效果的对比：

**左边为正投照相机，远近大小都一样；右边为透视照相机，远小近大，更接近于人眼观察物体的感觉。**

在此以正投照相举例：

var camera = new THREE.OrthographicCamera(-6, 6, 4.5, -4.5, 0, 50); //创建照相机
camera.position.set(35, 15, 25); //设置照相机的位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置照相机面向(0,0,0)坐标观察

照相机默认坐标为(0,0,0);

默认面向为沿z轴向里观察;

5、 创建光源

常用光源有：

1、平行光(DirectionalLight)，效果类似太阳光

DirectionalLight ( color, intensity )

color — 光源颜色的RBG数值。

intensity — 光强的数值。

2、点光源(PointLight)，效果类似灯泡

PointLight ( color, intensity, distance, decay )

color — 光源颜色的RBG数值。

intensity — 光强的数值。

distance -- 光强为0处到光源的距离，0表示无穷大。

decay -- 沿着光照距离的衰退量。

3、聚光光源(SpotLight)，效果类似聚光灯

SpotLight ( color, intensity, distance, angle, penumbra, decay )

color — 光源颜色的RBG数值。

intensity — 光强的数值。

distance -- 光强为0处到光源的距离，0表示无穷大。

angle -- 光线散射角度，最大为Math.PI/2。

penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。

decay -- 沿着光照距离的衰退量。

在此以点光源举例：

var light = new THREE.PointLight(0xffffff, 1, 100); //创建光源
light.position.set(12, 15, 10); //设置光源的位置
scene.add(light); //在场景中添加光源

6、 创建物体

制作物体的方法是 Mesh：

new THREE.Mesh(Geometry, Material);

Geometry 为物体的形状，Material 为物体的材质；

1、形状(Geometry)

three.js 给出了很多方法去生成固定的形状，比如长方体(BoxGeometry)、球体(SphereGeometry)、圆形(CircleGeometry)等等。还有根据坐标去生成具体形状的方法，可以借助第三方建模软件建模之后引入，转换为坐标后再生成，就可以做比较复杂的形状了，比如人脸、汽车等等。

在此以长方体为例生成形状：

//设置正方体宽度，高度，深度分别为5,5,5
var geometry = new THREE.BoxGeometry (5, 5, 5);

2、材质(Material)

材质就像是物体的皮肤，决定物体外表的样子，例如物体的颜色，看起来是否光滑，是否有贴图等等。

常用材质有：

·网格基础材质(MeshBasicMaterial)

该材质不受光照的影响，不需要光源即可显示出来，设置颜色后，各个面都是同一个颜色。

·网格法向材质(MeshNormalMaterial)

该材质不受光照的影响，不需要光源即可显示出来，并且每个方向的面的颜色都不同，同但一个方向的面颜色是相同的，

该材质一般用于调试。

·网格朗博材质(MeshLambertMaterial)

该材质会受到光照的影响，没有光源时不会显示出来，用于创建表面暗淡，不光亮的物体。

·网格 Phong 材质(MeshPhongMaterial)

该材质会受到光照的影响，没有光源时不会显示出来，用于创建光亮的物体。

在此以网格 Phong 材质为例创建材质：

var material = new THREE.MeshPhongMaterial({
  color: "yellow" //设置颜色为yellow
});

创建形状和材质之后，就可以创建该物体了：

//创建物体
var cube = new THREE.Mesh(geometry, material);

7、 渲染画布

通过以上步骤，我们已经有了渲染器(renderer)、场景(scene)、照相机(camera)、光源(light)和物体(cube)，此时我们需要将光源和物体加入场景中：

scene.add(light);
scene.add(cube);

然后再使用渲染器将场景和照相机渲染出来：

renderer.render(scene, camera);

效果如下图：

四、 结束语

在以上内容中，只写到了 Three.js 中提供的基础功能，还有很多高级的功能需要大家去探索。希望大家看完这篇文章后能对 Three.js 有一个初步的了解，并能够使用 Three.js 绘制出基础的 3D 图形。

大家可以去 Three.js 官网的 examples 中看看，这里面都是一些很优秀和典型的 examples，并且还有代码可以下载，大家可以去研究探索一番。

在此附上几个精彩的例子供大家欣赏：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# three.js  # 3d图片绘制  # 自定义图形  # 绘制地图  # Three.js实现简单3D房间布局  # three.js实现3D模型展示的示例代码  # 基于Three.js制作一个3D中国地图  # Three.js开发实现3D地图的实践过程总结  # three.js开发3d地图的实现示例  # Three.js 3D图形开发超详细实战指南  # 渲染器  # 在此  # 不需要  # 都是  # 就可以  # 不受  # 然后再  # 可以使用  # 为例  # 文档  # 这篇文章  # 有两种  # 官网  # 为该  # 自己的  # 几个  # 景中  # 会有  # 正投  # 好了 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 浅述节点的创建及常见功能的实现  如何在橙子建站中快速调整背景颜色？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  网站建设要注意的标准 促进网站用户好感度！  黑客如何通过漏洞一步步攻陷网站服务器？  如何用VPS主机快速搭建个人网站？  活动邀请函制作网站有哪些,活动邀请函文案？  iOS验证手机号的正则表达式  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  详解Oracle修改字段类型方法总结  php 三元运算符实例详细介绍  b2c电商网站制作流程,b2c水平综合的电商平台？  非常酷的网站设计制作软件,酷培ai教育官方网站？  微信小程序 canvas开发实例及注意事项  如何在七牛云存储上搭建网站并设置自定义域名？  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何在香港免费服务器上快速搭建网站？  ,交易猫的商品怎么发布到网站上去？  如何在云指建站中生成FTP站点？  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  JavaScript如何实现继承_有哪些常用方法  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  北京网站制作的公司有哪些,北京白云观官方网站？  Laravel PHP版本要求一览_Laravel各版本环境要求对照  如何利用DOS批处理实现定时关机操作详解  如何在阿里云ECS服务器部署织梦CMS网站？  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  如何在阿里云香港服务器快速搭建网站？  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  敲碗10年！Mac系列传将迎来「触控与联网」双革新  Laravel如何使用Collections进行数据处理？（实用方法示例）  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  5种Android数据存储方式汇总  EditPlus 正则表达式 实战(3)  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  如何在宝塔面板中创建新站点？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  清除minerd进程的简单方法  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）