Большинство популярных расширений 3D-форматов (.glb, .gltf, .fbx, .dae, .amf, ...) не являются стандартными. Типы MIME , браузеры уделяют особое внимание манипулированию этими файлы, пытаясь защитить пользователя от опасного поведения.
Таким образом, вам нужно будет настроить механизм вашего веб-сервера, чтобы он принимал эти расширения, иначе вы получите различные ошибки HTTP при их загрузке. .amf нет даже в этом списке, поэтому application/octet-stream - значение по умолчанию для всех остальных случаев. Неизвестный тип файла должен использовать этот тип.
Если вы используете сервер IIS из приложения ASP. Net, добавьте строки xml ниже в </system.webServer> узел вашего файла web.config :
<system.webServer>
...
<staticContent>
<remove fileExtension=".mtl" />
<mimeMap fileExtension=".mtl" mimeType="model/mtl" />
<remove fileExtension=".obj" />
<mimeMap fileExtension=".obj" mimeType="model/obj" />
<remove fileExtension=".glb" />
<mimeMap fileExtension=".glb" mimeType="model/gltf-binary" />
<remove fileExtension=".gltf" />
<mimeMap fileExtension=".gltf" mimeType="model/gltf+json" />
<remove fileExtension=".fbx" />
<mimeMap fileExtension=".fbx" mimeType="application/octet-stream" />
<remove fileExtension=".amf" />
<mimeMap fileExtension=".amf" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
Если вы используете сервер nginx, добавьте следующие строки в * 1072 Файл * .conf в объекте http:
http {
include /etc/nginx/mime.types;
types {
model/mtl mtl;
model/obj obj;
model/gltf+json gltf;
model/gltf-binary glb;
application/octet-stream fbx;
application/octet-stream amf;
}
...
}
Если вы используете сервер Apache, добавьте следующие строки в mime. types file:
model/mtl mtl
model/obj obj
model/gltf+json gltf
model/gltf-binary glb
application/octet-stream fbx
application/octet-stream amf
Для любого другого веб-сервера вы наверняка легко найдете, как установить конфигурацию типов MIME.
EDIT: В случае узла, просмотрите свой файл server.js не включает никаких ограничений для этих типов MIME, большинство популярных сценариев server.js включают ограничения для нестандартных типов MIME
EDIT2: Я ПОЛУЧИЛ как я и подозревал, это было связано с AMF типа MIME. Я опубликовал полное решение на GitHub
Но важные вещи, которые нужно изменить, - это следующие ниже.
Первый , измените app.js чтобы добавить тип MIME.
const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();
router.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
//__dirname : It will resolve to your project folder.
});
app.use('/models', express.static('models')) // add this!
app.use('/express', express.static('express')) // add this!
express.static.mime.define({ 'application/octet-stream': ['amf'] })
//add the router
app.use('/', router);
app.listen(process.env.port || 3000);
console.log('Running at Port 3000');
Второй , из-за недавних изменений в 3. js (23 апреля), использование загрузчика AMF, требует модуля jszip. Нет необходимости загружать его локально, вы можете использовать его по URL-адресу, как и другие файлы js. В моем проекте index. html находится в папке / express, поэтому мой путь к модели amf: ../models/rock.amf
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Index.html title</title>
</head>
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/jszip.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/AMFLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
var camera, scene, renderer;
init()
function init() {
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x999999));
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 500);
camera.up.set(0, 0, 1);
camera.position.set(0, -9, 6);
camera.add(new THREE.PointLight(0xffffff, 0.8));
scene.add(camera);
var grid = new THREE.GridHelper(25, 1.0, 0xffffff, 0x555555);
grid.rotateOnAxis(new THREE.Vector3(1, 0, 0), 90 * (Math.PI / 180));
scene.add(grid);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0x999999);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
/* NOW IT WORKS!!! */
var loader = new THREE.AMFLoader();
loader.load('../models/rook.amf', function (amfobject) { //'./models/rook.amf'
scene.add(amfobject);
render();
});
/* ^^^ this is the part not working */
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.target.set(0, 1.2, 2);
controls.update();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
Вы получили это ... введите описание изображения здесь