three的基本组件

threejs 下载链接:https://www.npmjs.com/package/three

一、场景

3d物体需要一个发挥的空间,场景即为发挥的舞台

thres.js中通过 THREE.Scene() 来创建一个场景

二、相机

拍摄场景,记录场景中的表现

主要分为两类

1.透视相机

符合人们的视觉习惯,具有近大远小的特性

THREE.PerspectiveCamera = function(fov,aspect,near,far)

fov: 视角参数,即图1中的Θ,表示两平面之间的夹角,夹角越小,看到的场景越少。

aspect: 纵横比,图1中视角所看到的场景横截面的宽度与高度之比,比率越大,则看到的场景越宽。

near: 图1中的近平面的距离

far:图1中的远平面的距离


图1(图片来自网络)

2.正投影相机

近处与远处一样大

THREE.OrthographicCamera = function(left,right,top,bottom,near,far)

以相机中心点出发,参数分别对应6个面的偏移量,即相对中心点的距离


图片来自网络

三、渲染器

将场景通过计算描绘在屏幕上

THREE.WebGLRenderer()

四、几何体

存在于场景中的对象

github示例


示例


呈现效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文主要是讲解 Three.js 的相关概念,帮助大家对 Three.js 以及相关知识形成比较完整的理解。今年来...
    Simon王小白阅读 12,710评论 2 9
  • 组成Three.js场景的基本组件 《创建场景》 场景中的基本组件:相机、光源和几何体 THREE.Scene()...
    养薛定谔的猫阅读 5,443评论 1 8
  • 由于对WebGL的兴趣,初步接触Three.js,决定将学习过程进行记录,以便于后期复习。 初步以实现3D机房为目...
    Mr_ZhaiDK阅读 7,863评论 0 2
  • 一粒埋进土壤的种子,如若不思进取、贪图享乐就只能永远沉寂在泥土中,直至发霉、腐烂、灭亡。如若种子努努劲儿...
    灵宝0837李和平阅读 3,813评论 0 2
  • 根据二十四节气,今天是小满,是夏季的第二个节气,其含义很简单,正如其名,望可而生义。夏熟作物籽粒开...
    甜甜的粽子兄阅读 3,056评论 4 1

友情链接更多精彩内容