Как импортировать 3D модель и крутить ее в three.js?

Question

[Stepan Sidorov]

Вот недавно начал изучать JavaScript, а точнее 3d отображение в нем.
У меня что-то получилось, отобразил крутящийся квадрат.
И попытался уже импортировать и крутить 3d модели которые я сам нарисовал, но не получается.
вот мой код:

<script src="build/three.js"></script>
		<script>
			function keyes(){
				//это всего лишь движение камеры, это для начала
				addEventListener("keydown", function(event) {
                    if (event.keyCode == 87){
                        camera.position.z = camera.position.z + 0.001;//вперед
                    }
                    if (event.keyCode == 83){
                        camera.position.z = camera.position.z - 0.001;//назад
                    }
                    if (event.keyCode == 65){
                        camera.position.x = camera.position.x + 0.001;//налево
                    }
                    if (event.keyCode == 68){
                        camera.position.x = camera.position.x - 0.001;//направо
                    }

                    });	
			}
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry();
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );
            camera.position.z = 5;
			var animate = function () {
				requestAnimationFrame( animate );
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                keyes();

				renderer.render( scene, camera );
			};

			animate();

Камера передвигается по нажатию клавиш w,a,s,d.
Кто-нибудь может в ответах написать пример как бы в этом коде импортировать 3d модель, и вращать ее?

Answer 1

[Ivan Bogachev]

Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.

Comments

[Stepan Sidorov]

Я пробовал сделать так как в этой статье, но почему то просто ничего не отображалось.
Можете добавить в код который я скинул строки которые бы импортировали 3d модель, чтоб я смог задать вопросы по коду.

[Ivan Bogachev]

Stepan Sidorov,

Я пробовал сделать так как в этой статье, но почему то просто ничего не отображалось.

Пример из статьи в порядке. Возможно вы забыли, что для корректной работы ajax запросов нужен хотя бы минимальный сервер - без него ни модель, ни текстуры не будут подгружаться.

[Stepan Sidorov]

Ivan Bogachev, Нет, не знал. Что за сервер? я раньше считал что нужна просто библиотека которая упростит работу с 3D изображениями.

[Ivan Bogachev]

Stepan Sidorov, подойдет любой сервер, в примере на гитхабе предлагается простейший вариант из пакета http-server. Вы можете использовать другой. Но он должен быть. Из соображений безопасности ajax-запросы к локальным файлам браузер просто не пропустит, а если они будут на сервере - пропустит. А Three.js тут ни при чем, это особенности работы браузеров.

[Stepan Sidorov]

Ivan Bogachev, А можно же запустить Django? он же будет как сервер.

[node_js]

Ivan Bogachev, минус вашего примера, что только один формат читает придётся подключать много скриптов ещё, и допиливать пример.