STLloader预览服务端stl文件

最新推荐文章于 2025-11-12 09:52:43 发布

原创最新推荐文章于 2025-11-12 09:52:43 发布 · 778 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #3d

在使用Three.js的STLLoader时遇到ContentSecurityPolicy（CSP）错误，提示不允许从服务器地址加载资源。问题出现在尝试加载远程STL文件时，由于CSP策略限制。解决方案可能涉及调整浏览器或服务器的CSP设置，允许从指定源加载内容。同时，示例代码显示大部分DEMO使用本地地址加载，不确定是否支持服务器地址。为了解决这个问题，开发者需要检查并更新CSP策略，或者考虑将STL文件存储在本地以符合CSP规定。

最近写项目的时候遇到了一个问题就是我使用STLloader时 loader.load("服务端地址"，function)

会报csp错误

Content Security Policy: 页面设置阻止读取位于 blob:http://localhost:8080/06f90dbb-6fa5-4310-aad0-7a85b227f479 的一项资源("connect-src")。

想问一下大佬们这种情况怎么解决

还有就是我看网上大部分demo loader.load('本地地址') 所以我不知道能否加载服务器地址文件

<script type="text/javascript" src="${path}js/ux/udpdf/index.js" ></script>
<script  src="${path}js/ux/udpdf/arraybutter.js" ></script>
<script  src="${path }/js/ux/udpdf/STLLoader.js" type="module"></script>
<script  src="${path }/js/ux/udpdf/TrackballControls.js" type="module"></script>
<script  src="${path }/js/ux/udpdf/three.module.js" type="module"></script>
<link type="text/css" rel="stylesheet" href="${path }/js/ux/udpdf/main.css">

<script type="module">

   //注意：
   //TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js，特别注意引用的路径

   import * as THREE from '/threejs/js/three.module.js';
   import { TrackballControls } from '/threejs/js/TrackballControls.js';
   import { STLLoader } from '/threejs/js/STLLoader.js';

   var container, controls;
   var camera, scene, renderer;

   previewajax()
   init();
   animate();


   function resize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
   }

   function animate() {
      controls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
   }
   //类型转换
   function blobchange(data){
      debugger
      var blob = new Blob([data], {
         type: 'application/vnd.ms-pkistl;charset=utf-8'
      })
      var fileURL = URL.createObjectURL(blob)
      init(fileURL);

   }
       //请求接口
   function previewajax(){
      $.ajax({
         type : "get",
         url : path+"stlfile/queryStlPathById.do",
         dataType : "arraybuffer",
         data : {"id" : showOne.id,"userid" : userid},
         success : function(data) {
            blobchange(data)
         }
      });

   }

   function init(fileURL) {
      console.log(fileURL)

      container = document.createElement('div');
      $("#fujian_right_stl").html(container);
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10);
      camera.position.z = 2;
      scene = new THREE.Scene();
      scene.add(new THREE.HemisphereLight());
      var directionalLight = new THREE.DirectionalLight(0xffeedd); // 0xFFFFFF
      directionalLight.position.set(0, 0, 2);
      scene.add(directionalLight);

      // ASCII file
      var loader = new STLLoader();
      loader.load(fileURL, function (geometry) {
         var mat = new THREE.MeshLambertMaterial({ color: '0x00ffff' });//{ color: 0x00ffff }
         var mesh = new THREE.Mesh(geometry, mat);
         mesh.rotation.x = -0.5 * Math.PI; //将模型摆正
         mesh.scale.set(0.1, 0.1, 0.1); //缩放
         geometry.center(); //居中显示
         scene.add(mesh);
      })




      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(renderer.domElement);
      controls = new TrackballControls(camera, renderer.domElement);
      window.addEventListener('resize', resize, false);
   }

</script>