AR - three.js加載fbx

示例：

https://threejs.org/examples/#webgl_loader_fbx_nurbs

示例文件結構：

加載步驟：

1. 初始化渲染器 （可以放在初始化fbx模型之後）

	renderer = new THREE.WebGLRenderer({ antialias: true，alpha: true }); // 初始化渲染器
	renderer.setPixelRatio(window.devicePixelRatio); // 設置渲染器像素比
	renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器大小
	// renderer.setSize(640, 480);
	renderer.setClearColor(0xFFFFFF, 1.0); //設置渲染器背景顏色
	// renderer.setClearColor(new THREE.Color('lightgrey'), 0);
	document.body.appendChild(renderer.domElement); // 嵌入畫布到頁面中

2. 初始化相機

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
	camera.position.set(2, 18, 28);

3. 初始化場景

	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xf0f0f0); // 設置背景
	
	// 添加底面網格
	var gridHelper = new THREE.GridHelper(28, 28, 0x303030, 0x303030);
	scene.add(gridHelper);
	
	// 添加x/y/z座標線
	let axesHelper = new THREE.AxesHelper(50)
	scene.add(axesHelper)

4. 初始化場景光線

	light = new THREE.AmbientLight(0x00ff00); // 環境光
	scene.add(light);
	
	light = new THREE.HemisphereLight(0xffffff, 0x444444);
	light.position.set(0, 1, 0);
	scene.add(light);
	
	light = new THREE.DirectionalLight(0xffffff); // 方向光
	light.position.set(0, 1, 0);
	scene.add(light);

5. 初始化fbx模型

	var loader = new FBXLoader();
	loader.load('models/fbx/nurbs.fbx', function (object) {
		scene.add(object);
	});

6. 初始化控制器

	controls = new OrbitControls(camera, renderer.domElement);
	controls.target.set(0, 12, 0);
	controls.update();

7. 監聽頁面縮放，重新設置渲染器（畫布）大小

	window.addEventListener('resize', onWindowResize, false);
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

8. 渲染模型到頁面上

	function animate() {
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
		// stats.update();
	}

需要加載的js：

• three.js：實現模型的3維顯示，初始化渲染器（畫布）、相機、場景、場景光線。
• FBXLoader.js：初始化fbx模型。
• OrbitControls.js：模型控制器，用於拖拽、旋轉、縮放模型。