Мне нужна помощь, почему мой код Three.js не работает

Я хочу изучить Three.js и попробовал следовать коду для начала работы в документации по Three.js, но сцена не отображается, и я в полном замешательстве.

индекс.html:

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <h1>My first three.js app</h1>
        <style>
            body { 
                margin: 0; 
            }
        </style>
        <script type = "importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@<v0.167.1>/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@<v0.167.1>/examples/jsm/"
              }
            }
          </script>
    </head>
    <body>
        <script  type = "module" src = "/main.js"></script>
    </body>
</html>

основной.js:

import * as THREE from 'three';

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 );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

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

какой заголовок? какие-либо ошибки в консоли инструментов разработчика браузера?

— 03.08.2024 04:58

Видите ли вы какие-либо ошибки в консоли? Потому что я могу запустить ваш код и увидеть вращающийся зеленый квадрат. Также, может быть, опубликуйте свой package.json? Он должен зависеть от пакета «три».

— 03.08.2024 07:15

javascript html three.js

03.08.2024 04:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть синтаксическая ошибка при импорте карт. Мы не так отмечаем версию библиотеки. Мы не заключаем номер версии (это может немного сбивать с толку, поскольку он представлен в документации...) в угловые скобки <>. Вот так подойдет: v0.167.1 или 0.167.1, но не так: <v0.167.1>.

<script type = "importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
              }
            }
</script>

Попробуйте этот подход:

<script type = "importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
              }
            }
    </script>
    </head>
    <body>
        <script  type = "module">
import * as THREE from 'three';

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 );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

</script>

03.08.2024 09:07

Другие вопросы по теме

Как добавить display:none к родительскому элементу слота без содержимого

Выровняйте содержимое относительно флажка с помощью CSS

Добавление функции восстановления в скрипт автоответа для Twitch

Элемент ошибки скриншота html2canvas 1.4.1 с использованием background-image:data:image/svg+xml;base64,

Координаты setItem и широта getitem

Как включить кнопки? (проблема с логикой?)

Html2canvas не захватывает текст в текстовой области в SVG

Как установить стиль наведения на кнопку после нажатия и оставить кнопку?

Переключение панели навигации: активная проблема

Цикл JavaScript выполняется на консоли, но не в коде

Мне нужна помощь, почему мой код Three.js не работает

Ответы 1

Другие вопросы по теме

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