分享一个网页展示NX模型给客户的方案
之前就在论坛里看到有人问，不想直接把NX文件发给客户，但是又要向用户展示模型，现在就给大家介绍一种方案。要用到前端JS的技术，用的就threejs，现在很多网站上能显示模型大多数都是用的这个技术。涉及的内容比较多，还得有一台自己的服务器让客户访问，客户才能直接访问网址或者IP在线查看，不过企业里这些钱可以让老板出的吧。
先给大家展示下吧，如果感兴趣的人多，后面可以慢慢写教程给大家。
比如我要把这个模型放到网页上
本地搭了一个网址，展示效果如下。
随便改了个颜色后，把模型移到Y轴朝上的方位，然后导出GLB格式，他这边也写了，这个就是给拓展现实查看器使用的格式。
然后将模型用js展示到网页上就OK了
js的代码很少，这边直接发上来吧，只要装一个threejs。
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
//场景
const scene = new THREE.Scene()
//相机
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
)
//渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器宽高比
renderer.setSize(window.innerWidth, window.innerHeight)
//加到body里
document.body.appendChild(renderer.domElement)
const gltfLoader = new GLTFLoader()
//模型解析器 解析被压缩的glb文件
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("./draco/")
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load(
"./model/body.glb",
(gltf) => {
console.log("------------------------")
console.log(gltf)
scene.add(gltf.scene)
}
)
const rgbeLoader = new RGBELoader()
rgbeLoader.load("./hdr/startup.hdr", (envMap) => {
envMap.mapping = THREE.EquirectangularReflectionMapping
scene.environment = envMap
})
//scene.add(cube)
//相机位置
camera.position.z = 5
//控制器
const controls = new OrbitControls(camera, renderer.domElement)
//逐帧更新画面
function animate() {
controls.update()
//cube.rotation.x += 0.01
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
animate()
window.addEventListener("resize", () => {
//重置渲染器宽高比
renderer.setSize(window.innerWidth, window.innerHeight)
//重置相机宽高比
camera.aspect = window.innerWidth / window.innerHeight
//更新相机投影矩阵
camera.updateProjectionMatrix()
})
3D 的PDF可以不 啊 {:3_54:}{:3_54:}{:3_54:} 太棒了吧，🙋我要学习 STL文件是否有风险? 太棒了吧 厉害厉害 客户可以查看效果确没有参数对吧，厉害 这就是、专业！ 我记得UG可以输出3D版本的PDF文件来着 看到没，这，就叫专业
页:
[1]
2