时间戳

首页 > 解决方案 > 我和我的朋友在 js 和 html 中遇到问题，我们无法用按钮制作 3d 模型

javascript - 我和我的朋友在 js 和 html 中遇到问题，我们无法用按钮制作 3d 模型

问题描述

（对不起英语不好，我们来自莫斯科，我们很愚蠢 D）我们有一个问题，可以这么说：quation。我和我的兄弟在 HTMl、JS 上编写了任何代码。我们必须使用交互式按钮制作 3d 模型，该按钮必须打开包含有用信息的窗口。我们使用 THREE.js。我们有这个错误：

在 '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' 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、chrome-untrusted、https。

（与不同的文件相同）

代码（帮助）：

<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> ```

标签： javascripthtmlthree.js

解决方案

在 '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' 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、chrome-untrusted、https。

如果您从文件中打开 HTML 文档，则会发生此错误。您可以通过将应用程序托管在本地 Web 服务器上来解决此问题。实际上有一个three.js初学者指南，解释了如何在本地运行：

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

推荐阅读