Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.06.2015, 15:04   #1
artiom4356
Пользователь
 
Регистрация: 16.08.2013
Сообщений: 78
Сообщение Как загрузить OBJ модель в three.js?

Хотелось бы сделать как тут http://threejs.org/examples/#webgl_loader_obj .Перенёс весь код к себе, и заранее исправил пути к файлам. Но ничего не работает. Ругаеца так.

XMLHttpRequest cannot load file:///ПУТЬ ДО/male02.obj. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

и так

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load file:///C:/ПУТЬ ДО/male02.obj'.

Говорит что проблема в библиотеке three.js:10557 однако все другие скрипт работают нормально.
В общем помогите
Помочь!=Сделать за тебя
artiom4356 вне форума Ответить с цитированием
Старый 14.06.2015, 15:36   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Нужно запускать под веб-серером
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.06.2015, 16:07   #3
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

баян ж, не?
http://programmersforum.ru/showthread.php?t=278341

В вики three.js, кстати, есть про это
https://github.com/mrdoob/three.js/w...things-locally

Если нужен только three.js и не охота ставить/настраивать веб-сервер типа Апача, то можно взять например http://cesanta.com/mongoose.shtml
Просто положить ехе в папку с файлами и запустить, оно запустится и откроет страницу в браузере со списком файлов.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

Последний раз редактировалось Alex11223; 14.06.2015 в 16:14.
Alex11223 вне форума Ответить с цитированием
Старый 14.06.2015, 16:44   #4
artiom4356
Пользователь
 
Регистрация: 16.08.2013
Сообщений: 78
Сообщение

Серовно не хочет. И да я работаю с Open Server. Там вроде всё есть да и отображает нармально без багов каких либо. Так что с этим проблем нет. И да вот то что он выдаёт теперь. Я до сих пор не могу понят что ему не нравица. Вот ошибки..... и да теперь их стало место двух три.
1)Uncaught TypeError: renderer.setPixelRatio is not a function (index):126
Код ошибки:
renderer.setPixelRatio( window.devicePixelRatio );

2)Uncaught TypeError: undefined is not a function OBJLoader.js:346
Код ошибки:
buffergeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( geometry.vertices ), 3 ) );

3)Failed to load resource: net::ERR_CONNECTION_RESET Ссылка на картинку http://threejs.org/examples/textures/UV_Grid_Sm.jpg
Помочь!=Сделать за тебя

Последний раз редактировалось artiom4356; 14.06.2015 в 16:53.
artiom4356 вне форума Ответить с цитированием
Старый 14.06.2015, 17:10   #5
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Что "серовно"? Это другие ошибки, просто тогда видимо не доходило до этого, а останавливалось на загрузке файла.

Первая ошибка говорит, что у renderer'а нет такой функции, разбирайтесь как его создаете и зачем вызываете.

Вторая видимо где-то внутри OBJLoader'а, сложно угадать причину по одной строчке, может ему модель не нравится, или неправильно передаете что-то.

Про третью вангую, что что-то не так с адресом загрузки. Код-то покажите.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

Последний раз редактировалось Alex11223; 14.06.2015 в 17:32.
Alex11223 вне форума Ответить с цитированием
Старый 14.06.2015, 17:49   #6
artiom4356
Пользователь
 
Регистрация: 16.08.2013
Сообщений: 78
Сообщение

Файл male02.obj, three.js, OBJLoader.js лежат в одной папке. Если что можете перейти по ссылке выше там точно такой же код.
Код:
<!DOCTYPE html>
<html>
	<head>
		<title>three.js webgl - loaders - OBJ loader</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 {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
		</style>
	</head>

	<body>
		<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test
		</div>

		<script src="three.js"></script>
		<script src="OBJLoader.js"></script>

		<script>

			var container;

			var camera, scene, renderer;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;


			init();
			animate();


			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.z = 100;

				// scene

				scene = new THREE.Scene();

				var ambient = new THREE.AmbientLight( 0x101030 );
				scene.add( ambient );

				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
				directionalLight.position.set( 0, 0, 1 );
				scene.add( directionalLight );

				// texture

				var manager = new THREE.LoadingManager();
				manager.onProgress = function ( item, loaded, total ) {

					console.log( item, loaded, total );

				};

				var texture = new THREE.Texture();

				var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round(percentComplete, 2) + '% downloaded' );
					}
				};

				var onError = function ( xhr ) {
				};


				var loader = new THREE.ImageLoader( manager );
				loader.load( 'http://threejs.org/examples/textures/UV_Grid_Sm.jpg', function ( image ) {

					texture.image = image;
					texture.needsUpdate = true;

				} );

				// model

				var loader = new THREE.OBJLoader( manager );
				loader.load( 'male02.obj', function ( object ) {

					object.traverse( function ( child ) {

						if ( child instanceof THREE.Mesh ) {

							child.material.map = texture;

						}

					} );

					object.position.y = - 80;
					scene.add( object );

				}, onProgress, onError );

				//

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX ) / 2;
				mouseY = ( event.clientY - windowHalfY ) / 2;

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				render();

			}

			function render() {

				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;

				camera.lookAt( scene.position );

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
Вложения
Тип файла: zip Модель,загрузчик.zip (147.0 Кб, 22 просмотров)
Помочь!=Сделать за тебя

Последний раз редактировалось artiom4356; 14.06.2015 в 17:52.
artiom4356 вне форума Ответить с цитированием
Старый 14.06.2015, 18:37   #7
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Текстуру тоже на сервер сохраните и путь поменяйте соответственно.

Или еще вроде можно поставить
Код:
THREE.ImageUtils.crossOrigin = '';
чтоб и так работало. Точнее еще кроме этого надо, чтоб сервер отдающий картинку отправлял какой-то заголовок, что не все делают. С imgur.com вроде работает.
http://stackoverflow.com/questions/2...s-domain-image
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 15.06.2015, 09:10   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Ну это CORS надо настраивать, проще у себя текстуры хранить
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Flash. Как повернуть 3d модель ? bill Общие вопросы Web 1 19.09.2014 18:51
сделать программу на C++, которая переводит цветовую модель RGB в модель HSV Kabahol Помощь студентам 5 14.03.2014 19:05
Собрать *.obj из *.c и использовать, собственно как? Человек_Борща Софт 2 27.08.2013 23:43
как указать линкеру Visual C++ 6.0 два obj-файла Zap Общие вопросы C/C++ 0 02.05.2010 17:45
3d редактор, где взять и как загрузить модель devi409 Мультимедиа в Delphi 19 01.04.2009 09:23