从ThreeJS史上最简单的Demo说起

Posted 2021-04-21 奴彼的笔记

随着移动设备的普及，移动端机器的性能快速提高，移动领域的应用诉求日益显著。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的各种特效吧~

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

今天就到这儿啦~~~