Three.js利用顶点绘制立方体的方法详解
程序员文章站
2022-07-06 21:04:00
前言
之前我们在学些webgl基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的。虽然复杂,但是毕竟原生,性能没得说。
three.js也给我们提供了相关的接...
前言
之前我们在学些webgl基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的。虽然复杂,但是毕竟原生,性能没得说。
three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型,下面话不多说了,来一起看看详细的介绍吧。
下面是我的个人一个案例。
首先,我创建了一个空白的形状:
//立方体 var cubegeometry = new three.geometry();
立方体的形状如下:
// 创建一个立方体 // v6----- v5 // /| /| // v1------v0| // | | | | // | |v7---|-|v4 // |/ |/ // v2------v3
然后添加了立方体的顶点,一共8个
//创建立方体的顶点 var vertices = [ new three.vector3(10, 10, 10), //v0 new three.vector3(-10, 10, 10), //v1 new three.vector3(-10, -10, 10), //v2 new three.vector3(10, -10, 10), //v3 new three.vector3(10, -10, -10), //v4 new three.vector3(10, 10, -10), //v5 new three.vector3(-10, 10, -10), //v6 new three.vector3(-10, -10, -10) //v7 ]; cubegeometry.vertices = vertices;
接着通过顶点的坐标生成了立方体的面
//创建立方的面 var faces=[ new three.face3(0,1,2), new three.face3(0,2,3), new three.face3(0,3,4), new three.face3(0,4,5), new three.face3(1,6,7), new three.face3(1,7,2), new three.face3(6,5,4), new three.face3(6,4,7), new three.face3(5,6,1), new three.face3(5,1,0), new three.face3(3,2,7), new three.face3(3,7,4) ]; cubegeometry.faces = faces;
在这里需要注意:
(1)面是由三个顶点组成的一个三角形面,也是webgl的实现面的方式。如果需要一个长方形,那就需要由两个三角形组合而成。
(2)如果要绘制的面是朝向相机的,那这个面的顶点的书写方式是逆时针绘制的,比如图上模型的第一个面的添加里面书写的是(0,1,2)。
(3)如果能使模型有灯光的效果,还需要设置法向量,让three.js自动生成即可,如下
//生成法向量 cubegeometry.computefacenormals();
当前的这些步骤只是生成了形状,还需要和以前一样设置一个纹理,再通过thtee.mesh()方法生成网格
var cubematerial = new three.meshlambertmaterial({color: 0x00ffff}); cube = new three.mesh(cubegeometry, cubematerial);
这样就实现了一个立方体的绘制:
全部代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </style> </head> <body onload="draw();"> </body> <script src="build/three.js"></script> <script src="examples/js/controls/orbitcontrols.js"></script> <script src="examples/js/libs/stats.min.js"></script> <script src="examples/js/libs/dat.gui.min.js"></script> <script> var renderer; function initrender() { renderer = new three.webglrenderer({antialias: true}); renderer.setsize(window.innerwidth, window.innerheight); //告诉渲染器需要阴影效果 renderer.shadowmap.enabled = true; renderer.shadowmap.type = three.pcfsoftshadowmap; // 默认的是,没有设置的这个清晰 three.pcfshadowmap document.body.appendchild(renderer.domelement); } var camera; function initcamera() { camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 0.1, 1000); camera.position.set(0, 40, 100); camera.lookat(new three.vector3(0, 0, 0)); } var scene; function initscene() { scene = new three.scene(); } //初始化dat.gui简化试验流程 var gui; function initgui() { //声明一个保存需求修改的相关数据的对象 gui = { lighty: 30, //灯光y轴的位置 cubex: 25, //立方体的x轴位置 cubey: 10, //立方体的x轴位置 cubez: -5 //立方体的z轴的位置 }; var datgui = new dat.gui(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值) datgui.add(gui, "lighty", 0, 100); datgui.add(gui, "cubex", -30, 30); datgui.add(gui, "cubey", -30, 30); datgui.add(gui, "cubez", -30, 30); } var light; function initlight() { scene.add(new three.ambientlight(0x444444)); light = new three.pointlight(0xffffff); light.position.set(15, 30, 10); //告诉平行光需要开启阴影投射 light.castshadow = true; scene.add(light); } var cube; function initmodel() { //辅助工具 var helper = new three.axishelper(10); scene.add(helper); // 创建一个立方体 // v6----- v5 // /| /| // v1------v0| // | | | | // | |v7---|-|v4 // |/ |/ // v2------v3 //立方体 var cubegeometry = new three.geometry(); //创建立方体的顶点 var vertices = [ new three.vector3(10, 10, 10), //v0 new three.vector3(-10, 10, 10), //v1 new three.vector3(-10, -10, 10), //v2 new three.vector3(10, -10, 10), //v3 new three.vector3(10, -10, -10), //v4 new three.vector3(10, 10, -10), //v5 new three.vector3(-10, 10, -10), //v6 new three.vector3(-10, -10, -10) //v7 ]; cubegeometry.vertices = vertices; //创建立方的面 var faces=[ new three.face3(0,1,2), new three.face3(0,2,3), new three.face3(0,3,4), new three.face3(0,4,5), new three.face3(1,6,7), new three.face3(1,7,2), new three.face3(6,5,4), new three.face3(6,4,7), new three.face3(5,6,1), new three.face3(5,1,0), new three.face3(3,2,7), new three.face3(3,7,4) ]; cubegeometry.faces = faces; //生成法向量 cubegeometry.computefacenormals(); var cubematerial = new three.meshlambertmaterial({color: 0x00ffff}); cube = new three.mesh(cubegeometry, cubematerial); cube.position.x = 25; cube.position.y = 5; cube.position.z = -5; //告诉立方体需要投射阴影 cube.castshadow = true; scene.add(cube); //底部平面 var planegeometry = new three.planegeometry(100, 100); var planematerial = new three.meshlambertmaterial({color: 0xaaaaaa}); var plane = new three.mesh(planegeometry, planematerial); plane.rotation.x = -0.5 * math.pi; plane.position.y = -0; //告诉底部平面需要接收阴影 plane.receiveshadow = true; scene.add(plane); } //初始化性能插件 var stats; function initstats() { stats = new stats(); document.body.appendchild(stats.dom); } //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放 var controls; function initcontrols() { controls = new three.orbitcontrols(camera, renderer.domelement); // 如果使用animate方法时,将此函数删除 //controls.addeventlistener( 'change', render ); // 使动画循环使用时阻尼或自转 意思是否有惯性 controls.enabledamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度 //controls.dampingfactor = 0.25; //是否可以缩放 controls.enablezoom = true; //是否自动旋转 controls.autorotate = false; //设置相机距离原点的最远距离 controls.mindistance = 50; //设置相机距离原点的最远距离 controls.maxdistance = 200; //是否开启右键拖拽 controls.enablepan = true; } function render() { renderer.render(scene, camera); } //窗口变动触发的函数 function onwindowresize() { camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); render(); renderer.setsize(window.innerwidth, window.innerheight); } function animate() { //更新控制器 render(); //更新性能插件 stats.update(); //更新相关位置 light.position.y = gui.lighty; cube.position.x = gui.cubex; cube.position.y = gui.cubey; cube.position.z = gui.cubez; controls.update(); requestanimationframe(animate); } function draw() { initgui(); initrender(); initscene(); initcamera(); initlight(); initmodel(); initcontrols(); initstats(); animate(); window.onresize = onwindowresize; } </script> </html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用three.js具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。