由于项目需要展示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三轴的尺寸 也可以当作 模型的长宽高

three.js实现3D模型展示的更多相关文章

  1. three.js 运行3D模型

    HTML  <!DOCTYPE html> <html style="height: 100%;"> <head> <title>m ...

  2. 3D模型展示以及体积、表面积计算

    本文原创 如转载请注明出处!!! 本博客地址http://www.cnblogs.com/we-jack 本文原创,如果有同样需求的小伙伴请第一时间联系我 或者在留言区留言 上次为大家提供了3D模型的 ...

  3. 基于playcanvas的3d模型展示

    1.使用基于playcanvas的离线编辑器制作模型效果 2.使用基于playcanvas的开发包读取编辑好的3d模型进行在线3d展示 效果如下:

  4. ANDROID嵌入式应用Unity3D视图(画廊3D模型)

    转载请注明来自大型玉米的博客文章(http://blog.csdn.net/a396901990),谢谢支持! 效果展示:   watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  5. 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

    在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...

  6. 使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

    前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...

  7. vue.js+THREE.js演示服务端3D模型流程总结

    three.js官网 ·场景搭建 使用npm或者其他获取安装three,就像npm i three,之后在需要演示模型的vue组件内import * as THREE from 'three',此时我 ...

  8. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

  9. js和CSS3炫酷3D相册展示

    <!doctype html> <html> <head> <meta charset="UTF"> <title>js ...

随机推荐

  1. [DFS遍历图]UVA10562 Undraw the Trees

    传送门: 1. UVA - 10562 2. Vjudge [看图写树]     将题目中给出的树改写为 括号表示法 即 (ROOT (SON1(...) (SON2(...)...(SONn(... ...

  2. JAVAFX-3 开发应用

    理解布局 布局容器(Layoutcontainer)或面板(Pane)允许对JavaFX应用程序场景图中的UI控件进行灵活.动态的排布.JavaFX Layout API包括下列容器类: ● Bord ...

  3. 2017计算机学科夏令营上机考试-A判决素数个数

    A:判决素数个数 总时间限制:  1000ms 内存限制:  65536kB 描述 输入两个整数X和Y,输出两者之间的素数个数(包括X和Y). 输入 两个整数X和Y(1 <= X,Y <= ...

  4. 找出共同好友 - 数据挖掘 - Scala版

    大家好,关于“找出共同好友”的算法,网上有不少语言的实现,今天有空之余,自己研究了下Scala算法的写法 完整代码可以参考Git地址:https://github.com/benben7466/Spa ...

  5. 2016普及组t3海港

    好的,说说这道题的思路,爆搜队列嘛: 用一个结构体队列存每个人来的时间和他的国籍,用一个vis数组存每个人来的次数,是第一次来sum便加一. 然后从前面第一个人开始扔(原谅我用这个词,因为我找不到更好 ...

  6. CCF-201604-1-折点计数

    问题描述 试题编号: 201604-1 试题名称: 折点计数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长 ...

  7. php面试之四-Linux部分

    php面试题之四——Linux部分(高级部分) 四.Linux部分 1.请解释下列10个shell命令的用途(新浪网技术部) top.ps.mv.find.df.cat.chmod.chgrp.gre ...

  8. Web 动画帧率（FPS）计算

    我们知道,动画其实是由一帧一帧的图像构成的.有 Web 动画那么就会存在该动画在播放运行时的帧率.而帧率在不同设备不同情况下又是不一样的. 有的时候,一些复杂或者重要动画,我们需要实时监控它们的帧率, ...

  9. java多线程编程核心技术——第三章

    第一节等待/通知机制 1.1不使用等待/通知机制实现线程间的通讯 1.2什么是等待/通知机制 1.3等待/通知机制的实现 1.4方法wait()锁释放与notify()锁不释放 1.5当interru ...

  10. IQKeyboardManager 状态栏（status bar）问题

    因为懒,所以具体什么样子,参考下面的链接 具体的问题情况参考:StatusBar background problem #1158 我解决的思路很简单,就是在监听键盘消失的时候,去设置 statys ...