Three.js框架,菜鸟上路

时间:2022-06-25 06:02:23

1. three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能

下载最新的three.js库,将其包含在你的html 页面中。
https://www.jikexueyuan.com 简单学习视频
<scriptsrc="js/three.min.js"></script>

2.  搭建开发环境

网页编辑环境HTML5,JavaScript,css3, 即webStorm

Three.js库:https://github.com/mrdoob/three.js/

支持HTML5、webGl的浏览器:Chrome

3.  使用引入three.js库

Three.js官网地址:https://threejs.org/ 

Three.js库:https://github.com/mrdoob/three.js/

Three.js核心库:three.js/three.min.js

Three.js扩展库位置:three.js-rxx\examples\js

4. 三维场景的基本要素

   场景对象:模型,灯光,特效

   相机对象:观察场景的视角 

   渲染器对象:场景渲染输出的目标

   渲染:执行渲染操作render 动作

5. 场景动画

   相机控制是场景交互和动画的基础

6. 有关贴图的例子:

http://www.ithao123.cn/content-8367588.html

http://blog.csdn.net/liupeng_family/article/details/9399035

http://blog.csdn.net/grief_of_the_nazgul/article/details/42743005

http://www.codesky.net/article/201302/181769.html

7.stats.js是一个JavaScript性能监控器。

这个类提供了一个简单的信息框,帮助您监控代码的性能。

FPS帧渲染的最后一秒。数字越高越好。 

MS 渲染一帧需要毫秒。数字越低就越好。

var stats =newStats();

stats.setMode( 1 ); // 0: fps, 1: ms, 2: mb

// align top-left

stats.domElement.style.position='absolute';

stats.domElement.style.left='0px';

stats.domElement.style.top='0px';

document.body.appendChild( stats.domElement );

varupdate=function () {

    stats.begin();

    // monitored code goes here

    stats.end();

    requestAnimationFrame( update );

};

8.参考资料

Three.js入门详细介绍:

http://blog.csdn.net/acdreamers/article/details/18192955

 

物体旋转的实现:

1. 利用控制器

Controls.js,还有一些控制器

2. 利用鼠标事件

鼠标点击事件,鼠标移动事件,获取鼠标移动的距离来实现3D模型的旋转,转动。

3. 3D模型自身旋转

3D模型的移动旋转,也可以通过相机的移动旋转来实现

具体怎么实现,只能去找些实例,因为是菜鸟嘛


其他的参考资料:

http://www.hewebgl.com/

https://github.com/mrdoob/three.js/

http://www.ituring.com.cn/minibook/792

http://threejs.org/