three.js 入门第一天 |
您所在的位置:网站首页 › threejs项目 › three.js 入门第一天 |
一.three.js和webGL 引用官方的说法: three.js是使用WebGL来绘制三维效果的,three.js封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,让你不必要再从底层WebGL开始写起。 所以学习three.js并不需要专门去学习webGL,当然有基础肯定是有帮助的。 二.官网说明 1.打开官网看到下图,右边是一些3d样例,对初学没什么用。 three.js官网左边r130代表的版本号,这边建议大家去看的是文档说明(documentation)和resources的第一个学习资源(Three.js Fundamentals),他们都有对应的中文翻译,讲的比较基础适合入门。 官网左边菜单简单介绍三.three.js版本选择 1) three.js版本更新的很快,今天你下载了一个新版本,明天可能又更新了。很多旧版的方法在新版中被删除,一些方法的引用文件也有所改变,在网上搜索到的很多教程都是r6-r9版本,方法的使用看起来也是各异,学习起来挺混乱的。这里我使用r130版本(编写这边文章时候的最新版本)。各版本官方下载地址:https://github.com/mrdoob/three.js/tags 。 2) 下载完之后解压得到three.js-master文件夹。这边将build里面的three.js拿出来,在自己项目做练习,examples里面有各种样例的代码包括了素材和对应的js依赖,之后可以拿来做练习(毕竟3d素材自己不好弄)。 three.js-master文件四.开发工具 我使用的vscode ,安装live Server插件,可以跑本地服务,解决了图片等素材引用的跨域问题,当然你也可以直接使用官方的脚手架来练习。官方脚手架需要node环境,如果不了解的建议使用vscode。 五.第一个3d程序 这里我使用官网上的例子。先上全代码,附注释。可以运行下看效果。 1.创建了一个场景,也就是3d模型等展示的舞台 2.创建一个相机,他拍到的地方就是我们看到的内容,这里创建的是透视相PerspectiveCamera。 第一个参数:是角度表示看到的范围, 第二个参数:长宽比,作用是展示的物体可以正常比例显示 三四参数表示:近截面(near)和远截面(far),当物体某些部分比摄像机的远截面远或者比近截面近的时候,该这些部分将不会被渲染到场景中 来自官网图3.创建一个渲染器,将场景和相机放入,渲染画面,设置渲染范围,并添加到页面中 4.创建简单的3d模型 5.渲染 6.效果图 最终效果 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |