如何将fbx三维模型转成json格式在浏览器中运行加载?
网友回复
将obj文件或者fbx文件转为为 threejs 对应的json文件。 1. 安装node 2. 下载threejs源文件 https://github.com/mrdoob/three.js 3. cmd 切换到 .\three.js\utils\converters 目录下, 可以看到 threejs 提供的两个js文件,fbx2three.js obj2three.js 文件 4. 安装esm cmd 中执行 npm install esm 5. 将obj文件拷贝到目录下,执行命令 node -r esm obj2three.js ws.obj
然后就可以看到ws.json 文件了
threejs加载json三维模型在浏览器效果代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <style> </style> </head> <body> <script type="text/javascript"> var camera, scene, renderer, mesh, loader,controls; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); loader = new THREE.JSONLoader(); loader.load( "//repo.bfw.wiki/bfwrepo/threemodel/things/tv_monitor.json", function( geometry ) { mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() ); mesh.scale.set( 100, 100, 100 ); mesh.position.y = 0; mesh.position.x = 0; scene.add( mesh ); } ); var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.update(); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); controls.update(); // mesh.rotation.x += 0.05; renderer.render( scene, camera ); } </script> </body> </html>