Задать вопрос
@Kreep74
Начинающий программист
javascript

Как исправить ошибку при использовании js библиотек?

Не могу понять в чем ошибка. Пытаюсь запустить виртуальный 3D тур. Использую библиотеки Panolens.js и Three.js.
Если использую библиотеки из папки:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, shrink-to-fit=no">
	<title>Panorama</title>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="js/panolens.min.js"></script>
    <script src="js/three.min.js"></script>
    <script>
      const panorama = new PANOLENS.ImagePanorama( 'img/photo.jpg' );
      const viewer = new PANOLENS.Viewer( { output: 'console' } );
      viewer.add( panorama );
    </script>
</body>
</html>

то ошибка
5d82503087503307530230.png
Если из интернета:
<script src="https://pchen66.github.io/js/three/three.min.js"></script>
<script src="https://pchen66.github.io/js/panolens/panolens.min.js"></script>
    <script>
      const panorama = new PANOLENS.ImagePanorama( 'img/photo.jpg' );
      const viewer = new PANOLENS.Viewer( { output: 'console' } );
      viewer.add( panorama );
    </script>
  </body>
</html>

то
5d82507b83f71719138749.png
Как исправить хоть одну ошибку? (лучше первый вариант)
  • Вопрос задан
  • 266 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Пригласить эксперта
Ответы на вопрос 1
@m0zart89
Содержимое папки:
1. index.php:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, shrink-to-fit=no">
    <title>Panolens.js panorama image panorama</title>
    <style>
      html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #000;
      }

      a:link, a:visited{
        color: #bdc3c7;
      }

      .credit{
        position: absolute;
        text-align: center;
        width: 100%;
        padding: 20px 0;
        color: #fff;
      }
    </style>
  </head>

  <body>

    <div class="credit"><a href="https://github.com/pchen66/panolens.js">Panolens.js</a> image panorama example. Image from <a href="http://adaptivesamples.com/tag/equirectangular/">Adaptive Samples</a></div>
    
    <script src="three.min.js"></script>
    <script src="panolens.min.js"></script>

    <script>

      const panorama = new PANOLENS.ImagePanorama( 'field.jpg' );
      const viewer = new PANOLENS.Viewer( { output: 'console' } );
      viewer.add( panorama );

    </script>

  </body>
</html>


2. panolens.min.js
3. three.min.js
4. field.jpg

Результат. Всё работает. ( Все файлы из первого же примера на сайте библиотеки panolens.js).

5d829639c3f66200711617.png
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы