本人第一篇博文，最近很多人咨詢此問題，發(fā)篇博文僅供參考！
系統(tǒng)點(diǎn)，從3dmax建模導(dǎo)出obj到threejs顯示過一遍。。。
做個(gè)簡單的cube：
導(dǎo)出選項(xiàng)：
檢查mtl文件（很多人導(dǎo)出的obj材質(zhì)貼圖路徑出錯(cuò)，參考我上圖導(dǎo)出選項(xiàng)）：
結(jié)構(gòu)：
index.html:
<!DOCTYPE html><html lang="zh-CN"><head> <title>Cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { margin: 0px; overflow: hidden; } </style></head><body> <script src="js/three.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/MTLLoader.js"></script> <script src="js/WebGL.js"></script> <script src="js/play.js"></script></body></html>play.js:
(function () { "use strict"; if (WEBGL.isWebGLAvailable() === false) { alert(WEBGL.getWebGLErrorMessage()); } var container, camera, scene, renderer, controls, clock; var init = function () { container = document.createElement('div'); container.id = 'container'; document.body.appendChild(container); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); scene = new THREE.Scene(); var gridHelper = new THREE.GridHelper(100, 10, 0x121c35, 0x121c35); scene.add(gridHelper); scene.add(new THREE.HemisphereLight(0xffffbb, 0x080820, 2)); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200); camera.position.set(0, 50, 50); controls = new THREE.OrbitControls(camera, container); controls.autoRotate = true; new THREE.MTLLoader().load('models/cube.mtl', function (materials) { materials.preload(); new THREE.OBJLoader().setMaterials(materials).load('models/cube.obj', function (object) { scene.add(object); animate(); }); }); window.addEventListener('resize', onWindowResize, false); }; window.onload = init(); function onWindowResize() { var w = window.innerWidth, h = window.innerHeight; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); } function animate() { requestAnimationFrame(animate); render(); } function render() { controls.update(); renderer.render(scene, camera); }})();前面的都很基礎(chǔ)，干貨在這里，也就是一些細(xì)節(jié)部分，你們苦苦百度不得的東西。哈哈哈哈、、、、
第一種失敗原因：
由于瀏覽器same origin policy（同源策略）的安全限制，從本地文件系統(tǒng)載入外部文件將會(huì)失敗，同時(shí)拋出安全性異常。
解決辦法有二：
1.運(yùn)行一個(gè)本地的服務(wù)器，最簡單的下個(gè)nginx，本文不講nginx，如需學(xué)習(xí)，自行百度。
2.打開file協(xié)議（chrome）
--allow-file-access-frome-files
桌面鼠標(biāo)右擊chrome，單擊屬性，在“目標(biāo)”后面空一個(gè)填入以上代碼，忽略我截圖的-incognito，想知道自己百度。
然后點(diǎn)擊應(yīng)用，確定。
你如果以為完事大吉，那就錯(cuò)了！你雙擊index.html試試，還是報(bào)同樣的錯(cuò)誤，你需要拖動(dòng)index.html到桌面chrome快捷方式打開、、、
第二種失敗原因：
中文編碼導(dǎo)致找不到貼圖文件，出現(xiàn)下圖錯(cuò)誤。
這個(gè)原因是因?yàn)槲业馁N圖用了中文名稱，所以、、、嘿嘿嘿
修改cube.mtl文件編碼為utf-8、、、
最后運(yùn)行界面如下：
總結(jié)一下：
上述我盡所能的列舉出一些關(guān)鍵出錯(cuò)地方，愿讀者能解決問題，如果你還是不能成功運(yùn)行，那么請檢查自己的代碼，如果還不行，留言我們一起解決。。。
昨天寫的匆忙 ，居然忘記寫，max要使用默認(rèn)的掃描線渲染器下的標(biāo)準(zhǔn)材質(zhì)、、、
如果你那邊是vray的材質(zhì)，是不能直接使用的，包括在其他的引擎當(dāng)中都不可以，你需要將其烘焙。具體做法后面再說了、、、
聯(lián)系客服
