英文:
Three.js - STLLoader with cdn
问题
我已决定尝试制作一个STL文件加载器来玩。现在我很生气。
我尝试了互联网上的一切，但仍然无法工作，主要是因为CDN错误。
我现在正在按照Three.js网站上的教程以及这个教程 进行操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>STL</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.154.0/build/three.module.js",
"stl-loader": "https://cdn.jsdelivr.net/npm/stl-loader@1.0.0/STLLoader.min.js",
"three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { STLLoader } from 'stl-loader';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color('#cc0000');
const loadObject = () => {
const loader = new STLLoader();
loader.load("stl_file.stl", function (geometry) {
group = new THREE.Group();
scene.add(group);
const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0x111111, shininess: 200 });
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
mesh.scale.set(10, 10, 10);
mesh.castShadow = true;
mesh.receiveShadow = true;
geometry.center();
group.add(mesh);
})
}
loadObject();
camera.position.z = 5;
renderer.render(scene, camera);
</script>
</body>
</html>
大部分的代码来自这里，正如我之前提到的。
从控制台出现错误信息：Uncaught SyntaxError: The requested module 'stl-loader' does not provide an export named 'STLLoader'，但我知道这不是唯一的问题...
英文:
I've decided to try to make a stl loader for fun. Now I'm mad.
I've tried everything on the internet and still not work, mostly from errors of cdn.
Right now I'm following the tutorial on Three.js site and this one.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>STL</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.154.0/build/three.module.js",
"stl-loader": "https://cdn.jsdelivr.net/npm/stl-loader@1.0.0/STLLoader.min.js",
"three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { STLLoader } from 'stl-loader';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene.background = new THREE.Color('#cc0000');
const loadObject = () => {
const loader = new STLLoader()
loader.load("stl_file.stl", function (geometry) {
group = new THREE.Group()
scene.add(group)
const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0x111111, shininess: 200 })
mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, 0)
mesh.scale.set(10, 10, 10)
mesh.castShadow = true
mesh.receiveShadow = true
geometry.center()
group.add(mesh)
})
}
loadObject();
camera.position.z = 5;
renderer.render( scene, camera );
</script>
</body>
</html>
Most of the code came from here as I mentioned earlier.
From console
Uncaught SyntaxError: The requested module 'stl-loader' does not provide an export named 'STLLoader'
but I know that it's not the only problem...
答案1
得分: 0
"STLLoader.min.js"文件不是ES6模块，因此无法使用ES6导入语法导入它。该文件应该具有与three npm包中的STLLoader相同的结构：
https://unpkg.com/three@0.154.0/examples/jsm/loaders/STLLoader.js
英文:
The file STLLoader.min.js is no ES6 module so you can't import it via ES6 import syntax. The file should have the same structure like the STLLoader from the three npm package:
https://unpkg.com/three@0.154.0/examples/jsm/loaders/STLLoader.js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论