three.js实现3D模型展示
2024-04-25 15:00:38
开头说明下 文章是转载我同事一个 哥们的。怕自己 以后会用 拿过来 方便以后使用
three.js实现3D模型展示
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家
先看看效果:
three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的
首先我们在页面上需要创建一个能够放置3D模型的画布 也可以说是初始化 Three
1 var WIDTH,HEIGHT;
2 var renderer;
3 function initThree() {
4 WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->
5 HEIGHT = document.documentElement.clientHeight/2;
6 /* 渲染器 */
7 renderer = new THREE.WebGLRenderer();
8 renderer.setSize(WIDTH , HEIGHT);
9 renderer.setClearColor(new THREE.Color(0x66666));
10 renderer.gammaInput = true;
11 renderer.gammaOutput = true;
12
13 document.body.appendChild(renderer.domElement);
14 }
通过上面的代码不难看出 我们设置了 在body里追加了一块画布 宽高是 client的一半颜色为 0x66666 这里要注意的是 renderer = new THREE.WebGLRenderer(); 因为我们所有的设置都是以renderer为对象设置
下来 我们需要调整摄像头 即视觉角度
1 /* 摄像头 */
2 var camera;
3 function initCamera() {
4 var VIEW_ANGLE = 45,
5 ASPECT = WIDTH / HEIGHT,
6 NEAR = 0.1,
7 FAR = 10000;
8 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
9 camera.position.set(20, 0, 0);
10 //设置视野的中心坐标
11 camera.lookAt(scene.position);
12 }
以上代码主要是控制视觉角度 数值可以在后期根据自己的需求去调整
加载场景:
1 /* 场景 */
2 var scene;
3 function initScene() {
4 scene = new THREE.Scene();
5 }
加载灯光效果
1 /* 灯光 */
2 var light,light2,light3;
3 function initLight() {
4 //平行光
5 light = new THREE.DirectionalLight(0xFFFFFF);
6 light.position.set(0, 99, 0).normalize();
7 scene.add(light);
8 //环境光
9 light2 = new THREE.AmbientLight(0x999999);
10 scene.add(light2);
11 //点光源
12 light3 = new THREE.PointLight(0x00FF00);
13 light3.position.set(300, 0, 0);
14 scene.add(light3);
15 }
显示模型对象:
1 /* 显示对象 */
2 var cube;
3 function initObject(){
4 // ASCII file
5 var loader = new THREE.STLLoader();
6
7 loader.addEventListener( 'load', function ( event ) {
8 var loading = document.getElementById("Loading");
9 loading.parentNode.removeChild(loading);
10 var geometry = event.content;
11 //砖红色
12 var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
13 //纯黑色
14 // var material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'http://localhost:8080/textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } ) ;
15 //粉色 带阴影
16 // var material = new THREE.MeshLambertMaterial( { color:0xff5533, side: THREE.DoubleSide } );
17 //灰色
18 // var material = new THREE.MeshLambertMaterial({color: 000000}); //材质设定 (颜色)
19
20
21 var mesh = new THREE.Mesh( geometry, material );
22
23 var center = THREE.GeometryUtils.center(geometry);
24 var boundbox=geometry.boundingBox;
25 var vector3 = boundbox.size(null);
26 var vector3 = boundbox.size(null);
27 console.log(vector3);
28 var scale = vector3.length();
29 camera.position.set(scale, 0, 0);
30 camera.lookAt(scene.position);
31 scene.add(camera);
32
33
34 //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。
35 var axisHelper = new THREE.AxisHelper(800);
36 scene.add(axisHelper);
37
38 //周围边框
39 bboxHelper = new THREE.BoxHelper();
40 bboxHelper.visible = true;
41 var meshMaterial = material;
42 mainModel = new THREE.Mesh(geometry, meshMaterial);
43 bboxHelper.update(mainModel);
44 bboxHelper.geometry.computeBoundingBox();
45 scene.add(bboxHelper);
46
47 //地板网格
48 // var gridHelper = new THREE.GridHelper(500, 40); // 500 is grid size, 20 is grid step
49 // gridHelper.position = new THREE.Vector3(0, 0, 0);
50 // gridHelper.rotation = new THREE.Euler(0, 0, 0);
51 // scene.add(gridHelper);
52 // var gridHelper2 = gridHelper.clone();
53 // gridHelper2.rotation = new THREE.Euler(Math.PI / 2, 0, 0);
54 // scene.add(gridHelper2);
55 // var gridHelper3 = gridHelper.clone();
56 // gridHelper3.rotation = new THREE.Euler(Math.PI / 2, 0, Math.PI / 2);
57 // scene.add(gridHelper3);
58 //
59 // var grid = new THREE.GridHelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#FFFFFF", "left");
60 // scene.add(grid);
61
62
63 var x = (boundbox.max.x - boundbox.min.x).toFixed(2);
64 var y = (boundbox.max.y - boundbox.min.y).toFixed(2);
65 var z = (boundbox.max.z - boundbox.min.z).toFixed(2);
66
67 console.log(x);
68 console.log(y);
69 console.log(z);
70 console.log(boundbox);
71
72 mesh.position.set(0,0,0);
73 // mesh.position.x = scene.position.x;
74 // mesh.position.y = scene.position.y ;
75 // mesh.position.z = scene.position.z;
76 scene.add(mesh);
77
78
79 renderer.clear();
80 renderer.render(scene, camera);
81 } );
82 loader.load( '3dfile/莫比乌斯环.STL' );
83 }
这里根据文件类型选择相对应的js引入即可 我加载的是STL模型 所以我引入的是 STLLoader.js
1 <script src="js/STLLoader.js"></script>
如果需要显示网格标尺 将 网格部分代码 去掉注释即可
下来是控制方法 (虽然我没有在显示代码里面写根据键盘按键放大缩小 但还是提供给大家 参考)
1 //控制
2 var effect;
3 var controls;
4 function initControl(){
5 effect = new THREE.AsciiEffect( renderer );
6 effect.setSize( WIDTH, HEIGHT );
7 controls = new THREE.TrackballControls( camera,renderer.domElement);
8 }
最后就是一个初始调用了
1 function animate() {
2 requestAnimationFrame( animate );
3 controls.update();
4 effect.render( scene, camera );
5 }
6
7 function threeStart() {
8 initThree();
9 initScene();
10 initCamera();
11 initLight();
12 initObject();
13 initControl();
14 animate();
15 }
附上完整代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>WebGL</title>
6 <script type="text/javascript" charset="utf-8" src="js/three.js"></script>
7 <script src="js/STLLoader.js"></script>
8 <script src="js/TrackballControls.js"></script>
9 <script src="js/AsciiEffect.js"></script>
10 <style>body{overflow:hidden;background:#eee}</style>
11 </head>
12 <script>
13 var WIDTH,HEIGHT;
14 var renderer;
15 function initThree() {
16 WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->
17 HEIGHT = document.documentElement.clientHeight/2;
18 /* 渲染器 */
19 renderer = new THREE.WebGLRenderer();
20 renderer.setSize(WIDTH , HEIGHT);
21 renderer.setClearColor(new THREE.Color(0x66666));
22 renderer.gammaInput = true;
23 renderer.gammaOutput = true;
24
25 document.body.appendChild(renderer.domElement);
26 }
27
28 /* 摄像头 */
29 var camera;
30 function initCamera() {
31 var VIEW_ANGLE = 45,
32 ASPECT = WIDTH / HEIGHT,
33 NEAR = 0.1,
34 FAR = 10000;
35 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
36 camera.position.set(20, 0, 0);
37 //设置视野的中心坐标
38 camera.lookAt(scene.position);
39 }
40
41 /* 场景 */
42 var scene;
43 function initScene() {
44 scene = new THREE.Scene();
45 }
46
47 /* 灯光 */
48 var light,light2,light3;
49 function initLight() {
50 //平行光
51 light = new THREE.DirectionalLight(0xFFFFFF);
52 light.position.set(0, 99, 0).normalize();
53 scene.add(light);
54 //环境光
55 light2 = new THREE.AmbientLight(0x999999);
56 scene.add(light2);
57 //点光源
58 light3 = new THREE.PointLight(0x00FF00);
59 light3.position.set(300, 0, 0);
60 scene.add(light3);
61 }
62
63 /* 显示对象 */
64 var cube;
65 function initObject(){
66 // ASCII file
67 var loader = new THREE.STLLoader();
68
69 loader.addEventListener( 'load', function ( event ) {
70 var loading = document.getElementById("Loading");
71 loading.parentNode.removeChild(loading);
72 var geometry = event.content;
73 //砖红色
74 var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
75 //纯黑色
76 // var material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'http://localhost:8080/textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true } ) ;
77 //粉色 带阴影
78 // var material = new THREE.MeshLambertMaterial( { color:0xff5533, side: THREE.DoubleSide } );
79 //灰色
80 // var material = new THREE.MeshLambertMaterial({color: 000000}); //材质设定 (颜色)
81
82
83 var mesh = new THREE.Mesh( geometry, material );
84
85 var center = THREE.GeometryUtils.center(geometry);
86 var boundbox=geometry.boundingBox;
87 var vector3 = boundbox.size(null);
88 var vector3 = boundbox.size(null);
89 console.log(vector3);
90 var scale = vector3.length();
91 camera.position.set(scale, 0, 0);
92 camera.lookAt(scene.position);
93 scene.add(camera);
94
95
96 //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。
97 var axisHelper = new THREE.AxisHelper(800);
98 scene.add(axisHelper);
99
100 //周围边框
101 bboxHelper = new THREE.BoxHelper();
102 bboxHelper.visible = true;
103 var meshMaterial = material;
104 mainModel = new THREE.Mesh(geometry, meshMaterial);
105 bboxHelper.update(mainModel);
106 bboxHelper.geometry.computeBoundingBox();
107 scene.add(bboxHelper);
108
109 //地板网格
110 // var gridHelper = new THREE.GridHelper(500, 40); // 500 is grid size, 20 is grid step
111 // gridHelper.position = new THREE.Vector3(0, 0, 0);
112 // gridHelper.rotation = new THREE.Euler(0, 0, 0);
113 // scene.add(gridHelper);
114 // var gridHelper2 = gridHelper.clone();
115 // gridHelper2.rotation = new THREE.Euler(Math.PI / 2, 0, 0);
116 // scene.add(gridHelper2);
117 // var gridHelper3 = gridHelper.clone();
118 // gridHelper3.rotation = new THREE.Euler(Math.PI / 2, 0, Math.PI / 2);
119 // scene.add(gridHelper3);
120 //
121 // var grid = new THREE.GridHelper(300, 40, 25, [0, 0, 1], 0x000055, 0.2, true, "#FFFFFF", "left");
122 // scene.add(grid);
123
124
125 var x = (boundbox.max.x - boundbox.min.x).toFixed(2);
126 var y = (boundbox.max.y - boundbox.min.y).toFixed(2);
127 var z = (boundbox.max.z - boundbox.min.z).toFixed(2);
128
129 console.log(x);
130 console.log(y);
131 console.log(z);
132 console.log(boundbox);
133
134 mesh.position.set(0,0,0);
135 // mesh.position.x = scene.position.x;
136 // mesh.position.y = scene.position.y ;
137 // mesh.position.z = scene.position.z;
138 scene.add(mesh);
139
140
141 renderer.clear();
142 renderer.render(scene, camera);
143 } );
144 loader.load( '3dfile/莫比乌斯环.STL' );
145 }
146
147 //控制
148 var effect;
149 var controls;
150 function initControl(){
151 effect = new THREE.AsciiEffect( renderer );
152 effect.setSize( WIDTH, HEIGHT );
153 controls = new THREE.TrackballControls( camera,renderer.domElement);
154 }
155
156 function animate() {
157 requestAnimationFrame( animate );
158 controls.update();
159 effect.render( scene, camera );
160 }
161
162 function threeStart() {
163 initThree();
164 initScene();
165 initCamera();
166 initLight();
167 initObject();
168 initControl();
169 animate();
170 }
171 </script>
172 <body onload="threeStart()">
173 <div id="Loading" style="color:#fff">Loading...</div>
174 </body>
175 </html>
哦 我的文件结构
如果想要所有文件的小伙伴 给我留言即可
补充一点,由于在显示模型的方法里我加入了 bboxHelper = new THREE.BoxHelper() 所以我们可以获取到模型的 X Y Z三轴的尺寸 也可以当作 模型的长宽高
转载地址:http://www.cnblogs.com/we-jack/p/8145457.html
three.js实现3D模型展示相关推荐
- js jquery 3D模型展示
本人主要用于商城商品的3D模型展示: 效果如下: 可旋转可放大的3D模型展示 用法介绍 (1)如果你想直接使用简单的展示功能那么已经有封装好的js在此 下载引用即可 https://downlo ...
- 通过three.js实现3d模型展示
首先,下载three.js 和 一个免费的gltf模型. Animals & Pets 3D models | Categories - Sketchfab Three.js-master下载 ...
- Unity 3D模型展示框架篇之项目整理
本项目将整合之前Unity程序基础小框架专栏在Unity 3D模型展示项目基础上进行整合,并记录了集成过程中对原脚本的调整过程.增加了Asset Bundle+ILRuntime热更新技术流程. 1. ...
- Android增强现实（三）-3D模型展示器
1.Android增强现实(一)-AR的三种方式(展示篇) 2.Android增强现实(二)-支持拖拽控制进度和伸缩的VrGifView 3.Android增强现实(三)-3D模型展示器 前言 前段时 ...
- Unity 3D模型展示框架篇之自由观察(Cinemachine)
本项目将整合之前Unity程序基础小框架专栏在Unity 3D模型展示项目基础上进行整合,并记录了集成过程中对原脚本的调整过程.增加了Asset Bundle+ILRuntime热更新技术流程. 在U ...
- Unity 3D模型展示之webGL平台展现
在之前的项目基础上我们已经打包后在PC端进行展示了.这篇文章主要介绍在切换到webGL上时效果展示不出来需要进行调整,特此记录一下. 1.平台切换 选择WebGL平台切换,没有的可以进行安装,安装之后 ...
- 嵌入式系统大作业——基于QT的3D模型展示
嵌入式系统大作业--基于QT的3D模型展示 写在前面 实验设备 实现内容 实现过程 在win10上利用SolidWorks软件对模型进行预处理: 编写代码实现功能: 效果演示 参考资料 写在前面 该大 ...
- Unity 3D模型展示框架篇之框架运用
本项目将整合之前Unity程序基础小框架专栏在Unity 3D模型展示项目基础上进行整合,并记录了集成过程中对原脚本的调整过程.增加了Asset Bundle+ILRuntime热更新技术流程. 效果 ...
- Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
最新文章
- ajax获取数据自动创建分页，支持自定义显示数据量以及分页数量
- chm文件无法正常显示
- 开源代码上新！6 份最新「Paper + Code」 | PaperDaily #17
- POJ1733,jzoj1779-Parity game(奇偶游戏)【带权并查集,离散化】
- shell python比较_shell中的条件判断以及与python中的对比
- 浏览器快捷键_浏览器快捷键，让你事半功倍
- [C++] - 面向对象-图书管理系统
- 将阿拉伯数字转换成中文大写的好算法
- 【JAVA SE】第八章 异常处理与抽象类
- Jquery调用C#后台方法
- 天上地下，马斯克和贝佐斯终有一战？
- 02:二分法求函数的零点
- QPainter绘制方法
- linux内核api作用,内存管理 – Linux内核API get_unmapped_area
- 12.3 让知识改变命运——《逆袭大学》连载
- 教你快速识别网络项目的骗术
- 阿里云海外云服务器5折起，新老用户均可选购（免备案）
- 字节跳动-后端开发岗最新春招面经分享，四面拿下，有惊无险
- U盘安装Windows10系统报错无法打开文件install.wim原因及解决办法
- c语言编程a4988驱动步进电机,A4988步进电机单片机驱动程序