three.js入门实例教程

最近公司需要用tree.js实现一个3D图的显示，就看了官方文档，正好有时间，就记录下来。

由于我们公司的前端框架用的是angular，所以我就把我的treejs封装在一个directives里面。后面放源码

首先我们要知道three.js的下载地址它的地址是： https://github.com/mrdoob/three.js。

其次，什么是three.js？

three.js的几个步骤：

1：引入three.js文件（打开调试窗口，并在Console下输入 THREE.REVISION命令，得到版本号，成功）

2：设置一个场景// var scene = new THREE. Scene();

3： var camera = new THREE. PerspectiveCamera( 75, window.innerWidth /window.innerHeight, 0.1, 1000)；设置一个 透视相机
4： var renderer = new THREE. WebGLRenderer(); renderer. setSize(window.innerWidth, window.innerHeight); 设置一个渲染器

5：把一个物体添加到场景中

modelUrl是所添加文件例如：$scope. DView = cy3DView. newCanvas ; $scope. DView. config( 'canvas')

6：渲染

ok 是不是很简单，个人认为是这样，没有看懂的小伙伴可以私信我哦

源码如下：

相关推荐：

Three.js基础入门学习教程

three.js创建场景实例详解

three.js如何本地运行详解

以上就是three.js 入门实例教程的详细内容，更多请关注Gxl网其它相关文章！