three.js笔记——（1）入门

ephererid 发布于2019-08-20 14:36 / 1545人阅读

摘要：入门这部分内容的目标是简单地介绍，我们首先讲如何用来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。透视投影照相机的构造函数是，其中是可视角度为，通常是容器的宽高比是近断距离，是远端距离。

入门

这部分内容的目标是简单地介绍three.js，我们首先讲如何用three.js来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。

在html文件中引入three.js文件

在使用three.js之前，首先需要在你的html文件中将它包含进来，如下面代码段所示：



    
        
        My first three.js app

然后在空的

正交投影照相机的构造函数为OrthographicCamera(left, right, top, bottom, near, far)包含了六个参数，left就是整个投影线区域的左侧面，right就是投影线区域的右侧面，top就是投影线区域的上侧面，而bottom就是投影线区域的下侧面。 near是到距离相机较近的那一面的距离，far是离距离相机较远的那一面的距离，这六个投影面围成的区域就是相机投影的可见区域。在三维空间中，只有这个区域中的物体才能被照相机所观测到。

透视投影照相机（PerspectiveCamera）

透视投影照相机中投影是线是以照相机为汇聚点发散的，投影线和投影面不垂直，物体投影之后的比例会发生变化，我们会观察到物体的透视效果，如下图所示。

透视投影照相机的构造函数是PerspectiveCamera(fov, aspect, near, far) ，其中fov是可视角度；aspect为width/height，通常是容器（canvas）的宽高比；near是近断距离，far是远端距离。只有在距离照相机大于near的距离小于far的距离之内才可以被照相机观察到。

关于更多照相机的知识我们会在之后的文章中进行介绍。

渲染器

定义：渲染器的功能是将我们创建的场景和照相机所观察到的三维物体在二维平面上的投影进行渲染展现到浏览器中。
创建：var renderer = new THREE.WebGLRenderer();
渲染：renderer.render(scene, camera) 在进行渲染的时候需要将之前创建的场景和照相机都传入渲染函数中。

关于更多渲染器的知识我们将会在之后的文章中进行介绍。

栗子

有了场景、照相机和渲染器三个要素之后，我们就可以在浏览器中展现出复杂的三维物体了，首先来看一个简单的栗子～



    
        
        My first three.js app
    
    
        //创建一个canvas标签用来作为展现三维图形的容器
        
        
        //引入three.js文件

快打开浏览器看看，是不是看到那个旋转的正方体了～
项目github地址：旋转的正方体

参考文献：
1.creating a scene
2.three.js 照相机

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

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

SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
WebGL three.js学习笔记创建three.js代码的基本框架

摘要：学习学习笔记介绍是一种绘图协议，它把和结合在一起，通过增加的一个绑定，可以为提供硬件加速渲染。环境搭建为了以后的学习方便，首先是搭建一个万能框架，所有的开发都可以在此框架上进行。 WebGL学习----Three.js学习笔记（1） webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个Ja...

mtunique 2019-08-23 17:06 评论0 收藏0
【three.js学习笔记】几何体

摘要：构造函数分别是长宽高是对应长宽高的分段，在使用线模式进行渲染的时候，可以看到效果如下。长宽高分别被截为段，段，段。球体构造函数球体半径水平方向和垂直方向上分段数。最小值为，默认值为。构造函数形状数组可选的参数对象，可配置参数。 Geometry api Geometry var geometry = new THREE.Geometry(); 立方体（BoxGeometry）老版本...

dendoink 2019-08-22 16:04 评论0 收藏0
【three.js学习笔记】相机

摘要：而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。相机视椎体右面。相机API 照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用照相机这样一个类比，可以使我们直观地理解这一投影方式。而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。正交投影照相机 showIm...

KnewOne 2019-08-22 16:04 评论0 收藏0