3。js是一款WebGL框架,WebGL可以让我们在画布上实现3 d效果。实现3 d效果在国内来说还算是比较新的东西,可供查阅的资料也不多。这篇文章仅是一个入门篇,介绍如何绘制一个3 d正方体。
<强> Three.js中的基本概念强>
3。js包含3个基本概念:场景(场景),相机(相机)和渲染器(渲染)。
场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中),
也就是我们通过相机拍摄场景然后绘制到目标介质中去。
<>强创建场景,相机和渲染器强>
var=new THREE.Scene场景(); var相机=new三人。PerspectiveCamera(75年,窗口。innerWidth/窗口。innerHeight, 0.1, 1000); var渲染器=new THREE.WebGLRenderer (); 渲染器。(setSize窗口。innerWidth,窗口。innerHeight); document.body。列表末尾(渲染器。domElement);>之前上述代码首先创建一个场景,然后创建一个PerspectiveCamera(立体感的相机),接着创建了一个WebGL的渲染器(注意三。js也支持非3 d的画布2 d的渲染器),然后挂靠为HTML文档身体的DOM子元素。
这就是实现的效果图,还是挺有立体感的吧?
写代码前,要先下载最新的three.js框架包,引入自己的页面。
<强>准备一个帆布画布强>
这个画布是我们展现整个3 d正方形的画布,也就是上图那个黑色的方框。
& lt; !DOCTYPE html> & lt; html lang=癳n”比; & lt; head> & lt;元charset=皍tf - 8”比; & lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比; & lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比; & lt; title>相机相机& lt;/title> & lt; style> #帆布{ 宽度:400 px; 身高:300 px; 边界:1 px固体红; 保证金:50 px汽车; 显示:块; } & lt;/style> & lt;/head> & lt; body> & lt;帆布id=盎肌弊4? lt;/canvas> & lt;脚本src=" https://www.yisu.com/zixun/libs/three.min.js "祝辞& lt;/script> & lt;/body> & lt;/html><强>明确绘制思路
强>接下来的绘制过程会涉及到多个概念:画布,场景,相机,渲染器。
为了能更好理解绘制过程的代码和有助于记忆,我们先来理解这几个概念:
假设我们现在正在旅游的途中,看到了一个很唯美的画面,想把这个3 d世界记录下来
-
<李>这个唯美的场景就是场景,我们用相机相机拍摄下来形成照片李>
<李>为了能看清楚这个照片,我们把这个照片放置在一个画布画布上李>
<李>最后,我们再用渲染器修饰渲染一下李>
这样,我们就能成功展现这个3 d世界了。
【程序还是很贴近生活哒& # 128522;】
通过现实世界的理解,我们接下来开始代码啦o( ̄▽ ̄)ブ
准备好画布,场景,相机,渲染器,给一个初始化的方法
& lt; script> var相机,场景,渲染器,帆布; init (); init()函数{ 帆布=. getelementbyid(“画布”); }
接下来我们要做的就是完善这个init()方法啦。
<>强创建一个3 d场景场景强>
场景最简单了,只需要用现场声明一个场景对象。
现?new THREE.Scene ();
<强>准备好相机强>
我们这里设置的相机是一个透视的相机PerspectiveCamera
<强>相机有四个参数强>
-
<李>第一个参数是视线辐射的角度,这个参数越大,我们能看到的视觉越广,这个物体看上去会更小。李>
<李>第二个参数是图像内容展示的比例:宽度/高度。我们一般把这个比例设置为和画布的比例一样,这样看到的图片才不会变形。李>
<李>第三四个参数分别是相机离展示内容(正方体)最近的距离和最远的距离。
李>
相机=new三人。PerspectiveCamera (45, 400/300 1 10);利用three.js画一个三维立体的正方体示例代码