Пытаюсь реализовать 3D игру в браузере. Для этого воспользовался библиотекой JS-three.js, подключил ее к скрипту,
но в консоле выдает ошибку(Uncaught ReferenceError: Three is not defined) Код HTML и JS прикреплен ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пинг-Понг</title>
<link rel="stylesheet" href="scripts/style.css">
</head>
<body onload="setup();">
<div id="gameCanvas"></div>
<script src="scripts/three.js"></script>
<script src="scripts/three.min.js"></script>
<script src="scripts/game.js"></script>
<div id="scoreboard">
<h1 id="scores">0-0</h1>
<h1 id="title">3D ПИНГ-ПОНГ</h1>
<h2 id="winnerBoard">Набравший 7 очков победит!</h2>
<h3>A - перемещение влево
<br>D - перемещение вправо</h3>
</div>
</body>
</html>
let renderer, scene, camera, pointLight, spotLiglet;
let ball;
let maxScore = 7;
let score1 = 0, score2 = 0;
function setup()
{
document.getElementById("winnerBoard").innerHTML = "Набравший " + maxScore + " очков победит!";
score1 = 0;
score2 = 0;
createScene();
draw();
}
function createScene()
{
let WIDTH = 640;
let HEIGHT = 360;
let VIEW_ANGLE = 50,
ASCEPT = WIDTH/HEIGHT,
NEAR = 0.1,
FAR = 10000;
let c = document.getElementById("gameCanvas");
renderer = new Three.WebGLRenderer();
camera =
new Three.PerspectiveCamera(
VIEW_ANGLE,
ASCEPT,
NEAR,
FAR);
scene = new Three.Scene();
scene.add(camera);
camera.position.z = 320;
renderer.setSize(WIDTH, HEIGHT);
c.appendChild(renderer.domElement);
let radius = 5,
segments = 6,
rings = 6;
let sphereMaterial = new Three.MeshLambertMaterial(
{
color: 0xD43001
});
ball = new Three.Mesh(
new Three.SphereGeometry(
radius,
segments,
rings),
sphereMaterial);
scene.add(ball);
}
В чем может быть проблема?
