Three.js
文章平均质量分 80
my_mystery
这个作者很懒,什么都没留下…
展开
-
three.js学习笔记 基础1_1
1. 一个three.js程序要包括 renderer(渲染器)、scene(场景) 和camera(相机)。原创 2016-01-06 09:45:56 · 748 阅读 · 0 评论 -
three.js学习笔记 为模型增添物理效果
前一篇介绍了物理引擎Physijs,场景中的对象只需要用特定的Physijs对象封装一下便可以在场景中展现物理效果(重力、碰撞检测等)。但Physijs并没有为模型的加载提供一种特定的方法。所以由3Dmax或是Blender等建模软件创建的模型通过传统方式加载到场景中并没有物理效果。为了使模型具有物理效果这里我使用了一种方法(才疏学浅,仅供参考)。这里使用的是r71的加载方式,最新的有所不原创 2016-06-29 12:53:55 · 9057 阅读 · 2 评论 -
three.js学习笔记 Physijs物理引擎
Three.js可以通过使用Physijs库向场景中加入物理效果。这个库是基于著名的物理引擎ammo.js。Physiji1.导入库文件 Physijs.scripts.worker = 'js/Physijs/physijs_worker.js'; Physijs.scripts.ammo = 'js/Physijs/amm原创 2016-06-29 11:12:49 · 10972 阅读 · 4 评论 -
three.js学习笔记 dat.gui.js和stats.js
three.js创建的3D场景中常用到的插件包括dat.gui.js和stats.js。 dat.gui.js用于创建菜单栏,可以用来控制场景中的各个参数来调试场景。 stats.js用于对JavaScript进行性能检测。原创 2016-06-29 10:41:18 · 8762 阅读 · 0 评论 -
three.js学习笔记 射线
Three.js提供一个射线类Raycasting来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。原创 2016-04-06 15:09:38 · 16052 阅读 · 13 评论 -
three.js学习笔记 obj模型加载问题
three.js最新版本'75'相较以前使用的'71'版本obj模型加载的方法发生了变化。 移除了OBJMTLLoader.js,并将原来OBJLoader.js和MTLLoader.js加载方法loader.setCrossOrigin更改为loader.setPath。原创 2016-04-06 13:52:39 · 15310 阅读 · 5 评论 -
three.js学习笔记 相机控件
Three.js 提供了几个camera(相机)的控件,你可以通过使用控件来控制相机的移动。当然你也可以通过调用camera(相机)的position属性来控制。 camera(相机)控件包括:轨迹球控件TrackballControls(最常用的控件,用鼠标控制相机移动和转动) 飞行控件F原创 2016-01-10 13:19:39 · 4533 阅读 · 0 评论 -
three.js学习笔记 用Tween.js做动画
Tween.js 可以定义某个属性在两个值之间过渡。我们可以通过Tween.js控制我们的camera(相机)进行漫游或是控制物体或是粒子进行补间动画的操作。 添加补间动画 1.定义要控制的属性var option = { px: camera.position.x, pz: camera.position.z};我们这里控制camera(相机)的x,z轴原创 2016-01-06 19:44:47 · 7279 阅读 · 0 评论 -
three.js学习笔记 太阳眩光
当你朝着太阳光方向拍照就会看到镜头的眩光,为了使场景更加真实我们可以给3D场景添加太阳眩光。 这里我们简单地制作了一个太阳眩光并将它添加到场景中。 添加太阳眩光: 1.renderer需要开启alpha模式renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true原创 2016-01-06 16:23:32 · 4683 阅读 · 0 评论 -
three.js学习笔记 光和影
three.js里面灯光主要有四种1.AmbientLight(影响整个场景的光源)AmbientLight的光线没有特定的来源,所以不需要指定位置信息。也不会对阴影的生成产生影响。2.PointLight(照射所有方向的光源)PointLight一般不用来产生阴影,PointLight的光线来自四面八方产生阴影会为GPU带来沉重负担。3.SpotLig原创 2016-01-06 15:18:13 · 3625 阅读 · 0 评论 -
three.js学习笔记 基础1_2
2.创建一个three.js场景 three.js var renderer, scene, camera, light; function init() { renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearCo原创 2016-01-06 13:10:19 · 632 阅读 · 0 评论 -
three.js学习笔记 基于物理引擎的第一人称控件
Three.js提供的第一人称控件控制的对象是相机,在物理场景中并不能模拟真实的人物碰撞、移动和跳跃。所以想要实现真实的物理效果还需要自己制作控件(FPControl)。FPControl1.在物理场景中创建一个“人” var fp_mesh = new Physijs.BoxMesh(new THREE.CubeGeometry(4, 10, 4), Physijs.crea原创 2016-06-29 17:31:01 · 5082 阅读 · 2 评论