Не выходит положить текстуру на модель

178

29 июля 2021, 16:00

из книги WebGL: Up and Running

Запустил второй пример (все файлы на которые код ссылается перекинул в директорию в которой лежит html файл ):

<!DOCTYPE html>
<html>
<head>
<title>Welcome to WebGL</title>
    <link rel="stylesheet" href="webglbook.css" /> 
    <script src="Three.js"></script>
    <script src="RequestAnimationFrame.js"></script>
    <script>
    var renderer = null, 
        scene = null, 
        camera = null,
        cube = null,
        animating = false;
    function onLoad()
    {
        // Grab our container div
        var container = document.getElementById("container");
        // Create the Three.js renderer, add it to our div
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize(container.offsetWidth, container.offsetHeight);
        container.appendChild( renderer.domElement );
        // Create a new Three.js scene
        scene = new THREE.Scene();
        // Put in a camera
        camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
        camera.position.set( 0, 0, 3 );
        // Create a directional light to show off the object
        var light = new THREE.DirectionalLight( 0xffffff, 1.5);
        light.position.set(0, 0, 1);
        scene.add( light );
        // Create a shaded, texture-mapped cube and add it to the scene
        // First, create the texture map
        var mapUrl = "molumen_small_funny_angry_monster.jpg";
        var map = THREE.ImageUtils.loadTexture(mapUrl);
        // Now, create a Phong material to show shading; pass in the map
        var material = new THREE.MeshPhongMaterial({ map: map });
        // Create the cube geometry
        var geometry = new THREE.CubeGeometry(1, 1, 1);
        // And put the geometry and material together into a mesh
        cube = new THREE.Mesh(geometry, material);
        // Turn it toward the scene, or we won't see the cube shape!
        cube.rotation.x = Math.PI / 5;
        cube.rotation.y = Math.PI / 5;
        // Add the cube to our scene
        scene.add( cube );
        // Add a mouse up handler to toggle the animation
        addMouseHandler();
        // Run our render loop
        run();
    }
    function run()
    {
        // Render the scene
        renderer.render( scene, camera );
        // Spin the cube for next frame
        if (animating)
        {
            cube.rotation.y -= 0.01;
        }
        // Ask for another frame
        requestAnimationFrame(run); 
    }
    function addMouseHandler()
    {
        var dom = renderer.domElement;
        dom.addEventListener( 'mouseup', onMouseUp, false);
    }
    function onMouseUp  (event)
    {
        event.preventDefault();
        animating = !animating;
    }   
    </script>
</head>
<body onLoad="onLoad();" style="">
    <center><h1>Welcome to WebGL!</h1></center>
    <div id="container" style="width:95%; height:80%; position:absolute;"></div>
    <div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">Click to animate the cube</div>
</body>
</html>

и получил результат :

А вот как в книге :

Вот вывод консоли :