three.js加载模型失败（跨域问题）

bcbobo21cn

已于 2023-06-22 06:06:18 修改

阅读量1.5k

点赞数

分类专栏：图形学和3D web前端文章标签： javascript obj

于 2023-06-22 05:34:30 首次发布

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/131336995

版权

图形学和3D 同时被 2 个专栏收录

249 篇文章 13 订阅

订阅专栏

web前端

150 篇文章 1 订阅

订阅专栏

<!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项目；