我已经用Three.js做了些小实验,这是一个比较伟大的引擎,你只需要为浏览器的不支持而头疼。你可以用它来创建摄像机(cameras),对象,(objects), 光照(lights), 材质(materials) 等等。你还可以选择渲染器,Three.js提供了多种渲染方式,如果你想让你的网页支持HTML5你也可以选择使用canvas来渲染,也可以使用WebGL或者SVG来进行渲染。Threejs是开源框架,你如果感兴趣你也可以参与开发。但是现在我只是用这个引擎,也只是把它当作一种小工具。在这里我也给大家演示一下如何学习ThreeJS的基础知识。
对于ThreeJS的粉丝这是一片很基础的文章,但是对于新手这将很快的使你了解ThreeJS,通常你需要结合大量的实例来分析demo才可以明白。如果你有问题可以直接在mrdoob的论坛上发布, asking questions via GitHub.他会给你做出回答和解决的。如果你有很深奥和着急的问题你也可以发邮件给他们 Mr. doob和AlteredQualia 都会帮组你的。
1:基础
首先我假设你是个有一定基础的3D开发者,并且你可以熟练的掌握和合理的运用javascript语法。如果你没有上述两点那么你需要学习学习,也许你会觉得非常的有趣的。不过javascript确实有点混乱,容易被人头疼。
在我们目前的3D世界当中至少包括以下几点基础的东西,我会给大家一一介绍。
一: 一个场景
二: 一个渲染器
三: 一个摄像机
四: 一个对象或者至少两个材质
当然你也可以做很多的东西,很多非常疯狂的东西,只要很有足够的想象力,那么就开始你的3D开发,做出很多很炫的WebGL作品吧。
2: 支持
开发WebGL需要浏览器的大力支持,google的chrome是我在做demo的时候常用的浏览器,个人感觉还是不错的。支持webgl的渲染并且在javascript上速度还是不错的还有一些潜在的javascript引擎。Chrome全部支持canvas,webgl,svg这一块。火狐个人觉得排名第二那么google就肯定第一了,并且是火狐4的版本。火狐的javascript引擎似乎还是比google的chrome慢些,但是在渲染的支持上还是很强的。Opear和Safari也支持webgl,但是他们当前的版本只支持canvas渲染,IE9也只支持canvas渲染,到目前为止还没有听到微软说全面支持webgl的消息,担忧啊。
3:设置场景(Scene)
这一步我想你肯定已经选好了一个可以渲染WebGL的浏览器了,并且选好了你要使用的渲染方式了canvas,因为canvas还是比较标准些。Canvas不只是支持WebGL,还有更多的支持。不过,WebGL运行在你cpu的图形卡上,这样就意味着你的cpu可以专心的做别的事,而不需要为webgl渲染而担心,这就叫做硬件加速渲染。
无论你选择什么样的渲染机制,但是你需要记住的就是javascript需要很好的优化性能,因为3D对于浏览器来说还是很大的渲染,所以在你的javascript代码中尽量减少浏览器的压力,优化优化再优化你的javascript代码。
那么这样的话,你可以下载you have downloadedThreeJS的多有js文件在你的电脑中,那么先看看如何着手建立一个Threejs的场景,看下面代码行:
- // set the scene size
- var WIDTH = 400,
- HEIGHT = 300;
- // 设置相机的属性s
- var VIEW_ANGLE = 45,
- ASPECT = WIDTH / HEIGHT,
- NEAR = 0.1,
- FAR = 10000;
- // 得到dom的元素
- // - 假设我们有jquery的开发经验
- var $container = $('#container');
- // 创建一个WebGL的渲染器和摄像机和一个场景
- var renderer = new THREE.WebGLRenderer();
- var camera = new THREE.Camera( VIEW_ANGLE,
- ASPECT,
- NEAR,
- FAR );
- var scene = new THREE.Scene();
- // 摄像机从 0,0,0开始 ,因此默认原点,需要时回滚
- //设置摄像机z坐标位置距离原点向外300
- camera.position.z = 300;
- // 开始渲染
- renderer.setSize(WIDTH, HEIGHT);
- // 加载dom的元素
- $container.append(renderer.domElement);
看起来挺简单的,不是很难。
4:做一个网格模型
现在我们有一个场景,一个摄像机,一个渲染器,但是我们需要画一个实体。实际上Three.js可以加载很多格式的3D文件,你的模型文件可以来自Blender,Maya,Chinema4D,3DMax等等。现在我们要做的是一个网格的元素,相对比较基础的东西(球体)Spheres, (飞机)Planes,(立方体) Cubes , (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。
- //定义球体
- var radius = 50, segments = 16, rings = 16;
- // 创建一个新的网格球体几何学 -
- // 在下一节我们将要涉及到sphereMaterial
- var sphere = new THREE.Mesh(
- new Sphere(radius, segments, rings),
- sphereMaterial);
- // 添加球体到场景
- scene.addChild(sphere);
好了!但是我们的这个球体没有材质。在代码中我们使用了一个变量sphereMaterial,但是我们还没有对他进行定义。首先我们需要做的是对球体的材质进行描述。
5:材质(Materials)
毫无疑问这在Three.Js中是很重要的一部分,因为Three.js可以让你很方便的实现你的网格效果。
1:不发光
2:发光
3:多面
还有很多很多,现在我只介绍这些,剩下的由你自己去发现。但是你必须写在WebGL的着色器上,着色器是一个很庞大的东西,但是你可以使用GLSL(OpenGL的着色语言)。这就需要你用数学来实现模拟的灯光,这样会很复杂。但是多亏了Three.js,你可以不需要在做那样的数学计算了,如果你想写关于阴影的那么你可以使用MeshShaderMaterial来实现,所以这是一个很活泛的设置。
- // 创建一个球体的材质
- var sphereMaterial = new THREE.MeshLambertMaterial(
- {
- color: 0xCC0000
- });
你也可以创建一个其他的材质,除了颜色,比如平滑或者环境的地图。你可以看看这个页面check out the Wiki page,看看你还可以创建什么材质,实际上任何一个引擎都会提供给你的。
6:灯(Lights)
如果你按照上面的实现,那么你现在可以看到一个空色的圆球。但是我们现在有材质却没有光,Three.js默认的是全环境的光,那么我们需要把这些光修理的好点。
- // 创建一个光的源点
- var pointLight = new THREE.PointLight( 0xFFFFFF );
- // 设置光源点位置
- pointLight.position.x = 10;
- pointLight.position.y = 50;
- pointLight.position.z = 130;
- // 添加到场景
- scene.addLight(pointLight);
7:循环渲染
现在我们大概算是有一些渲染了,但是我们需要这样做:
- // 绘画!
- renderer.render(scene, camera);
我们渲染但不一定只是一次,所以如果你想循环渲染,那么你就需要好好的利用requestAnimationFrame这个js类,这是在浏览器中处理动画迄今为止最先进的js代码,但是到目前为止还不是完全支持,所以推介你看看 Paul Irish's shim.。
- // 设置回滚时间
- window.requestAnimFrame = (function(){
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(/* function */ callback, /* DOMElement */ element){
- window.setTimeout(callback, 1000 / 60);
- };
- })();
- // 插入setInterval(render, 16) ....
- (function animloop(){
- render();
- requestAnimFrame(animloop, element);
- })();
代码:
- // requestAnim shim layer by Paul Irish
- window.requestAnimFrame = (function(){
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(/* function */ callback, /* DOMElement */ element){
- window.setTimeout(callback, 1000 / 60);
- };
- })();
- // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
- var canvas, context;
- init();
- animate();
- function init() {
- canvas = document.createElement( 'canvas' );
- canvas.width = 256;
- canvas.height = 256;
- context = canvas.getContext( '2d' );
- document.body.appendChild( canvas );
- }
- function animate() {
- requestAnimFrame( animate );
- draw();
- }
- function draw() {
- var time = new Date().getTime() * 0.002;
- var x = Math.sin( time ) * 96 + 128;
- var y = Math.cos( time * 0.9 ) * 96 + 128;
- context.fillStyle = 'rgb(245,245,245)';
- context.fillRect( 0, 0, 255, 255 );
- context.fillStyle = 'rgb(255,0,0)';
- context.beginPath();
- context.arc( x, y, 10, 0, Math.PI * 2, true );
- context.closePath();
- context.fill();
- }
8常见的对象的特性
如果你花时间看代码的话,你会看到很多Three.js继承的Object3D的对象,这是一个很基础的对象,包含很多非常有用的特征,位置,旋转,大小的信息。特别的是我们的网格也是继承与Object3D,他加了自己的一些特性:材质和几何。
你想知道为什么我会说到这里,那么你想画一个球体在你的web上什么都不做吗?这些特征的存在值得你去研究,因为他们允许你去操作潜在的材质和网格划分。
- // 几何球面
- sphere.geometry
- // 包含顶点和面
- sphere.geometry.vertices // 数组
- sphere.geometry.faces // 以数组形式
- // 位置
- sphere.position // 包括x,y,z三个属性
- sphere.rotation // 包括x,y,z三个属性
- sphere.scale // 包括x,y,z三个属性
9:一个小的更改
在顶点这里我们需要做个更改,你尝试更改你的顶点数据,但是你会发现你的渲染一点没有改变,这是为什么呢?因为Three.js是一向很复杂的优化,你只需要更换其中的一个方法就可以,
- // 改变顶点
- sphere.geometry.__dirtyVertices = true;
- // 改变法线
- sphere.geometry.__dirtyNormals = true;
其实还有很多,但是这两个是我发现最重要的,你会发现只改变这个就省去很多不必要的计算。
结论:
我想你已经大致了解这个关于Three.js的简单介绍了,你可以自己动手尝试做些实例了,你会发现3D在网页中也是非常有趣的。Three.js为你解决了很多头疼的问题,你就可以做出很酷的效果了。
你可以看看这里wrapped up the source code 的文章,对你会有很大的帮组的,
相关推荐
在本项目中,我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库,它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL,three.js...
Three.js 是一款强大的JavaScript库,专为在Web浏览器中创建3D图形而设计。它充分利用了WebGL技术,使得开发者无需深入理解复杂的OpenGL ES 2.0规范,就能在网页上构建丰富的三维场景。本资源是一个基于Three.js实现...
而three.js则是JavaScript最流行的3D图形库,用于在Web上创建和展示三维内容。 ### 一、uniapp入门 uniapp基于Vue.js,提供了丰富的组件库和API,简化了移动应用的开发流程。要开始使用uniapp,首先需要安装...
包括阴影(Shadows)、粒子系统(Particle Systems)、物理引擎(Physics Engines)、网络加载模型(Loading Models from Network)、后期处理(Post-Processing)等,这些都是THREE.js进阶主题,能帮助你创建更为复杂和真实的...
《深入探索Three.js-r133:JavaScript 3D库的奇妙世界》 Three.js,作为WebGL库的杰出代表,为JavaScript开发者提供了一个简单易用的接口,用于在浏览器中创建令人惊叹的3D图形。这个名为"three.js-r133.zip"的...
**Three.js** 是一个广泛使用的开源JavaScript库,它简化了WebGL的使用,让开发者能够轻松地在浏览器中创建复杂的3D图形。Three.js提供了丰富的几何形状、材质、光照、相机控制和动画功能,使得构建3D模型和场景变得...
《深入探索Three.js-r141:JavaScript 3D库的奥秘》 Three.js,作为WebGL库的领头羊,为JavaScript开发者提供了一种简单而强大的方式,用于在浏览器中创建三维图形和交互式体验。本次我们将深入剖析Three.js的r141...
.min.js"显然指的是Three.js,这是一个非常流行的JavaScript库,专门用于在Web浏览器中创建和展示3D计算机图形。Three.js通过简化WebGL接口,使得开发者能够更容易地创建复杂的3D场景,而无需深入理解底层图形编程的...
在“WebGL 可视化3D绘图框架:Three.js 零基础上手实战”这套教程中,你将学习如何搭建Three.js的基本结构,理解上述概念,并通过实践项目掌握3D建模、动画制作和交互设计。教程可能涵盖以下内容: 1. **环境搭建**...
4. **Physijs**:虽然在描述中提及,但未出现在文件列表中,Physijs是一个用于three.js的物理引擎插件,它可以处理物体的运动、碰撞检测和重力效果,增加了3D场景的互动性和真实感。 5. **官方实例**:提供的"完整...
"threejs-webpack-demo-master"这个压缩包文件很可能包含了以下组件: 1. `src`目录:存放项目源代码,包括入口文件(如`index.js`)、Three.js的使用示例代码、样式表等。 2. `public`或`dist`目录:编译后的输出...
Three.js 是一个强大的JavaScript库,它为WebGL提供了一个易用的接口,使得开发者无需深入理解复杂的WebGL底层API就能创建交互式的3D图形。WebGL是一种在浏览器中实现硬件加速3D图形的标准,但其本身的API相对复杂,...
Three.js是一个广泛使用的JavaScript库,用于在Web浏览器中创建3D图形。它提供了丰富的API和功能,使得开发者能够轻松构建复杂的三维场景。 描述中的"及其各种插件源码"进一步确认了这个压缩包中包含了Three.js的...
《Learning Three.js The JavaScript 3D Library for WebGL(2nd)》是一本专注于WebGL库Three.js的专业技术书籍。WebGL是一种在浏览器中实现3D图形的开放标准,它允许开发者在网页上创建交互式的三维场景,而无需任何...
【标题】"three.js(r108)前端Web3D引擎 20190930更新"指的是一个特定版本的three.js库,这是在2019年9月30日更新到r108版本的前端3D渲染引擎。three.js是JavaScript的一个开源库,专门用于在Web浏览器中创建和展示3D...
值得一提的是,three.js不仅支持标准的3D图形,还支持阴影、后期处理、物理引擎以及模型的导入导出等功能,通过这些高级特性,开发者可以创建更加复杂和丰富的3D体验。 总之,使用three.js实现星空粒子移动效果是一...
通过学习《Learning Three.js The JavaScript 3D Library for WebGL(2nd)》,开发者可以掌握Three.js的基本概念、使用方法以及高级技巧,从而在WebGL环境下构建出令人惊叹的3D应用程序。无论是游戏开发、数据可视化...
Three.js 是一款运行在浏览器中的 3D 引擎,封装了底层的WebGL图形接口,提供简化、高效的三维图形程序开发。使用Three.js你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到...
本文将深入探讨如何利用JavaScript库three.js来创建一个交互式的3D钢琴播放器。three.js是一个强大的WebGL库,它为开发者提供了在浏览器中创建三维图形的便捷途径。 首先,我们要理解three.js的基础。它基于WebGL,...
**Three.js 3D绘图** Three.js是一个基于WebGL的JavaScript库,它为浏览器提供了丰富的3D...在实际项目中,开发者可以根据需求进行深入学习和实践,探索Three.js的更多高级特性,如动画系统、物理引擎、阴影处理等。