Ошибка TWEEN is not defined

Question

Ошибка TWEEN is not defined

Рейтинг: 0Ответов: 0Опубликовано: 19.03.2023

Делаю скрипт для анимации броска кости. При запуске возникает ошибка TWEEN is not defined, хотя библиотека tween.js подключена HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Бросок кости</title>
  <link rel="stylesheet" href="style.css">
  <style>#throw-btn {
  display: block;
  margin: 20px auto;
  font-size: 1.5rem;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #1abc9c;
  color: #fff;
  cursor: pointer;
}

#throw-btn:hover {
  background-color: #16a085;
}

/* Стили для блока, куда будет рендериться 3D-анимация */
#dice-container {
  width: 200px;
  height: 200px;
  margin: auto;
  perspective: 500px;
  transform-style: preserve-3d;
}</style>
</head>

<body>
  <h1>Бросок кости</h1>
  <button id="throw-btn">Бросить</button>
  <div id="dice-container"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   
  <script src="app.js"></script>
</body>

</html>

JavaScript:

// Получаем ссылку на кнопку и блок, куда будет рендериться 3D-анимация
const throwBtn = document.getElementById('throw-btn');
const diceContainer = document.getElementById('dice-container');

// Создаем сцену и камеру, которые будут отображать 3D-анимацию
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.z = 5;

// Создаем рендерер, который будет отрисовывать сцену и камеру
const renderer = new THREE.WebGLRenderer();
renderer.setSize(200, 200);
diceContainer.appendChild(renderer.domElement);

// Создаем кость, используя встроенную геометрию и текстуру
const diceGeometry = new THREE.BoxGeometry(1, 1, 1);
const diceTexture = new THREE.TextureLoader().load('textures/dice_texture.jpg');
const diceMaterial = new THREE.MeshBasicMaterial({ map: diceTexture });
const dice = new THREE.Mesh(diceGeometry, diceMaterial);

// Добавляем кость на сцену
scene.add(dice);

// Функция для броска кости
function throwDice() {
  // Генерируем случайное число от 1 до 6
  const randomNumber = Math.floor(Math.random() * 6) + 1;

  // Вращаем кость с помощью анимации и задаем новую текстуру, соответствующую выпавшему числу
  const rotationAngle = Math.PI * 2 * (randomNumber / 6);
  const rotationAxis = new THREE.Vector3(1, 1, 0);
  const rotationTween = new TWEEN.Tween(dice.rotation)
    .to({ x: rotationAngle, y: rotationAngle, z: rotationAngle }, 1000)
    .easing(TWEEN.Easing.Quadratic.Out)
    .onComplete(() => {
      dice.material.map = new THREE.TextureLoader().load(`textures/dice_${randomNumber}.jpg`);
    });

  // Запускаем анимацию
  rotationTween.start();
}

// Обработчик клика на кнопку
throwBtn.addEventListener('click', throwDice);

// Функция для анимации 3D-сцены
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  renderer.render(scene, camera);
}

// Запускаем анимацию
animate();

css javascript html three.js

Источник: Stack Overflow на русском

Ошибка TWEEN is not defined

Ответы