版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/y1535623813/article/details/88660406
Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
简单点的说法:WebGL可以看成是浏览器给我们提供的接口,在javascript中可以直接用这些API进行3D图形的绘制;而Three.js就是在这些接口上又帮我们封装得更好用一些。
既然有了WebGL,我们为什么还需要Three.js?
这是因为WebGL门槛相对较高,需要相对较多的数学知识。虽然WebGL提供的是面向前端的API,但本质上WebGL跟前端开发完全是两个不同的方向,知识的重叠很少。相关性只是他们都在web平台上,都是用javascript而已。一个前端程序员或许还熟悉解析几何,但是还熟悉线性代数的应该寥寥无几了(比如求个逆转置矩阵试试?),更何况使用中强调矩阵运算中的物理意义,这在教学中也是比较缺失的。
因此,前端工程师想要短时间上手WebGL还是挺有难度的。
于是,Three.js对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本。并且,几乎没有损失WebGL的灵活性。
因此,从Three.js入手是值得推荐的,这可以让你在较短的学习后就能面对大部分需求场景。
下面是一个demo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多样式旋转体</title> <script src="http://gamingJS.com/Three.js"></script> <script src="http://gamingJS.com/ChromeFixes.js"></script> </head> <body> <script> window.onload=function(){ // 定义3个基本对象(场景(scene), 相机(camera), 以及一个渲染器(renderer)) var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); var aspect = window.innerWidth / window.innerHeight ; camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); /* 第一个属性75设置的是视角(field of view); 第二个属性设置的是相机拍摄面的长宽比(aspect ratio); 接下来的2个属性是近裁剪面(near clipping plane) 和 远裁剪面(far clipping plane) * */ // 设置颜色和相机视角 camera.position.z = 500; scene.add(camera); // 创建一个几何模型 geometry = new THREE.TorusKnotGeometry(150, 50 ,100,100,1); // geometry = new THREE.CubeGeometry(150, 50 ,100,100,1); // geometry = new THREE.SphereGeometry(150, 50 ,100); // geometry = new THREE.TorusKnotGeometry(150, 50 ,100); // geometry = new THREE.TorusGeometry(150, 50 ,100); // geometry = new THREE.TorusGeometry(150, 50 ,100,100); // 材料 material = new THREE.MeshNormalMaterial({ color: 0xf32179, }); // 网孔基础材料 // material = new THREE.MeshBasicMaterial({ // color: 0xf32179, // }); // 网孔:mesh mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.CanvasRenderer(); renderer.setClearColorHex(0xffffff); renderer.setSize(window.innerWidth, window.innerHeight); document.body.style.margin = 0; document.body.style.overflow = 'hidden'; document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x = Date.now() * 0.0001; mesh.rotation.y = Date.now() * 0.001; mesh.rotation.z = Date.now() * 0.001; renderer.render(scene, camera); } } </script> </body> </html>