three.js教程
文章平均质量分 70
kingder-c
这个作者很懒,什么都没留下…
展开
-
0.three.js介绍
前言前段时间开始接触three.js本来以为会很简单但是真正开始学习的时候才发现事情并不是我想象的那么容易,three.js的学习资料非常的少稍微好一点的资料就是收费的,给three.js的学习带来了很大的阻碍,所以从那时起我就萌生了想要写这个教程的想法,希望和大家一起学习共同进步,学习的资料和源码我都共享到我的gitHub仓库中去了,大家有兴趣的可以去下载,欢迎foke,clone,加星星,也算是原创 2017-08-17 12:00:46 · 327 阅读 · 0 评论 -
2.点线面
在Threejs中定义一个点在三维空间中的某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。在three.js中,点可以在右手坐标系中表示:空间几何中,点可以用一个向量来表示,在Three.js中也是用一个向量来表示的,代码如下所示:THREE.Vector3 = function ( x, y, z ) {this.x = x || 0;this.y = y || 0;thi原创 2017-08-17 12:48:23 · 437 阅读 · 0 评论 -
1.three.js世界的4个必备要素
一、三大组件在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)和渲染器(renderer)。有了这三样东西,才能将物体渲染到网页中去。记住关建语句:有了这三样东西,我们才能够使用相机将场景渲染到网页上去。创建这三要素的代码如下:var scene = new THREE.Scene(); // 场景var camera = new THREE.P原创 2017-08-17 12:43:17 · 1166 阅读 · 0 评论 -
3.点线面后篇
坐标系Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系。 WebGL中的点线面线条的深入理解在Threejs中,一条线由点,材质和颜色组成。点由THREE.Vector3表示,Threejs中没有提供单独画点的函数,它必须被放到一个THREE.Geometry形状中,这个结构中包含一个数组vertices,这个vertices就是存放无数的点(THREE.Vector原创 2017-08-17 12:59:15 · 460 阅读 · 0 评论 -
4.three.js中的坐标系
Three.js中的坐标系three.js中坐标系使用的是左手坐标系左手坐标系和右手坐标系的对比: 当然three.js中使用的是右手坐标系three.js中的旋转的定义但是three.js中的旋转是如何定义的呢? 在three.js中旋转使用的是弧度制,2π为一圈一定要注意可以用一个小部件来提示坐标var axisHelper=new axisHelper()//每个轴的长度scene.原创 2017-08-17 13:05:21 · 11026 阅读 · 2 评论 -
5.让场景动起来
运动起来的两种方式方式介绍让物体运动让摄像机运动游戏循环: 如果不进行游戏循环进行重复的渲染即使物体运动了,我们看到的场景也不会发生改变function animate(){ render(); requestAnimationFrame(animate);}stats.js可以用来监控three.js的运行状态使用方法:var stats = new Stats();s原创 2017-08-17 13:50:09 · 563 阅读 · 0 评论 -
6.把建模工具导出的模型导入到three.js中
1.使用Three.js渲染导出的DAE在Three.js中使用Collada(即.dae)文件的话,首先得要用到 ColladaLoader.js。但是这个ColladaLoader.js并不包含在three.js文件里面,需要你自己下载然后添加进来。这个文件中three.js的repo里面的examples/js/loaders/ColladaLoader.js如果你检出了three.js的源代原创 2017-09-18 15:57:15 · 3500 阅读 · 0 评论