利用three.js画一个三维立体的正方体示例代码

  

  

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子元素。

  

  

利用三个。js画一个三维立体的正方体示例代码
  这就是实现的效果图,还是挺有立体感的吧?

  


  

  

写代码前,要先下载最新的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画一个三维立体的正方体示例代码