my friend and I have a problem in js and html, we cannot make a 3d model out of a button

(sry for bad eng, we are from Moskow and we are stupid D) We have a problem, so to speak: quation. I with my bro write sam any code on HTMl, JS. and we must make 3d model wiht interactive button, which must open window with useful info. We use THREE.js. We have this errors:

Access to script at ‘file:///C:/Users/%D0%90%D0%B4%D0%BC%D0%B8%D0%BD%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%82%D0%BE%D1%80/Documents/CODE/%D0%B1%D1%83%D1%80%D0%B0%D0%BD/js/three.module.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

(and the same with different files)

code (help):

<html>
  <head>
    <meta charset="utf-8">
    <title>3d</title>
    <style>
      #zatemnenie {
        display: none;
      }
      #okno {
        width: 35%;
        height: 35%;
        text-align: center;
        padding: 0px;
        border: 3px solid #000000 ;
        border-radius: 10px;
        color: #ffffff;
        position: absolute;
        top: 0;
        right: 30%;
        bottom: 0;
        left: 30%;
        margin: auto;
        background: #ffffff ;
      }
      #zatemnenie:target {display: block;}
      .close {
        display: inline-block;
        border: 1px solid #000000 ;
        color: #ffffff;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #ffffff;
        font-size: 30pt;
        cursor:pointer;
      }
      .close:hover {background: #000000;}

      body {
                font-family: sans-serif;
                font-size: 11px;
                background-color: rgb(0, 0, 0);
                margin: 0px;
            }
            canvas {
                display: block;
            }
    </style>
  </head>
 
  <body ontouchstart="">

    <div id="zatemnenie">
      <div id="okno">
        Всплывающее окошко!<br>
        <a href="#" class="close">Закрой, фу.</a>
      </div>
    </div>

    <a href="#zatemnenie">
      <script type="module">

        import * as THREE from './js/three.module.js';
        import { APP } from './js/app.js';
        import { VRButton } from './js/VRButton.js';
  
        window.THREE = THREE; // Used by APP Scripts.
        window.VRButton = VRButton; // Used by APP Scripts.
  
        var loader = new THREE.FileLoader();
        loader.load( 'app.json', function ( text ) {
  
          var player = new APP.Player();
          player.load( JSON.parse( text ) );
          player.setSize( window.innerWidth, window.innerHeight );
          player.play();
  
          document.body.appendChild( player.dom );
  
          window.addEventListener( 'resize', function () {
  
            player.setSize( window.innerWidth, window.innerHeight );
  
          } );
  
        } );
  
      </script>  
      <style>
        #najmi {    
            width: 10%;
          height: 10%;
          right: 45%;
          left:45%; 
        }
      </style>
    </a>
 
  </body>
</html> ```

Answer

Access to script at ‘file:///C:/Users/%D0%90%D0%B4%D0%BC%D0%B8%D0%BD%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%82%D0%BE%D1%80/Documents/CODE/%D0%B1%D1%83%D1%80%D0%B0%D0%BD/js/three.module.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

This error occurs if you open your HTML document from file. You can solve the issue by hosting your application on a local web server. There is actually a three.js guide for beginners that explains how to run things locally:

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

Advertisement

Answer