简介

Three.js是一个WebGL框架，让我们可以在画布上实现3D效果。3D效果的实现在国内比较新，可供参考的资料不多。本文只是一篇入门文章，介绍了如何绘制一个3D立方体。

三. js中的基本概念

包含三个基本概念：场景、相机和渲染器。

场景是要绘制的对象，摄像机代表视角，渲染器是绘制载体(可以附着在浏览器的DOM元素上)，

也就是说，我们通过相机拍摄场景，然后将其绘制到目标介质中。

创建场景、相机和渲染器

var场景=新三。场景()；var camera=new THREE。透视摄像机(75，window . inner width/window . inner height，0.1，1000)；var渲染器=new THREE。WebGLRenderer()；renderer . setsize(window . inner width，window . inner height)；document . body . appendchild(renderer . dome element)；上面的代码首先创建一个场景，然后创建一个PerspectiveCamera，然后创建一个WebGL的渲染器(注意，Three.js也支持非3D Canvas 2D的渲染器)，然后调用它作为HTML文档体的DOM子元素。

介绍完毕后，首先呈现实现的效果图：

这是效果图的实现，是不是挺有立体感的？

绘制前的准备工作

在编写代码之前，您应该下载最新的three.js框架包，并介绍自己的页面。

具体实施过程

准备一块帆布

这个画布就是我们展示整个3D方块的画布，也就是上面的黑框。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Original-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title camera/title style # canvas { width : 400 px；height: 300pxborder: 1px纯红；margin: 50px自动；显示：块；}/style/head body canvas id=' canvas '/canvas script src=' http :/libs/three . min . js '/script/body/html清晰地画出想法

下面的绘制过程会涉及到很多概念：画布、场景、相机和渲染器。

为了更好地理解绘图过程的代码并帮助记忆，让我们首先了解这些概念：

假设我们现在正在旅行，看到一幅美丽的图片，想记录下这个3D世界

这个美丽的场景就是场景。我们用照相机拍照。为了看清楚这幅画，我们把这幅画放在画布上。最后，我们用渲染器对它进行装饰和渲染，这样我们就可以成功地展示这个3D世界。

【节目还是很贴近生活的】

通过对现实世界的了解，我们将开始编码o(~~)

准备画布、场景、相机和渲染器，并给出初始化方法

scriptvar相机、场景、渲染器、画布；init()；function init(){ canvas=document . getelementbyid(' canvas ')；}接下来我们需要做的就是完善这个init()方法。

创建三维场景场景

场景是最简单的，只需要用场景声明一个场景对象。

场景=新三。场景()；准备好，摄像机

我们在这里设置的摄像机是透视摄像机

相机有四个参数

第一个参数是视线辐射的角度。这个参数越大，我们能看到的视野就越广，物体看起来就越小。第二个参数是图像内容的显示比例：宽/高。我们通常将这个比例设置为与画布的比例相同，这样我们看到的图片就不会失真。第三和第四个参数是摄像机和显示内容(立方体)之间的最近距离和最远距离。相机=新的三。透视摄像机(45，400/300，1，10)；接下来，设置摄像机的放置位置，并将摄像机放置在场景场景中

因为我们的世界是3D的，所以摄像头的放置位置也是3D的，涉及到三个参数：X轴、Y轴、Z轴。(0，0，0)是相机的原点，(1，1，5)是将我们的相机向右上方移动一个单位，向后移动五个单位。

ps:这个时候画布帆布的大小正好是正方体的5倍。

camera.position.set(1，1，5)；scene.add(摄像机);在场景中添加一个立方体

每个形状都是一个网格，几何可以理解为物体的骨骼材料可以理解为物体的皮囊

再创建一个可填充的形状立方

这样就构成了完整的实物

我们再将这个形状放入场景事件中

立方体几何参数设置为1:1:1表示这是一个正方体，当然可以自行修改比例，变成不一样的立方体

变化几何=新三。立方几何(1,1,1);//添加三自带的最简单的一种材质可变材料=新的三.MeshBasicMaterial({ color:0x ff 0000 })；var cube=new THREE .网格（几何、材料);var cube=new THREE .网格（几何、材料);最后，创建渲染器对图像进行渲染

将帆布交给渲染器，也就是一个渲染的容器

抗混叠：真平滑，抗锯齿，输出的画面会进行优化，不会带毛边

渲染器=新的三.WebGLRenderer({ canvas : canvas，anti IAS : true })；//设置渲染器的样式renderer.setSize(canvas.width，canvas。高度)；renderer.render(场景、摄像机);经过以上步骤，我们的的正方体就成功创建好了。

以下是本例完整代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title camera相机/title style # canvas { width : 400 px；高： 300pxborder: 1px纯红；余量： 50px自动；显示：块；}/style/head body canvas id=' canvas '/canvas script src=' http :/libs/三。量滴js '/脚本脚本var摄像机、场景、渲染器、画布；init()；函数init(){ canvas=document。getelementbyid(' canvas ')；场景=新三。场景();相机=新的三。透视摄像机(45,400/300,1,10);camera.position.set(1，1，5)；scene.add(摄像机);变化几何=新三。立方几何(1,1,1);可变材料=新的三.MeshBasicMaterial({ color:0x ff 0000 })；//多维数据集是一个可以填充的形状var cube=new THREE .网格（几何、材料);scene.add(立方体);渲染器=新的三.WebGLRenderer({ //将帆布交给渲染器一个渲染的容器canvas:画布，//平滑，抗锯齿输出的画面会进行优化，不会带毛边抗混叠： true })；//设置渲染器的样子renderer.setSize(canvas.width，canvas。高度)；renderer.render(场景、摄像机);}/脚本/正文/html总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。