#javascript #three.js #gltf
Вопрос:
Я пытаюсь загрузить GLTF в Three.js но это не отображается на экране. Я новичок в Three.js, так что я перепробовал много способов, но ничего не работает. В окне разработчика Chrome нет ошибок, только белый экран. Кто-нибудь знает решение?
Кроме того, мой файл gltf отлично открывается в программе просмотра gltf.
<!DOCTYPE html>
<html>
<head>
<title>gltfExample01</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/glTFLoader.js" />
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(renderer.domElement);
const loader = new THREE.GLTFLoader();
loader.load(
// resource URL
'./scene01.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
}
);
function render() {
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
}
window.onload = init
</script>
</body>
</html>
пс. Я прикреплю фотографии экрана chrome.
Экран Chrome с элементами отображения
Хромированный экран, показывающий консоль
пс. Я прикреплю содержимое файла glTF на всякий случай.
{
"asset": {
"version": "2.0",
"generator": "THREE.GLTFExporter"
},
"scenes": [
{
"name": "Scene",
"nodes": [
0,
1,
4
]
}
],
"scene": 0,
"nodes": [
{
"name": "AmbientLight"
},
{
"name": "AmbientLight"
},
{
"matrix": [
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
2.3733431490050236,
0.5964163550565602,
5.436433345955958,
1
],
"name": "Box",
"mesh": 0
},
{
"matrix": [
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
2.6066889361693835,
0.5777642421996207,
4.790873598688476,
1
],
"name": "Box",
"mesh": 1
},
{
"matrix": [
1,
0,
0,
0,
0,
1,
0,
0,
0,
0,
1,
0,
1.577277964727821,
-0.2596547250878648,
4.688496925702815,
1
],
"name": "Box",
"mesh": 0,
"children": [
2,
3
]
}
],
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 288,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 576,
"byteLength": 192,
"target": 34962,
"byteStride": 8
},
{
"buffer": 0,
"byteOffset": 768,
"byteLength": 72,
"target": 34963
},
{
"buffer": 0,
"byteOffset": 840,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 1128,
"byteLength": 288,
"target": 34962,
"byteStride": 12
},
{
"buffer": 0,
"byteOffset": 1416,
"byteLength": 192,
"target": 34962,
"byteStride": 8
},
{
"buffer": 0,
"byteOffset": 1608,
"byteLength": 72,
"target": 34963
}
],
"buffers": [
{
"byteLength": 1680,
"uri": "data:application/octet-stream;base64,AAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/AAAAPwAAAL8AAAA/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAvwAAAL8AAAC/AAAAvwAAAL8AAAA/AAAAvwAAAD8AAAC/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAvwAAAL8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAL8AAAC/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAACAAEAAgADAAEABAAGAAUABgAHAAUACAAKAAkACgALAAkADAAOAA0ADgAPAA0AEAASABEAEgATABEAFAAWABUAFgAXABUAAAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/AAAAPwAAAL8AAAA/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAvwAAAL8AAAC/AAAAvwAAAL8AAAA/AAAAvwAAAD8AAAC/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAvwAAAL8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAD8AAAA/AAAAPwAAAD8AAAA/AAAAvwAAAL8AAAA/AAAAPwAAAL8AAAA/AAAAPwAAAD8AAAC/AAAAvwAAAD8AAAC/AAAAPwAAAL8AAAC/AAAAvwAAAL8AAAC/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAIA/AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAgD8AAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AACAPwAAgD8AAAAAAAAAAAAAgD8AAAAAAAACAAEAAgADAAEABAAGAAUABgAHAAUACAAKAAkACgALAAkADAAOAA0ADgAPAA0AEAASABEAEgATABEAFAAWABUAFgAXABUA"
}
],
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 24,
"max": [
0.5,
0.5,
0.5
],
"min": [
-0.5,
-0.5,
-0.5
],
"type": "VEC3"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 24,
"max": [
1,
1,
1
],
"min": [
-1,
-1,
-1
],
"type": "VEC3"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 24,
"max": [
1,
1
],
"min": [
0,
0
],
"type": "VEC2"
},
{
"bufferView": 3,
"componentType": 5123,
"count": 36,
"max": [
23
],
"min": [
0
],
"type": "SCALAR"
},
{
"bufferView": 4,
"componentType": 5126,
"count": 24,
"max": [
0.5,
0.5,
0.5
],
"min": [
-0.5,
-0.5,
-0.5
],
"type": "VEC3"
},
{
"bufferView": 5,
"componentType": 5126,
"count": 24,
"max": [
1,
1,
1
],
"min": [
-1,
-1,
-1
],
"type": "VEC3"
},
{
"bufferView": 6,
"componentType": 5126,
"count": 24,
"max": [
1,
1
],
"min": [
0,
0
],
"type": "VEC2"
},
{
"bufferView": 7,
"componentType": 5123,
"count": 36,
"max": [
23
],
"min": [
0
],
"type": "SCALAR"
}
],
"materials": [
{
"pbrMetallicRoughness": {
"baseColorFactor": [
0.3411764705882353,
0.23921568627450981,
0.23921568627450981,
1
],
"metallicFactor": 0.5,
"roughnessFactor": 0.5
},
"emissiveFactor": [
0.6784313725490196,
0.2823529411764706,
0.2823529411764706
]
},
{
"pbrMetallicRoughness": {
"metallicFactor": 0,
"roughnessFactor": 1
},
"emissiveFactor": [
0.16862745098039217,
1,
0
]
}
],
"meshes": [
{
"primitives": [
{
"mode": 4,
"attributes": {
"POSITION": 0,
"NORMAL": 1,
"TEXCOORD_0": 2
},
"indices": 3,
"material": 0
}
]
},
{
"primitives": [
{
"mode": 4,
"attributes": {
"POSITION": 4,
"NORMAL": 5,
"TEXCOORD_0": 6
},
"indices": 7,
"material": 1
}
]
}
]
}
А это изображение моего файла glTF.
Комментарии:
1. Является ли ваш файл gltf текстурированным и/или с материалами? Возможно, вы видите пустой экран только потому, что ваша сетка добавлена с белым материалом по умолчанию. Вы можете попробовать назначить материал сетке во время ее загрузки.
2. О… Все материалы окрашены в красный цвет как материал MESHLAMBERTMATERIAL. Я создал и экспортировал этот файл GLTF, используя редактор Three.js домашняя страница.
3. Вы уверены, что ваша сцена работает нормально? Я имею в виду, если вы добавите простой куб, правильно ли он отображается? С другой стороны, вы уверены, что ваш обратный вызов загрузки будет вызван? Если вы печатаете что-то для консоли сразу после scene.add(gltf.scene), печатается ли это? Я спрашиваю об этом, потому что процедура загрузки gltf кажется мне правильной.
4. Я проверил, как вы сказали, и это не работает. Я попытался добавить его после настройки camera.position, но это тоже не сработало. В чем проблема?
5. На самом деле, я только что перепробовал весь ваш код, и он отлично работает, я вижу gltf и вижу любую сетку, которую я добавляю в сцену… Вы уверены, что Chrome вас ни о чем не предупреждает? Я вижу предупреждение об устаревшей функции при запуске вашего кода.