threejs加載.Fbx .OBJ 3D模型文件
文件下載與啟動
在threejs官網(wǎng)下載threejs的文件,可以選擇直接下載，也可以跳轉(zhuǎn)到GitHub拉取
拉取下來的完整文件就是這個樣子
拉取成功后我們在本地安裝啟動服務，這樣就能很快速的查看threejs的各種例子了
npm i -g http-server
http-server
可以先看看官網(wǎng)里的例子，你想要的東西官方里面都有
開始開發(fā)
后期在開發(fā)的時候需要用到build和jsm文件，我們可以單獨放進demo里這樣比較方便我們使用
下面我們直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FBXLoader3D模型展示</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { FBXLoader } from './jsm/loaders/FBXLoader.js'
var container, stats, controls, camera, scene, renderer, light;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .2, 1000);
camera.position.set(0, 1.6, 0);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 20, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 20, 10);
light.castShadow = true;
scene.add(light);
var grid = new THREE.GridHelper(5, 20, 0x000000, 0x000000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
// model
var loader = new FBXLoader();
loader.load('fbx/demo1.fbx', function (object) {
undefined
object.traverse(function (child) {
undefined
if (child.isMesh) {
undefined
child.castShadow = true;
child.receiveShadow = true;
}
});
object.rotation.y = Math.PI / 2;
//object.rotation.x = -Math.PI/2 - Math.PI/12;
object.position.set(0, -0.15, 0.3);
console.log(object.position);
object.scale.set(.003, .003, .003);
scene.add(object);
});
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
window.addEventListener('resize', onWindowResize, false);
// stats
stats = new Stats();
container.appendChild(stats.dom);
}
function onWindowResize() {
undefined
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
undefined
requestAnimationFrame(animate);
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
會不會寫不重要，只要你會改就能出來，實在不行，就去看官網(wǎng)里的例子，邊學邊做，也會讓你快速學會的
補充一下我犯的錯誤與解決方式
像我要加載.fbx模型文件， 那就加載FBXLoader.js文。(.obj模型文件， 那就加載OBJLoader.js文件)
然后是OrbitControls.js 接收的camera參數(shù)
我們在引入文件的時候不能直接引入，會出現(xiàn)引入失敗
最好的引入方法是(看的官網(wǎng)的例子)
想看源碼的你可以打開FBXLoader.js文件看一下
最后的效果圖就是這樣的
文章來源：http://www.zghlxwxcb.cn/news/detail-404588.html
運行是沒有問題的，細節(jié)部分在不斷優(yōu)化。文章來源地址http://www.zghlxwxcb.cn/news/detail-404588.html
到了這里，關(guān)于threejs加載.Fbx .OBJ 3D模型文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
