我想做一个用three.js加载模型的网页,但我不知要要怎么做到可以让用户在网页中选择选择要加载的本地模型,我现在只能加载存放于固定文件夹下的模型。
问题相关代码,请勿粘贴截图
这是加载模型部分的代码
//辅助工具
var helper = new THREE.AxesHelper(50);
scene.add(helper);
var loader = new THREE.STLLoader();
loader.load("/demo/js/three.js/examples/models/chuanci.stl",function (geometry) {
//创建纹理
var mat = new THREE.MeshLambertMaterial({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);
});
我想要达到的结果
我想导入的并不是图片而是obj,stl等格式的模型
问题1.由于浏览器安全限制,无法获取本地文件的绝对路径(要修改设置或者插件,导致程序无通用性)
问题2.由于webgl的安全限制,无法加载跨域的模型文件或图片
推荐方案:用户选择本地文件后自动上传至服务器,然后前端自动加载服务器中的模型并渲染
上传本地文件请查阅的相关资料