分享一个网页展示NX模型给客户的方案

有情感的NPC

之前就在论坛里看到有人问，不想直接把NX文件发给客户，但是又要向用户展示模型，现在就给大家介绍一种方案。要用到前端JS的技术，用的就threejs，现在很多网站上能显示模型大多数都是用的这个技术。

涉及的内容比较多，还得有一台自己的服务器让客户访问，客户才能直接访问网址或者IP在线查看，不过企业里这些钱可以让老板出的吧。

先给大家展示下吧，如果感兴趣的人多，后面可以慢慢写教程给大家。

比如我要把这个模型放到网页上


本地搭了一个网址，展示效果如下。


随便改了个颜色后，把模型移到Y轴朝上的方位，然后导出GLB格式，他这边也写了，这个就是给拓展现实查看器使用的格式。


然后将模型用js展示到网页上就OK了

js的代码很少，这边直接发上来吧，只要装一个threejs。

1. import * as THREE from "three"
   
2. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
   
3. import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
   
4. import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
   
5. import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
   
6. 
   
7. //场景
   
8. const scene = new THREE.Scene()
   
9. 
   
10. //相机
    
11. const camera = new THREE.PerspectiveCamera(
    
12.   45,
    
13.   window.innerWidth / window.innerHeight,
    
14.   0.1,
    
15.   1000
    
16. )
    
17. 
    
18. //渲染器
    
19. const renderer = new THREE.WebGLRenderer()
    
20. //设置渲染器宽高比
    
21. renderer.setSize(window.innerWidth, window.innerHeight)
    
22. //加到body里
    
23. document.body.appendChild(renderer.domElement)
    
24. 
    
25. const gltfLoader = new GLTFLoader()
    
26. 
    
27. //模型解析器 解析被压缩的glb文件
    
28. const dracoLoader = new DRACOLoader()
    
29. 
    
30. dracoLoader.setDecoderPath("./draco/")
    
31. 
    
32. gltfLoader.setDRACOLoader(dracoLoader)
    
33. 
    
34. gltfLoader.load(
    
35.   "./model/body.glb",
    
36.   (gltf) => {
    
37.     console.log("------------------------")
    
38.     console.log(gltf)
    
39.     scene.add(gltf.scene)
    
40.   }
    
41. )
    
42. 
    
43. const rgbeLoader = new RGBELoader()
    
44. rgbeLoader.load("./hdr/startup.hdr", (envMap) => {
    
45.   envMap.mapping = THREE.EquirectangularReflectionMapping
    
46.   scene.environment = envMap
    
47. })
    
48. //scene.add(cube)
    
49. //相机位置
    
50. camera.position.z = 5
    
51. 
    
52. //控制器
    
53. const controls = new OrbitControls(camera, renderer.domElement)
    
54. 
    
55. //逐帧更新画面
    
56. function animate() {
    
57.   controls.update()
    
58.   //cube.rotation.x += 0.01
    
59.   requestAnimationFrame(animate)
    
60.   renderer.render(scene, camera)
    
61. }
    
62. 
    
63. animate()
    
64. 
    
65. window.addEventListener("resize", () => {
    
66.   //重置渲染器宽高比
    
67.   renderer.setSize(window.innerWidth, window.innerHeight)
    
68.   //重置相机宽高比
    
69.   camera.aspect = window.innerWidth / window.innerHeight
    
70.   //更新相机投影矩阵
    
71.   camera.updateProjectionMatrix()
    
72. })

复制代码

不忘初心王洪伟

大泥神

太棒了吧，🙋‍我要学习

towercqu

3D 的PDF可以不 啊

topckey

STL文件是否有风险?

周龙祥

太棒了吧 厉害厉害

CXC70076789

客户可以查看效果确没有参数对吧，厉害

阿瑟如果

这就是、专业！