Пытаюсь загрузить модель на сцену следуя уроку на habr (https://habr.com/ru/post/433876/), модель скачал отсюда (https://www.cgtrader.com/items/2663635/download-page) и получаю абсолютно белый контейнер canvas
Вот листинг скрипта:
let SCENE;
let CAMERA;
let RENDERER;
let LOADING_MANAGER;
let IMAGE_LOADER;
let OBJ_LOADER;
let CONTROLS;
let MOUSE;
let TEXTURE;
let OBJECT;
function initScene() {
SCENE = new THREE.Scene();
// initLights();
initCamera();
initRenderer();
initLoaders();
// initControls();
loadModel('./Audi_RS_6_Avant.obj', {x: .3, y: .3, z: .3})
animate();
document.getElementById("scene").appendChild(RENDERER.domElement);
// render();
}
function initLights() {
const ambient = new THREE.AmbientLight(0xffffff, 0.1);
SCENE.add(ambient);
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, 2, 1);
SCENE.add(directionalLight);
}
function initCamera() {
CAMERA = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200);
CAMERA.position.z = -10;
}
function initRenderer() {
RENDERER = new THREE.WebGLRenderer({ alpha: true });
RENDERER.setPixelRatio(window.devicePixelRatio);
RENDERER.setSize(window.innerWidth, window.innerHeight);
}
function initLoaders() {
LOADING_MANAGER = new THREE.LoadingManager();
IMAGE_LOADER = new THREE.ImageLoader(LOADING_MANAGER);
OBJ_LOADER = new THREE.OBJLoader(LOADING_MANAGER);
}
function initControls() {
CONTROLS = new THREE.OrbitControls(CAMERA);
CONTROLS.minPolarAngle = Math.PI * (1 / 4);
CONTROLS.maxPolarAngle = Math.PI * (3 / 4);
CONTROLS.update();
}
function loadModel(model, position) {
OBJ_LOADER.load(model, (object) => {
// object.scale.x = position.x;
// object.scale.y = position.y;
// object.scale.z = position.z;
object.rotation.x = -Math.PI / 2;
object.position.y = -30;
OBJECT = object;
SCENE.add(OBJECT);
});
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
CAMERA.lookAt(SCENE.position);
RENDERER.render(SCENE, CAMERA);
}
initScene();
// render();
<script src='https://unpkg.com/three@0.99.0/build/three.min.js'></script>
<script src='https://unpkg.com/three@0.99.0/examples/js/loaders/OBJLoader.js'></script>
<script src='https://unpkg.com/three@0.99.0/examples/js/controls/OrbitControls.js'></script>
<div id="scene"></div>
Итого я склоняюсь к 2 вариантам проблемы:
- Неправильная настройка камеры (позиция камеры, направление, не знаю)
- Неправильная настройка модели (позиция модели, масштаб или освещение)
- Насчет света: Как я понял, при отсутствии освещения пространство рендера должно быть черным (или я что-то не так понял), но я отключил все источники света
Подскажите где и что я делаю неправильно и как будет правильнее
document.getElementById("scene").appendChild(RENDERER.domElement);
не выполняется, так как начинает работать цикл анимации.animate()
надо бы вызывать в самом конце фукнцииinitScene()
.document.getElementById("scene").appendChild(RENDERER.domElement);
иanimate()
- все тот же белый экран. ЗасунулappendChild
в функциюinitRenderer()
- ничего. В чем может быть проблема?