浙江铃声推荐联盟

从ThreeJS史上最简单的Demo说起

Ruby的学习笔记2019-06-24 21:31:02

随着移动设备的普及,移动端机器的性能快速提高,移动领域的应用诉求日益显著。PC平台著名的OpenGL和Direct 3D引领着图形渲染的潮流,移动端则是WebGL表现着非凡渲染能力。今天就看一看具有代表性的三维渲染引擎:ThreeJS,到底是怎样工作的!

先看一下最简单的效果:

之所以说ThreeJS是最具有代表性的Web三维渲染引擎,看一下上图旋转的立方体页面的实现就会明白了!


一台摄像机:

var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );


一个场景框架:

var scene = new THREE.Scene();


一个立方体含贴图:

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );

var material = new THREE.MeshBasicMaterial( { map: texture } );

var 

mesh = new THREE.Mesh( geometry, material );

一个渲染器:

var renderer = new THREE.WebGLRenderer();


然后将立方体添加到scene里面:

scene.add( mesh );    


开始每一帧的渲染,并旋转模型:

mesh.rotation.x += 0.005;

renderer.render( scene, camera );


好了,以上几行代码就完成了场景的搭建和渲染。


当然,ThreeJS目前是有浏览器兼容性问题的,也就是说不是所有的浏览器都支持WebGL的。在测试代码前最好先检测浏览器是否支持WebGL功能!


再欣赏一下,ThreeJS的各种特效吧~

这些复杂的场景,基本上也是由文中所述四个基本元素来实现~

今天就到这儿啦~~~