Three.js Model not showing. What's the matter?

T

Temir012021-04-15 16:41:31

three.js

Temir01, 2021-04-15 16:41:31

Created a server with django. An html template has been created and the code is embedded in it

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Мой сайт</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js">
  </script>
</head>
<body>
  <script>

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innetHeidht, 0.1, 1000);
      camera.position.z = 10;
      //camera.rotation.y = 45/180*Math.PI;
      /*camera.position.x = 800;
      camera.position.y = 100;
      camera.position.z = 1000;*/


      renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
      renderer.setClearColor(0x000000, 0);
      renderer.setSize (1280, 720);

      renderer.domElement.setAttribute("id", "3d_model")
      document.body.insertBefore(renderer.domElement, document.body.firstChild);


      const alight = new THREE.AmbientLight(0x404040, 1.2);
      scene.add(alight);

      const plight = new THREE.PointLight(0xFFFFFF, 1.2);
      plight.position.set(0,-3, 7);
      scene.add(plight);

      const helper = new THREE.PointLightHelper(plight);
      scene.add(helper);


      let loader = new THREE.GLTFLoader();
      let obj = null;

      loader.load("3d_model/scene.gltf", function(gltf)
      {
        obj = gltf;
        obj.scene.scale.set(1.3, 1.3 , 1.3);


        scene.add(obj.scene);
        renderer.render(scene, camera);
      },
      // called while loading is progressing
    function ( xhr ) {

      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

      console.log( 'An error happened' );

    });
    function animate(){
      requestAnimationFrame(animate);
      /*
      if(obj)
        obj.scene.rotation.y +=0.03;

      console.log(obj.scene.rotation.y);*/
      renderer.render(scene, camera);
    }
    animate();
    
  </script>
  <style>
    #3d_model{
      position: absolute;
      right: 0;
      top: 0;
      z-index: 999;
    }
  </style>

</body>
<footer>all rights recerved</footer>
</html>

In the Google console, the loading process reaches 100%, which means the model is loading, but it does not appear. In the animation function, I moved the camera, while forcing me to look at the model, but still unsuccessfully.
the server lies on 127.0.0.2:8000, began to sin on it. But when creating a local html file with the same code, it gives errors with the requirement to organize a server. Help, please
UPD1: In the Network list in Google, the model with materials is present with a status of 200 (ok)