three.js加载模型失败（跨域问题）_vue打包threejs后所有模型报跨域

作者：繁依Fanyi0 | 2024-06-08 00:11:18

踩

vue打包threejs后所有模型报跨域


<!DOCTYPE html>
 
<html>
 
<head>
<meta charset="utf-8">
    <title>test Load OBJ model </title>
    <script type="text/javascript" src="three.js-dev/build/three.js"></script>
    <script type="text/javascript" src="three.js-dev/examples/js/loaders/OBJLoader.js"></script>
 
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
 
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
 
    function init() {
 
        var scene = new THREE.Scene();
 
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;
 
        camera.position.x = 130;
        camera.position.y = 140;
        camera.position.z = 150;
        camera.lookAt(scene.position);
        scene.add(camera);
 
        var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(30, 40, 50);
        spotLight.intensity = 1;
        scene.add(spotLight);
 
        var step = 0;
 
        var controls = new function () {
            // we need the first child, since it's a multimaterial
        };
       
         
          /*  加载OBJLoader*/
        var mesh;
 
        var loader = new THREE.OBJLoader();
        loader.load('venusl.obj', function (loadedMesh) {
            var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});
 
            loadedMesh.children.forEach(function (child) {
                child.material = material;
                child.geometry.computeFaceNormals();
                child.geometry.computeVertexNormals();
            });
            mesh = loadedMesh;
            loadedMesh.scale.set(1, 1, 1);
            loadedMesh.rotation.x = -0.3;
            scene.add(loadedMesh);
        });
 
        render();
        function render() {
 
            if (mesh) {
                mesh.rotation.y += 0.006;
                mesh.rotation.x += 0.006;
            }
 
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }
 
 
 
    }
    window.onload = init;
</script>
</body>
</html>

使用three.js加载一个obj模型；

在360急速浏览器出错如下；

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute............

这是跨域问题；
Google 在2020年2月4号发布的 Chrome 80 版本（schedule：https://www.chromestatus.com/features/schedule）中默认屏蔽所有第三方 Cookie，即默认为所有 Cookie 加上 SameSite=Lax 属性（https://www.chromestatus.com/feature/5088147346030592），并且拒绝非Secure的Cookie设为 SameSite=None（https://www.chromestatus.com/feature/5633521622188032）
SameSite的作用就是:防止跨域传送cookie，从而防止 CSRF 攻击和用户追踪，此举是为了从源头屏蔽 CSRF 漏洞。
参考：https://blog.csdn.net/yhyc812/article/details/108623844

在搜狗浏览器出错如下；

has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes:

已经被CORS策略阻止.....；

CORS，全称Cross-Origin Resource Sharing ，是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

也就是浏览器禁止加载一个本地的obj文件，任何的外部文件；为安全起见；

如果做成asp.net项目；

也是报一样的错；

从前端调试看一下Network标签；浏览器可以获取到各个资源，自己的代码文件，three.js、OBJLoader.js；只有模型文件不能获取到；

下回继续；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/687629