HTML5与WebGL编程(2):Three.js

11人阅读 评论(0) 收藏 举报
分类:

   代表作http://www.ro.me/

   Three.js的作者是巴塞罗那的Ricardo Cabello Miguel,或许你更熟悉他的另一个称呼Mr.doob。Three.js由Mr.doob早期在3D作品开发展示会上的作品发展而来。在现有工具都不能满足需求的情况下,Mr.doob开始开发自己的工具,这套工具一开始是用运行在Adobe Flash平台上的ActionScript编写的。几年后Google Chrome、高效的JavaScript以及HTML5一一登场,Mr.doob便将他的研究转移到了浏览器这个新的平台上。之后在2010年,Three.js诞生了。第一版本使用SVG和2D Canvas渲染。在此几个月后WebGL发布了,Three.js便开始移植到WebGL上进行后续开发。

    Three.js也有些不擅长的事情,比方说,Three.js并不是一个游戏引擎。它缺乏一些游戏引擎所需的常用特性,如公告牌、头像、有限状态机以及物理引擎。Three.js也没有编写多人联机游戏所需的内置网络支持。你需要基于Three.js自行构建它,或是整合其他专用的代码库。同时Three.js也不是一个应用框架,它不具备一个框架应有的安装、卸载、事件处理和运行循环机制。它是一个为浏览器设计的、高性能、功能齐全、易用的3D渲染引擎。

   源代码https://github.com/mrdoob/three.js/

   本书使用的版本是revision 58(r58) https://github.com/mrdoob/three.js/archive/r58.tar.gz

   支持WebGL 是r12  https://github.com/mrdoob/three.js/archive/r12.tar.gz

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming 3D Applications in HTML5 and WebGL — The Cube in Three.js</title>
<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
<script src="../libs/three.js.r58/three.js"></script>
<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
<script type="text/javascript">
   var renderer = null,
   scene = null,
   camera = null,
   cube = null;

   var duration = 5000;  //ms
   var currentTime = Date.now();
   function animate() {
   	  var now = Date.now();
   	  var deltat = now - currentTime;
   	  currentTime = now;
   	  var fract = deltat / duration;
   	  var angle = Math.PI * 2 * fract;
   	  cube.rotation.y += angle;
   }

   function run() {
   	  requestAnimationFrame(function() { run(); });
   	  renderer.render( scene, camera );
   	  animate();
   }

   $(document).ready(
   	  function() {
   	  	var canvas = document.getElementById("webglcanvas");
   	  	//创建Three.js渲染器并将其添加到canvas中
   	  	renderer = new THREE.WebGLRenderer(
   	  		{ canvas: canvas, antialias: true } // 开启基于硬件的多重采样抗锯齿()策略。用于使渲染的物体边缘平滑,避免呈现锯齿。
   	  	);
   	  	//设置视口尺寸
   	  	renderer.setSize(canvas.width, canvas.height);
   	  	// 场景是Three.js图形层级结构的最顶层。
   	  	scene = new THREE.Scene();
   	  	//为场景添加两个对象:一个相机和一个网格、相机定义了我们观察场景的位置
   	  	camera = new THREE.PerspectiveCamera( 45, canvas.width/canvas.height, 1, 4000 );//四个参数:45度的视野、宽高比、最近平面和最远平面的位置坐标值,
   	  	scene.add(camera);//这些参数会被用来构建成一个透视投影矩阵,用于将3D场景渲染 到2D绘图平面
                //网格包括一个几何形状(geometry)和一个材质(material)
   	  	// 纹理用来表示3D网格模型表面属性的位图,最简单的使用方法是定义一个表面颜色,而它们也可以通过组合来产生复杂的效果,例如凹凸或高光。
   	  	var mapUrl = "../images/webgl-logo-256.jpg";
   	  	var map = THREE.ImageUtils.loadTexture(mapUrl);
   	  	// 材质用于定义如何渲染物体的表面,MeshBasicMaterial类型的材质,是一个最简单的、不带光照效果处理的材质
   	  	var material = new THREE.MeshBasicMaterial({map: map});//通过材质构造时传入参数将纹理和材质结合起来
   	  	//创建一个2 x 2 x 2的立方体网格
   	  	var geometry = new THREE.CubeGeometry(2, 2, 2);
   	  	// 将它们整合到一个名为cube的THREE.Mesh对象上
   	  	cube = new THREE.Mesh(geometry, material);
   	  	//
   	  	cube.position.z = -8;
   	  	cube.rotation.x = Math.PI / 5;
   	  	cube.rotation.y = Math.PI / 5;
   	  	// 将网格添加到场景中
   	  	scene.add(cube);
   	  	run();
   	  }
   );
</script>
</head>
<body>
    <canvas id="webglcanvas" style="border: none;background-color:#000000" width="500" height="500"></canvas>
</body>
</html>
添加灯光效果

//
   	  	var light = new THREE.DirectionalLight( 0xffffff, 1.5);
   	  	light.position.set(0, 0, 1);
   	  	scene.add( light );
   	  	//
   	  	var mapUrl = "../images/webgl-logo-256.jpg";
   	  	var map = THREE.ImageUtils.loadTexture(mapUrl);
   	  	//
   	  	//var material = new THREE.MeshBasicMaterial({map: map});
   	  	var material = new THREE.MeshPhongMaterial({map: map});



查看评论

HTML5与WebGL编程.pdf

  • 2018年01月30日 00:41
  • 19.01MB
  • 下载

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造

在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口。目前主流的浏览器都有较好的支持,IE需要11。最近web 3D机房...
  • ALLENJIAO
  • ALLENJIAO
  • 2017-09-05 11:21:19
  • 1554

HTML5 WebGL Three.js 加载 3D模型文件

本文主要介绍一下如何使用Three.js框架加载本地的3D模型文件,有关于Three.js和WebGL的具体知识请参考http://www.khronos.org/webgl/ 在页面中,我们利用...
  • ForeverCjl
  • ForeverCjl
  • 2013-10-10 13:02:34
  • 21049

HTML5与WebGL编程(中文)

  • 2017年09月19日 14:15
  • 1.05MB
  • 下载

Learning Three.js The JavaScript 3D Library for WebGL(2nd) 无水印pdf 0分

  • 2016年12月12日 16:37
  • 16.03MB
  • 下载

Three.js入门指南-中文基础教程

  • 2017年12月25日 09:41
  • 1.97MB
  • 下载

HTML5与WebGL编程

  • 2017年03月26日 14:08
  • 10.47MB
  • 下载

图灵书籍(HTML5与WebGL编程.pdf+源码)

  • 2017年12月25日 15:27
  • 218.76MB
  • 下载

three.js基础

  • 2017年07月11日 11:41
  • 314KB
  • 下载

学习 WebGL 的开源库 Three.js

百度 第一个词条是:   http://hewebgl.com/      然后就照着学习呗  , 后面是需要花钱的! 开发环境搭建  VS Code(编辑器)  + python(自带的文件服务器)...
  • u010019717
  • u010019717
  • 2017-03-17 09:25:32
  • 1572
    个人资料
    持之以恒
    等级:
    访问量: 9万+
    积分: 4195
    排名: 9160
    文章存档
    最新评论