How to fix Uncaught ReferenceError: Three is not defined error?

K

Kiryan Kiryan2021-06-02 13:17:03

JavaScript

Kiryan Kiryan, 2021-06-02 13:17:03

I'm trying to implement a 3D game in the browser. To do this, I used the JS-three.js library, connected it to the script,
but it gives an error in the console (Uncaught ReferenceError: Three is not defined) The HTML and JS code is attached below.

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


}

What could be the problem?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

oldshapedvinyl, 2021-06-02
@oldshapedvinyl

Connect the library scripts above to the header