three.js入门——画一个3D正方体

taowen 发布于2019-08-21 17:40 / 3238人阅读

摘要：具体实现过程准备一个画布这个画布是我们展现整个正方形的画布，也就是上图那个黑色的方框。第三四个参数分别是相机离展示内容正方体最近的距离和最远的距离。这个时候画布的大小正好是正方体的倍。

three.js 是一款WebGL框架，WebGL可以让我们在canvas上实现3D效果。
实现3D效果在国内来说还算是比较新的东西，可供查阅的资料也不多。
这篇文章仅是一个入门篇，介绍如何绘制一个3D正方体。

介绍完毕，首先奉上实现的效果图：

这就是实现的效果图，还是挺有立体感的吧？

绘制前的准备

写代码前，要先下载最新的three.js框架包，引入自己的页面。

具体实现过程 准备一个canvas画布

这个画布是我们展现整个3D正方形的画布，也就是上图那个黑色的方框。




  
  
  
  Camera 相机

明确绘制思路

接下来的绘制过程会涉及到多个概念：canvas、scene、camera、renderer。
为了能更好理解绘制过程的代码和有助于记忆，我们先来理解这几个概念：

假设我们现在正在旅游的途中，看到了一个很唯美的画面，想把这个3D世界记录下来

这个唯美的场景就是scene，我们用相机camera拍摄下来形成照片

为了能看清楚这个照片，我们把这个照片放置在一个画布canvas上

最后，我们再用renderer修饰渲染一下

这样，我们就能成功展现这个3D世界了。
【程序还是很贴近生活哒?】
通过现实世界的理解，我们接下来开始代码啦o(￣▽￣)ブ

准备好canvas、scene、camera、renderer，给一个初始化的方法

以下是本例完整代码：




  
  
  
  Camera 相机

云服务器 GPU云服务器 java3d正方体 js鼠标拖动3D立方体旋转 three.js three.js极客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89842.html

three.js入门——画一个3D正方体

摘要：具体实现过程准备一个画布这个画布是我们展现整个正方形的画布，也就是上图那个黑色的方框。第三四个参数分别是相机离展示内容正方体最近的距离和最远的距离。这个时候画布的大小正好是正方体的倍。 three.js 是一款WebGL框架，WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西，可供查阅的资料也不多。这篇文章仅是一个入门篇，介绍如何绘制一个3D正方...

fredshare 2019-08-01 18:02 评论0 收藏0
three.js 入门详解(一)

摘要：一般说来，对于制图建模软通常使正交投影，这样不会因为投影而改变物体比例而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在浏览器中实现三维效果的一套规范想要使用...

Jacendfeng 2019-08-21 17:51 评论0 收藏0
threejs构建web三维视图入门教程

摘要：本文是一篇简单的构建三维视图的入门教程，你可以了解到利用创建简单的三维图形，并且控制图形运动。然后将其加入到中。三创建对象大多数时候，我们需要讲绘制的图形整合到一起进行控制。在轴上运动的完整代码这个入门教程就到这里了，感谢阅读。本文是一篇简单的webGL+threejs构建web三维视图的入门教程，你可以了解到利用threejs创建简单的三维图形，并且控制图形运动。若有不足，欢迎指出...

Profeel 2019-08-21 10:43 评论0 收藏0