Blender2.9で作成したglbをThreejsで読み込むには

Blender2.9で作成したglbをThreejsで読み込むためにネット記事を参考にして下記のようなコードを書きました。

javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>Example 01.02 - First Scene</title>
6    <script src="../libs/three.js"></script>
7    <script src="../libs/loaders/GLTFLoader.js"></script>
8    <style>
9        body {
10            margin: 0;
11            overflow: hidden;
12        }
13    </style>
14</head>
15<body>
16<div id="WebGL-output">
17</div>
18<script type="text/javascript">
19function init() {
20  var scene = new THREE.Scene();
21  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
22
23  var renderer = new THREE.WebGLRenderer();
24  renderer.setClearColor(new THREE.Color(0xEEEEEE));
25  renderer.setSize(window.innerWidth, window.innerHeight);
26
27  camera.position.x = -30;
28  camera.position.y = 40;
29  camera.position.z = 30;
30  camera.lookAt(scene.position);
31
32  const loader = new THREE.GLTFLoader();
33
34  loader.load('teecup.glb', (data) => {
35    const gltf = data;
36    const object = gltf.scene;
37    scene.add(object);
38
39  });
40
41  document.getElementById("WebGL-output").appendChild(renderer.domElement);
42  renderer.render(scene, camera);
43}
44
45window.onload = init;
46
47</script>
48</body>
49</html>
50

しかし下記のようなエラーになりました。

Uncaught SyntaxError: Unexpected token g in JSON at position 0
at JSON.parse (<anonymous>)
at GLTFLoader.js:22
at XMLHttpRequest.<anonymous> (three.js:18347)

blenderで作成したteecup.glbはWindows10の3Dビューアーやペイント3Dではちゃんと表示されます。
何が間違っているのでしょうか？

blenderを最初に起動した時にすでにある立方体で同じこと試したのですが同じエラーがでました。
手順なのですが、blenderを起動してファイル→エクスポート→glTF2.0でファイル保存。
できたファイルを上記のhtmlファイルと同じ場所に設置です。

行動規範の内容に同意します

回答1件

自己解決

Threejsのサイトを参考に下記のようにしたら表示されました。

html
1<!DOCTYPE html>
2<html>
3<body>
4<div id="WebGL-output">
5</div>
6<script type="module">
7
8import * as THREE from './three.module.js';
9import { GLTFLoader } from './GLTFLoader.js';
10
11let container, camera, scene, renderer, model;
12
13init();
14animate();
15
16function init() {
17  scene = new THREE.Scene();
18  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 100);
19  camera.position.set(-5, 3, 10);
20  camera.lookAt(new THREE.Vector3(0, 2, 0));
21
22  const dirLight = new THREE.DirectionalLight(0xffffff);
23  dirLight.position.set(0, 20, 10);
24  scene.add(dirLight);
25
26  renderer = new THREE.WebGLRenderer();
27  renderer.setClearColor(new THREE.Color(0xEEEEEE));
28  renderer.setSize(window.innerWidth, window.innerHeight);
29
30  const loader = new GLTFLoader();
31
32  loader.load('teecup.glb', function(gltf) {
33    model = gltf.scene;
34    scene.add(model);
35  }, undefined, function(e) {
36    console.error(e);
37  });
38
39  document.getElementById("WebGL-output").appendChild(renderer.domElement);
40}
41
42function animate() {
43  requestAnimationFrame(animate);
44  renderer.render(scene, camera);
45}
46</script>
47</body>
48</html>