嵌入帆软报表的3D模型数据可视化展示！展示效果和交互性效果有所提高。

基本原理是利用Javascript和Three.js库实现3D模型的Web端展示，包括模型的自动旋转展示、模型部件分离、模型“爆炸”、模型部件属性更改等，再将相应的Html文件通过网页框的方式嵌入帆软报表，最后将嵌入的Html文件作为子页面，完成和父页面也就是帆软报表的通讯，达到点击相应的模型部件，报表中的图表信息进行相应显示和隐藏的效果。效果如下图所示，感兴趣可以看看。

报表整体页面

模型“爆炸”

模型部件选取

部件属性更改，例如颜色

 

3D帆软展示.zip (155.32 K)大家要的模板， 报表中是一些简单图表，三维模型是通过网页框控件添加到报表中的。

大家问的lvxuyue.html文件是三维模型的展示实现文件，大家可以去参考Three.js官方库，我的编程水平较低，程序实在写的不够好，就先不放给大家了，不好意思！

大佬，可以看看模板吗

大佬，模板发出来，让我们这些菜鸟学习学习

求模版学习

大佬，求指教

<p><span id="attachment_mce_1" class="attachment" contenteditable="false"><img src="https://unpkg.com/@npkg/tinymce-plugins/plugins/attachment/icons/file_type_zip.svg" width="30px" /><a href="https://shequ-oss.obs.cn-east-2.myhuaweicloud.com/shequ_forum/file/d536eb0e08ee3ee4cdb8c8402d738111.zip">3D帆软展示.zip (155.32 K)</a></span></p>

大佬，可以上传一下模板看看吗？

666，膜拜

高手

大哥,感谢您的分享,另另外麻烦给一下lvxuyue子报表文件学习下

楼主，请教一下，我用three.js成功的加载了一个正20面体（var geometry = new THREE.IcosahedronGeometry(50)）作为背景，但是我加载其它模型时却无法看到模型，相关的库已经引入，不知道为啥，请楼主指点，代码如下：

1. var scene = new THREE.Scene();
2.    
3. //  正20面体
4. var geometry = new THREE.IcosahedronGeometry(100);
5. var material = new THREE.MeshLambertMaterial({
6.   color: 0xbf1d2d,
7. specular:0x4488ee,
8. shininess:12
9. });
10. var mesh = new THREE.Mesh(geometry, material);
11. scene.add(mesh);
12.  
13. /*STL模型
14.            var loader = new THREE.STLLoader();
15.             loader.load('stl/demo.stl',function (geometry) {
16.               // geometry.scale(0.5,0.5,0.5);
17.               // geometry.center();
18.               var material = new THREE.MeshLambertMaterial({
19.                 color: 0x0000ff,
20.               });
21.               var mesh = new THREE.Mesh(geometry, material);
22.               scene.add(mesh);
23.             })
24. //STL模型end
25. */
26. var point = new THREE.PointLight(0xffffff);
27. point.position.set(400, 200, 300);
28. scene.add(point);
29. var ambient = new THREE.AmbientLight(0x444444);
30. scene.add(ambient);
31.  
32. var width = window.innerWidth;
33. var height = window.innerHeight;
34. var k = width / height;
35. var s = 200;
36. var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
37. camera.position.set(200, 300, 200);
38. camera.lookAt(scene.position);
39.  
40. var renderer = new THREE.WebGLRenderer();
41. renderer.setSize(width, height);
42. renderer.setClearColor(0x000000, 1);
43. document.body.appendChild(renderer.domElement);
44. let T0 = new Date();
45. function render() {
46.     let T1 = new Date();
47.     let t = T1-T0;
48.     T0 = T1;
49.     requestAnimationFrame(render);
50.     renderer.render(scene,camera);
51.     mesh.rotateY(0.001*t);
52. }
53. render();

复制代码

 

加载正20面体效果