Three.js使用导入的模型生成粒子代码案例
程序员文章站
2022-04-18 13:02:30
简介
前几节我已经将现在一些经常使用的模型导入的方法。之前也接触粒子的创建。这个案例是把两者结合起来,通过导入模型获得几何体的数据,然后创建粒子。
实现案例
首先,引入script加载器,这里的案例...
简介
前几节我已经将现在一些经常使用的模型导入的方法。之前也接触粒子的创建。这个案例是把两者结合起来,通过导入模型获得几何体的数据,然后创建粒子。
实现案例
首先,引入script加载器,这里的案例是使用的stl格式的文件生成,所以,引入stl文件加载器
<script src="/lib/js/loaders/stlloader.js"></script>
然后,获取到模型的几何体,然后创建点云。
var loader = new three.stlloader(); loader.load("/lib/assets/models/solidhead_2_lowpoly_42k.stl", function (geometry) { //创建纹理 var material = new three.pointsmaterial({ color: 0xffffff, size: 0.4, opacity: 0.6, transparent: true, blending: three.additiveblending, depthtest: false, map: generatesprite() }); var mesh = new three.points(geometry, material); mesh.rotation.x = -0.5 * math.pi; //将模型摆正 mesh.scale.set(0.1, 0.1, 0.1); //缩放 geometry.center(); //居中显示 scene.add(mesh); });
案例代码
<!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="/lib/three.js"></script> <script src="/lib/js/loaders/stlloader.js"></script> <script src="/lib/js/controls/orbitcontrols.js"></script> <script src="/lib/js/libs/stats.min.js"></script> <script src="/lib/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.setclearcolor(0x000000); 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, 20, 25); camera.lookat(new three.vector3(0,0,0)); } var scene; function initscene() { scene = new three.scene(); } //初始化dat.gui简化试验流程 var gui; function initgui() { //声明一个保存需求修改的相关数据的对象 gui = { }; var datgui = new dat.gui(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值) } var light; function initlight() { scene.add(new three.ambientlight(0x444444)); light = new three.pointlight(0xffffff); light.position.set(0,50,50); //告诉平行光需要开启阴影投射 light.castshadow = true; scene.add(light); } function initmodel() { //辅助工具 var helper = new three.axeshelper(50); scene.add(helper); var loader = new three.stlloader(); loader.load("/lib/assets/models/solidhead_2_lowpoly_42k.stl", function (geometry) { //创建纹理 var material = new three.pointsmaterial({ color: 0xffffff, size: 0.4, opacity: 0.6, transparent: true, blending: three.additiveblending, depthtest: false, map: generatesprite() }); var mesh = new three.points(geometry, material); mesh.rotation.x = -0.5 * math.pi; //将模型摆正 mesh.scale.set(0.1, 0.1, 0.1); //缩放 geometry.center(); //居中显示 scene.add(mesh); }); } //使用canvas生成粒子的纹理 function generatesprite() { var canvas = document.createelement('canvas'); canvas.width = 16; canvas.height = 16; var context = canvas.getcontext('2d'); var gradient = context.createradialgradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2); gradient.addcolorstop(0, 'rgba(255,255,255,1)'); gradient.addcolorstop(0.2, 'rgba(0,255,255,1)'); gradient.addcolorstop(0.4, 'rgba(0,0,64,1)'); gradient.addcolorstop(1, 'rgba(0,0,0,1)'); context.fillstyle = gradient; context.fillrect(0, 0, canvas.width, canvas.height); var texture = new three.texture(canvas); texture.needsupdate = true; return texture; } //初始化性能插件 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 = true; controls.autorotatespeed = 0.5; //设置相机距离原点的最远距离 controls.mindistance = 1; //设置相机距离原点的最远距离 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(); controls.update(); requestanimationframe(animate); } function draw() { initgui(); initrender(); initscene(); initcamera(); initlight(); initmodel(); initcontrols(); initstats(); animate(); window.onresize = onwindowresize; } </script> </html>