three.js实现3D模型展示的示例代码
程序员文章站
2022-04-30 18:02:30
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家
先看看效果:
three.js整体来说 不是很难 只要你静下心来研究...
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家
先看看效果:
three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的
首先我们在页面上需要创建一个能够放置3d模型的画布 也可以说是初始化 three
var width,height; var renderer; function initthree() { width = document.documentelement.clientwidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} --> height = document.documentelement.clientheight/2; /* 渲染器 */ renderer = new three.webglrenderer(); renderer.setsize(width , height); renderer.setclearcolor(new three.color(0x66666)); renderer.gammainput = true; renderer.gammaoutput = true; document.body.appendchild(renderer.domelement); }
通过上面的代码不难看出 我们设置了 在body里追加了一块画布 宽高是 client的一半颜色为 0x66666 这里要注意的是 renderer = new three.webglrenderer(); 因为我们所有的设置都是以renderer为对象设置
下来 我们需要调整摄像头 即视觉角度
/* 摄像头 */ var camera; function initcamera() { var view_angle = 45, aspect = width / height, near = 0.1, far = 10000; camera = new three.perspectivecamera(view_angle, aspect, near, far); camera.position.set(20, 0, 0); //设置视野的中心坐标 camera.lookat(scene.position); }
以上代码主要是控制视觉角度 数值可以在后期根据自己的需求去调整
加载场景:
/* 场景 */ var scene; function initscene() { scene = new three.scene(); }
加载灯光效果
/* 灯光 */ var light,light2,light3; function initlight() { //平行光 light = new three.directionallight(0xffffff); light.position.set(0, 99, 0).normalize(); scene.add(light); //环境光 light2 = new three.ambientlight(0x999999); scene.add(light2); //点光源 light3 = new three.pointlight(0x00ff00); light3.position.set(300, 0, 0); scene.add(light3); }
显示模型对象:
/* 显示对象 */ var cube; function initobject(){ // ascii file var loader = new three.stlloader(); loader.addeventlistener( 'load', function ( event ) { var loading = document.getelementbyid("loading"); loading.parentnode.removechild(loading); var geometry = event.content; //砖红色 var material = new three.meshphongmaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } ); //纯黑色 // var material = new three.meshbasicmaterial( { envmap: three.imageutils.loadtexture( 'http://localhost:8080/textures/metal.jpg', new three.sphericalreflectionmapping() ), overdraw: true } ) ; //粉色 带阴影 // var material = new three.meshlambertmaterial( { color:0xff5533, side: three.doubleside } ); //灰色 // var material = new three.meshlambertmaterial({color: 000000}); //材质设定 (颜色) var mesh = new three.mesh( geometry, material ); var center = three.geometryutils.center(geometry); var boundbox=geometry.boundingbox; var vector3 = boundbox.size(null); var vector3 = boundbox.size(null); console.log(vector3); var scale = vector3.length(); camera.position.set(scale, 0, 0); camera.lookat(scene.position); scene.add(camera); //利用一个轴对象以可视化的3轴以简单的方式。x轴是红色的。y轴是绿色的。z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。 var axishelper = new three.axishelper(800); scene.add(axishelper); //周围边框 bboxhelper = new three.boxhelper(); bboxhelper.visible = true; var meshmaterial = material; mainmodel = new three.mesh(geometry, meshmaterial); bboxhelper.update(mainmodel); bboxhelper.geometry.computeboundingbox(); scene.add(bboxhelper); //地板网格 // var gridhelper = new three.gridhelper(500, 40); // 500 is grid size, 20 is grid step // gridhelper.position = new three.vector3(0, 0, 0); // gridhelper.rotation = new three.euler(0, 0, 0); // scene.add(gridhelper); // var gridhelper2 = gridhelper.clone(); // gridhelper2.rotation = new three.euler(math.pi / 2, 0, 0); // scene.add(gridhelper2); // var gridhelper3 = gridhelper.clone(); // gridhelper3.rotation = new three.euler(math.pi / 2, 0, math.pi / 2); // scene.add(gridhelper3); // // var grid = new three.gridhelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#ffffff", "left"); // scene.add(grid); var x = (boundbox.max.x - boundbox.min.x).tofixed(2); var y = (boundbox.max.y - boundbox.min.y).tofixed(2); var z = (boundbox.max.z - boundbox.min.z).tofixed(2); console.log(x); console.log(y); console.log(z); console.log(boundbox); mesh.position.set(0,0,0); // mesh.position.x = scene.position.x; // mesh.position.y = scene.position.y ; // mesh.position.z = scene.position.z; scene.add(mesh); renderer.clear(); renderer.render(scene, camera); } ); loader.load( '3dfile/莫比乌斯环.stl' ); }
这里根据文件类型选择相对应的js引入即可 我加载的是stl模型 所以我引入的是 stlloader.js
<script src="js/stlloader.js"></script>
如果需要显示网格标尺 将 网格部分代码 去掉注释即可
下来是控制方法 (虽然我没有在显示代码里面写根据键盘按键放大缩小 但还是提供给大家 参考)
//控制 var effect; var controls; function initcontrol(){ effect = new three.asciieffect( renderer ); effect.setsize( width, height ); controls = new three.trackballcontrols( camera,renderer.domelement); }
最后就是一个初始调用了
function animate() { requestanimationframe( animate ); controls.update(); effect.render( scene, camera ); } function threestart() { initthree(); initscene(); initcamera(); initlight(); initobject(); initcontrol(); animate(); }
附上完整代码
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>webgl</title> <script type="text/javascript" charset="utf-8" src="js/three.js"></script> <script src="js/stlloader.js"></script> <script src="js/trackballcontrols.js"></script> <script src="js/asciieffect.js"></script> <style>body{overflow:hidden;background:#eee}</style> </head> <script> var width,height; var renderer; function initthree() { width = document.documentelement.clientwidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} --> height = document.documentelement.clientheight/2; /* 渲染器 */ renderer = new three.webglrenderer(); renderer.setsize(width , height); renderer.setclearcolor(new three.color(0x66666)); renderer.gammainput = true; renderer.gammaoutput = true; document.body.appendchild(renderer.domelement); } /* 摄像头 */ var camera; function initcamera() { var view_angle = 45, aspect = width / height, near = 0.1, far = 10000; camera = new three.perspectivecamera(view_angle, aspect, near, far); camera.position.set(20, 0, 0); //设置视野的中心坐标 camera.lookat(scene.position); } /* 场景 */ var scene; function initscene() { scene = new three.scene(); } /* 灯光 */ var light,light2,light3; function initlight() { //平行光 light = new three.directionallight(0xffffff); light.position.set(0, 99, 0).normalize(); scene.add(light); //环境光 light2 = new three.ambientlight(0x999999); scene.add(light2); //点光源 light3 = new three.pointlight(0x00ff00); light3.position.set(300, 0, 0); scene.add(light3); } /* 显示对象 */ var cube; function initobject(){ // ascii file var loader = new three.stlloader(); loader.addeventlistener( 'load', function ( event ) { var loading = document.getelementbyid("loading"); loading.parentnode.removechild(loading); var geometry = event.content; //砖红色 var material = new three.meshphongmaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } ); //纯黑色 // var material = new three.meshbasicmaterial( { envmap: three.imageutils.loadtexture( 'http://localhost:8080/textures/metal.jpg', new three.sphericalreflectionmapping() ), overdraw: true } ) ; //粉色 带阴影 // var material = new three.meshlambertmaterial( { color:0xff5533, side: three.doubleside } ); //灰色 // var material = new three.meshlambertmaterial({color: 000000}); //材质设定 (颜色) var mesh = new three.mesh( geometry, material ); var center = three.geometryutils.center(geometry); var boundbox=geometry.boundingbox; var vector3 = boundbox.size(null); var vector3 = boundbox.size(null); console.log(vector3); var scale = vector3.length(); camera.position.set(scale, 0, 0); camera.lookat(scene.position); scene.add(camera); //利用一个轴对象以可视化的3轴以简单的方式。x轴是红色的。y轴是绿色的。z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。 var axishelper = new three.axishelper(800); scene.add(axishelper); //周围边框 bboxhelper = new three.boxhelper(); bboxhelper.visible = true; var meshmaterial = material; mainmodel = new three.mesh(geometry, meshmaterial); bboxhelper.update(mainmodel); bboxhelper.geometry.computeboundingbox(); scene.add(bboxhelper); //地板网格 // var gridhelper = new three.gridhelper(500, 40); // 500 is grid size, 20 is grid step // gridhelper.position = new three.vector3(0, 0, 0); // gridhelper.rotation = new three.euler(0, 0, 0); // scene.add(gridhelper); // var gridhelper2 = gridhelper.clone(); // gridhelper2.rotation = new three.euler(math.pi / 2, 0, 0); // scene.add(gridhelper2); // var gridhelper3 = gridhelper.clone(); // gridhelper3.rotation = new three.euler(math.pi / 2, 0, math.pi / 2); // scene.add(gridhelper3); // // var grid = new three.gridhelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#ffffff", "left"); // scene.add(grid); var x = (boundbox.max.x - boundbox.min.x).tofixed(2); var y = (boundbox.max.y - boundbox.min.y).tofixed(2); var z = (boundbox.max.z - boundbox.min.z).tofixed(2); console.log(x); console.log(y); console.log(z); console.log(boundbox); mesh.position.set(0,0,0); // mesh.position.x = scene.position.x; // mesh.position.y = scene.position.y ; // mesh.position.z = scene.position.z; scene.add(mesh); renderer.clear(); renderer.render(scene, camera); } ); loader.load( '3dfile/莫比乌斯环.stl' ); } //控制 var effect; var controls; function initcontrol(){ effect = new three.asciieffect( renderer ); effect.setsize( width, height ); controls = new three.trackballcontrols( camera,renderer.domelement); } function animate() { requestanimationframe( animate ); controls.update(); effect.render( scene, camera ); } function threestart() { initthree(); initscene(); initcamera(); initlight(); initobject(); initcontrol(); animate(); } </script> <body onload="threestart()"> <div id="loading" style="color:#fff">loading...</div> </body> </html>
哦 我的文件结构
如果想要所有文件的小伙伴 给我留言即可
补充一点,由于在显示模型的方法里我加入了 bboxhelper = new three.boxhelper() 所以我们可以获取到模型的 x y z三轴的尺寸 也可以当作 模型的长宽高
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 基于jQuery选择器的整理集合