静态导入three.js启动时出错

Question

我希望为测试网站静态导入three.js。我对html/js有点生疏，所以我在这里做错了什么。

正在尝试从执行静态导入https://threejs.org/docs/#manual/en/introduction/Installation

下面的代码(全部在一个html文件中(：

<script type="module">
// Find the latest version by visiting https://unpkg.com/three. The URL will
// redirect to the newest stable release.
// import * as THREE from 'https://unpkg.com/three@<VERSION>/build/three.module.js'; 

import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.js';
const scene = new THREE.Scene();
</script>
<script>
//if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
init();
function init() {


scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x999999 ) );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
// Z is up for objects intended to be 3D printed.
camera.up.set( 0, 0, 1 );
camera.position.set( 0, -9, 6 );
camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
scene.add( camera );
var grid = new THREE.GridHelper( 25, 1.0, 0xffffff, 0x555555 );
grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
scene.add( grid );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x999999 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.AMFLoader();
loader.load( './models/amf/rook.amf', function ( amfobject ) {
scene.add( amfobject );
render();
} );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 0, 1.2, 2 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>

我得到以下信息：

v1.html:78 Uncaught ReferenceError: THREE is not defined
at init (v1.html:78)
at v1.html:72
init @ v1.html:78
(anonymous) @ v1.html:72
v1.html:62 Uncaught TypeError: THREE.Scene is not a constructor
at v1.html:62
(anonymous) @ v1.html:62

我下一步可以尝试什么？

Answer 1

您应该使用普通的脚本标记，而不是类型模块。这将解决您的问题。没有理由这样做。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js" integrity="sha512-E1+SnTWyHYoY5MN8wpL0SI4TYbpWN12sHXyEViwbzzEyq6GHxQrPFDzEeUDab4emXcf3Yj41Tht2JZnpo3kjwA==" crossorigin="anonymous"></script>