Threejs не работает локально?

Question

greenline111 @greenline111

three.js

Threejs не работает локально?

На локалке при открытии index ничего не белый экран, на хосте все нормально.

Вопрос задан более трёх лет назад
602 просмотра

12 комментариев

Подписаться 2 Простой 12 комментариев

Алексей П @ruddy22

какие ошибки в браузере?

Написано более трёх лет назад
greenline111 @greenline111 Автор вопроса

Алексей П, нет ошибок

Написано более трёх лет назад
Владимир @Casufi

greenline111, Смотри в секцию network кроме прочего

Написано более трёх лет назад
greenline111 @greenline111 Автор вопроса

Алексей П, Uncaught SyntaxError: Cannot use import statement outside a module

Написано более трёх лет назад
Владимир @Casufi

Я так понимаю ты в редакторе создал сцену, экспортировал ее и пытаешся открыть index.html
Рекомендую все это описать в вопросе, телепатов тут ты не найдешь

Написано более трёх лет назад

greenline111 @greenline111 Автор вопроса

Владимир,

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas id="app"></canvas>
    <script src="src/three.js"></script>
    <script src="src/index.js?1"></script>
  </body>
</html>

import "./styles.css";
import Gl from "./gl";

const scene = new Gl();
scene.init();

Ошибка на первой строке второго окна кода

Написано более трёх лет назад

Михаил @notiv-nt
greenline111, google >
Uncaught SyntaxError: Cannot use import statement outside a module
Написано более трёх лет назад
Владимир @Casufi

greenline111, Читай первый абзац до усрачки
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Написано более трёх лет назад
greenline111 @greenline111 Автор вопроса

Владимир, Failed to load module script: The server responded with a non-JavaScript MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

Написано более трёх лет назад
Владимир @Casufi

greenline111, Выход:
1) Переписать скрипт чтобы не использовать импорты.
2) Погуглить как застваить отдавать файловую систему скрипт с нужным mimetype
3) Использовать что то вроде https://webpack.js.org/configuration/dev-server/
4) Редактор brackets.io он вроде умеет локальный сервер поднимать

Написано более трёх лет назад
Михаил @notiv-nt

Владимир, йа ?

Написано более трёх лет назад
Владимир @Casufi

Михаил, сорри ошибся адресом, но если не читал и есть желание, тоже можешь почитать

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 3

5 комментариев

greenline111 @greenline111 Автор вопроса

Что работает? У меня нет

Написано более трёх лет назад
Сергей delphinpro @delphinpro

greenline111, вы задали вопрос:

Threejs не работает локально?

Вам ответили — работает

Написано более трёх лет назад
greenline111 @greenline111 Автор вопроса

Сергей delphinpro, Вы читали содержимое или решили прикальнуться

Написано более трёх лет назад
Владимир @Casufi

greenline111, Вопрос тупой, имхо детали нужно добавлять сразу в вопрос а не заставлять тянуть из вас их клещами.

Написано более трёх лет назад
Сергей delphinpro @delphinpro

greenline111, а вы читали правила ресурса?

Я для вас процитирую, если позволите:

3.6. Соблюдать нормы русского языка и принципы построения вопросительных предложений. Формулируя текст вопроса не следует злоупотреблять ПРОПИСНЫМИ БУКВАМИ. Также следует понимать, что само по себе добавление вопросительного знака не превращает любое предложение в вопрос, поэтому следует использовать порядок слов, характерный для вопросительных предложений.

Обратите внимание на предложение: Также следует понимать, что само по себе добавление вопросительного знака не превращает любое предложение в вопрос

Мы все прекрасно поняли, что у вас там утвердительное предложение со знаком вопроса. Но это неправильно. Вопрос должен быть вопросом.

К тому же, когда вы напрягаете мозг, чтобы правильно сформулировать вопрос, вы ближе подходите к сути проблемы, а иногда даже можете сами найти решение и передумать задавать вопрос.

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

Алгоритмы

