- 博客(12)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 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
5146
原创 three.js学习笔记 为模型增添物理效果
前一篇介绍了物理引擎Physijs，场景中的对象只需要用特定的Physijs对象封装一下便可以在场景中展现物理效果(重力、碰撞检测等)。但Physijs并没有为模型的加载提供一种特定的方法。所以由3Dmax或是Blender等建模软件创建的模型通过传统方式加载到场景中并没有物理效果。为了使模型具有物理效果这里我使用了一种方法(才疏学浅，仅供参考)。这里使用的是r71的加载方式，最新的有所不
2016-06-29 12:53:55
9167
1
原创 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
11048
原创 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
9281
原创 three.js学习笔记 射线
Three.js提供一个射线类Raycasting来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。
2016-04-06 15:09:38
16114
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
15444
5
原创 three.js学习笔记 相机控件
Three.js 提供了几个camera(相机)的控件，你可以通过使用控件来控制相机的移动。当然你也可以通过调用camera(相机)的position属性来控制。 camera(相机)控件包括：轨迹球控件TrackballControls(最常用的控件,用鼠标控制相机移动和转动) 飞行控件F
2016-01-10 13:19:39
4616
原创 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
7384
原创 three.js学习笔记 太阳眩光
当你朝着太阳光方向拍照就会看到镜头的眩光，为了使场景更加真实我们可以给3D场景添加太阳眩光。 这里我们简单地制作了一个太阳眩光并将它添加到场景中。 添加太阳眩光： 1.renderer需要开启alpha模式renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true
2016-01-06 16:23:32
4746
原创 three.js学习笔记 光和影
three.js里面灯光主要有四种1.AmbientLight(影响整个场景的光源)AmbientLight的光线没有特定的来源，所以不需要指定位置信息。也不会对阴影的生成产生影响。2.PointLight(照射所有方向的光源)PointLight一般不用来产生阴影，PointLight的光线来自四面八方产生阴影会为GPU带来沉重负担。3.SpotLig
2016-01-06 15:18:13
3678
原创 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
663
原创 three.js学习笔记 基础1_1
1. 一个three.js程序要包括 renderer(渲染器)、scene(场景) 和camera(相机)。
2016-01-06 09:45:56
795
three.js r71版本和r75版本obj模型加载问题
2016-04-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人