THREEJS
邓闰土
我的简书 http://www.jianshu.com/u/f109f1576a46
展开
-
建筑模型
放个效果图,忙完了上教程原创 2017-05-08 09:53:53 · 387 阅读 · 0 评论 -
WEBGL 坐标系
就像任何其他的3D系统,在WebGL中Z轴表示深x,y和z轴。在WebGL的坐标被限制为(1,1,1)和(-1,-1,- 1)。它意味着- 如果你考虑该屏幕上投影的WebGL图形为立方体,则立方体的一个角将是(1,1,1)和相对的角为(-1,-1,-1)。 WebGL将不绘制显示任何超越这些界限。下图描述了WebGL的坐标系。 z轴表示深度。 z与正值表示该对象是在屏幕/观众近,而z的负值表示该对原创 2017-05-08 09:52:52 · 1046 阅读 · 0 评论 -
Three.js 核心 五步
1.设置three.js渲染器2.设置摄像机camera3.设置场景scene4.设置光源light5.设置物体objectcamera 为观察的视角scene 为观察的对象渲染器渲染时,需要渲染视角以及对象,才能将完整的webgl 展示出来。其中场景中包含两个重要的物体 对象 boject 以及灯光 mesh原创 2017-05-08 09:52:55 · 242 阅读 · 0 评论 -
新建一个 3Ddemo
var scene=new THREE.Scene(); // 创建一个场景var geomtry=new THREE.BoxGeometry(110,0.1,100);//创建一个物体模型 参数为 物体的 x y z 标量var materil=new THREE.MeshLambertMaterial({color:0xff0000});// 创建物体材质var mesh=new THRE原创 2017-05-08 09:52:58 · 982 阅读 · 0 评论 -
渲染器
上一节已经完成了一个初始的demo。Threejs 的渲染需要 用到HTML5的 canvas ,那么我们在使用threejs的时候可以自己创建一个canvas,也可以使用threejs自己生成的canvas,不过为了提高代码的可读性,建议在html页面中插入 canvas(自己建议)在 HTML 页面中插入canvas 元素 #maincanvas{ width;800px;原创 2017-05-08 09:53:00 · 674 阅读 · 0 评论 -
场景
场景是threejs中所有object 元素盛放的容器,场景并没有多余复杂的操作,只需要在每次使用threejs构建3D场景时初始化,之后将添加的对象灯管add进场景中。初始化的代码非常简单var scene = new THREE.Scene();或者构建个函数在 js代码的开始位置将所有的变量定义好var scene;构建函数function initscene(){ scene = new原创 2017-05-08 09:53:03 · 260 阅读 · 0 评论 -
相机
WHY相机threejs在呈现给我们一个可见的视图之前,需要建立一个场景,然后在场景中添加object,这个时候依然不能呈现给我们所想看到的。相机的作用就是,从一个视角,对当前的环境取景。然后在通过渲染器渲染到canvas中,便是我们在网页上所看到的。var camera=newTHREE.PerspectiveCamera(45,4/3,1,1000);camera.position.set(0原创 2017-05-08 09:53:06 · 244 阅读 · 0 评论 -
物体
到此我们已经创建了一个场景,并且使用camera进行取景,然后使用render 渲染,下一步开始在添加一些东西了。首先我们定义一个物体的简单属性var obje = { geometry: { x: 1000, y: 0.1, z: 700 }, position: { x: 0,y: -100,z: 0},style:原创 2017-05-08 09:53:09 · 192 阅读 · 0 评论 -
添加相机控制
前言:当前我们已经在场景中添加好了一个对象,并且渲染完成。之前说过我们所看到的都是相机取景得到的,那么改变相机的位置就可以,得到不同的效果了。代码ex: camera.position(x,y,z);每次改变相机位置后,再次渲染,便是我们常见的3d场景,但是我们不必要每次都超级麻烦的写一堆相机控制的代码THREEJS提供了常见的相机控制。第一步,引入相机控制的文件第二步 声明一个相机控制 并原创 2017-05-08 09:53:12 · 279 阅读 · 0 评论 -
创建平面
threejs里面所说的平面其实只是一个平面的长方形。代码:先定义一个平面的基本属性varplan= {geometry: {x:1000,y:700},position: {x:0,y: -180,z:0},rotation: {x: -Math.PI/2,y:0,z:0},style: {color:0xff0000}}使用代码实现平面func tioncreateplane(obj) {ge原创 2017-05-08 09:53:15 · 589 阅读 · 0 评论 -
创建一个圆和圆柱
首先等一圆以及圆柱的属性varcircle= {geometry: {x:400,y:24},position: {x: -100,y: -150,z:100},rotation: {x: -Math.PI/2,y:0,z:0},style: {color:0x00ff00}}varcylinder= {geometry: {x:200,y:200,z:50,open:false},positio原创 2017-05-08 09:53:20 · 651 阅读 · 0 评论 -
给女朋友绘制一个戒指
想到我还没女朋友就好桑心,这节讲下怎么绘制一个戒指(圆环)圆环有两个属性,第一个是圆环的尺寸,第二个圆环的粗细(有点表达不清了=-=,就是环的半径以及圆的半径)vartorus= {geometry: {x:200, // 环的半径y:20 // 圆的半径},position: {x: -100,y:80,z:100},rotation: {x:0,y:0,z:0},style: {color:原创 2017-05-08 09:53:23 · 400 阅读 · 0 评论 -
载入字体
字体 在3d 中也是 被定义成了形状。这些字体素材 threejs已经帮我做了一部分了,我们可以直接拿来用。首先定义要显示的字体。 包括要显示的 内容,字体样式,以及在3d空间中的位置代码实现首先找到 字体文件这里使用fontload() 导入了字体文件,回调函数中返回的值为导入的字体 font新建字体模型时,设置字体为导入的字体,同时还要指定字体的大小 也就是size,还有字体的原创 2017-05-08 09:53:26 · 284 阅读 · 0 评论 -
天空盒
。先把代码放上来var path="img/skybox/";var format='.jpg';var urls= [path+'px'+format,path+'nx'+format,path+'py'+format,path+'ny'+format,path+'pz'+format,path+'nz'+format];varreflectionCube=newTHREE.CubeTextur原创 2017-05-08 09:53:50 · 275 阅读 · 0 评论 -
three.js是什么
webgl是HTML5中提出的新技术,是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起 webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,封装了一些3D渲染需求中重要的工具方法与渲染循环,由于其易用性被广泛应用。 three.js之于webgl,类似于windows版本的虚幻引擎之于D3D。当然,原创 2017-05-08 09:52:50 · 491 阅读 · 0 评论