+1 ещё

Сложный
Как релизовать A* на three.js?
- 2 подписчика
- 31 окт.
- 96 просмотров
0

ответов
three.js

Простой
Обновление света в three.js?
- 1 подписчик
- 09 окт.
- 41 просмотр
1

ответ
three.js

Простой
Исчезает освещение в three.js при переходе на NPM?
- 1 подписчик
- 27 сент.
- 34 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Почему ошибка при js import в битриксе?
- 1 подписчик
- 23 авг.
- 86 просмотров
1

ответ
JavaScript

+4 ещё

Средний
Как отрендерить сцену из Blender так же как и в нем с помощью THREE.js?
- 1 подписчик
- 25 июл.
- 91 просмотр
1

ответ
three.js

Простой
Может ли THREE.FontLoader возвращать значение?
- 1 подписчик
- 24 июн.
- 39 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как сделать анимацию плавнее?
- 1 подписчик
- 16 июн.
- 109 просмотров
2

ответа
React

+1 ещё

Простой
Как пофиксить проблемы с css у react-three-fiber (three js для react)?
- 1 подписчик
- 25 мая
- 37 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- 25 апр.
- 360 просмотров
1

ответ
three.js

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 24 апр.
- 549 просмотров
1

ответ
Показать ещё Загружается…

Creative Frontend Developer (Креативный Фронтенд Разработчик)

CHIPSA • Красноярск

от 100 000 до 200 000 ₽

Релиз-менеджер

Автомакон • Москва

от 28 200 ₽

Инженер DevOps

Автомакон • Москва

от 300 000 ₽

Электронные визитки .vcf с QR кодом

24 нояб. 2024, в 17:52

3000 руб./за проект

Деплой приложения

24 нояб. 2024, в 16:14

1000 руб./за проект

Написать запросный бот парсер поиска с функцией автоматической записи

24 нояб. 2024, в 15:21

120000 руб./за проект

greenline111, Смотри в секцию network кроме прочего
Алексей П, Uncaught SyntaxError: Cannot use import statement outside a module
Я так понимаю ты в редакторе создал сцену, экспортировал ее и пытаешся открыть index.html
Рекомендую все это описать в вопросе, телепатов тут ты не найдешь
Владимир,
<!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <canvas id="app"></canvas> <script src="src/three.js"></script> <script src="src/index.js?1"></script> </body> </html>

import "./styles.css"; import Gl from "./gl"; const scene = new Gl(); scene.init();

Ошибка на первой строке второго окна кода
greenline111, google >
Uncaught SyntaxError: Cannot use import statement outside a module
greenline111, Читай первый абзац до усрачки
https://developer.mozilla.org/en-US/docs/Web/JavaS...
Владимир, Failed to load module script: The server responded with a non-JavaScript MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
greenline111, Выход:
1) Переписать скрипт чтобы не использовать импорты.
2) Погуглить как застваить отдавать файловую систему скрипт с нужным mimetype
3) Использовать что то вроде https://webpack.js.org/configuration/dev-server/
4) Редактор brackets.io он вроде умеет локальный сервер поднимать
Михаил, сорри ошибся адресом, но если не читал и есть желание, тоже можешь почитать

Answer 1 · 2020-11-19 15:58:24

Владимир @Casufi

Работает

Ответ написан более трёх лет назад

5 комментариев

Answer 2 · 2020-11-19 16:33:36

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

Answer 3 · 2020-11-19 16:42:28

greenline111
Суть твоей ошибки: браузер не понимает твой js.

У тебя есть выбор, правда небольшой:
1. Подключить Webpack, Gulp + Babel, Browserify + Babel или что-то еще, что соберёт твой проект корректно.
2. Изменить свой код таким образом:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas id="app"></canvas>
    <script src="src/three.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Лучше, конечно, пройти туториал на сайте проекта и разобраться с Webpack (или Roll-up).

Threejs не работает локально?

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

Минуточку внимания

Войдите на сайт