ARに興味があり、全く初心者なのですが Amazon Sumerianを使ってみました。
Webアプリにモデルを表示するのをチュートリアルに沿ってやってみたのですが、canvasが真っ黒になってしまいモデルが表示されません。
テンプレート部はこのような感じで
html
1<div class="fill-height">
2 <div id="ar-container" class="d-flex justify-center align-center">
3 <canvas ref="canvas" id="ar-canvas" @resize="onResize" />
4 </div>
5</div>
初期化処理はNuxtのmountedフックで下記のように書いています
js
1import { Scene, WebGLRenderer, AmbientLight, PerspectiveCamera } from 'three'
2import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
3
4const gltfUrl = '/scene/root.gltf'
5
6// 中略
7mounted() {
8 const canvas = this.$refs.canvas
9 const renderer = new WebGLRenderer({ canvas })
10 renderer.setSize(canvas.clientWidth, canvas.clientHeight, false)
11 const scene = new Scene()
12 this.renderer = renderer
13
14 const camera = new PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 1, 500)
15 camera.position.set(200, 40, 0)
16 camera.lookAt(0, 0, 0)
17 scene.add(camera)
18 this.camera = camera
19
20 const light = new AmbientLight()
21 scene.add(light)
22 this.light = light
23
24 const loader = new GLTFLoader()
25
26 await loader.load(gltfUrl, gltf => {
27 scene.add(...gltf.scene.children)
28 })
29 this.loader = loader
30
31 const animate = () => {
32 renderer.render(scene, camera)
33 requestAnimationFrame(animate)
34 }
35
36 animate()
37}
すると下記のように真っ黒な画面が表示されます。。。
コンソールには特にエラーなど出ていないのですが、これは失敗しているのか、それとも成功しているけどカメラやライトが変みたいなことなのでしょうか？？
ちなみにモデルは、今スクショをとろうとしていたら消えてしまっていたのでお見せできないのですが、Sumerianのボックスをひとつ置いただけのものでした。
何か解決する方法やヒントを教えていただければ幸いです。
宜しくお願いいたします。
※自分はVueとNuxtは少しできますがThree.jsは使ったことなく、3dモデルなどの知識は皆無といったレベルです
gtlfファイルはこんな感じです
{
"asset": {
"generator": "Amazon Sumerian",
"version": "2.0"
},
"cameras": [
{
"name": "Default Camera",
"type": "perspective",
"perspective": {
"aspectRatio": 1,
"yfov": 0.7853981633974483,
"zfar": 1000,
"znear": 1
}
}
],
"nodes": [
{
"name": "Default Camera",
"camera": 0,
"rotation": [
-0.004824238008088496,
-0.9813484047269434,
-0.1905645404834078,
0.024843332664362804
],
"scale": [
1,
1,
1
],
"translation": [
2.403656682831947,
7.360146616014571,
-18.15123686461488
]
},
{
"name": "Key - Directional",
"extensions": {
"KHR_lights_punctual": {
"light": 0
}
},
"rotation": [
-0.0948595598902012,
0.11955889871169392,
-0.14019607206387738,
0.9782905473396666
],
"scale": [
0.9999998569971704,
0.9999998569971704,
0.9999998569971704
],
"translation": [
3.840765953063965,
5.725151062011719,
6.723899841308594
]
},
{
"name": "Rim - Directional",
"extensions": {
"KHR_lights_punctual": {
"light": 1
}
},
"rotation": [
-0.007935453473895075,
0.936498758480699,
0.34801447925863915,
0.042344139719820297
],
"scale": [
1.0000002646568553,
1.0000002646568553,
1.0000002646568553
],
"translation": [
4.528846740722656,
9.009954452514648,
-9.487277030944824
]
},
{
"name": "Default Dynamic Lights",
"rotation": [
0,
0,
0,
1
],
"scale": [
1,
1,
1
],
"translation": [
0,
0,
0
],
"children": [
1,
2
]
},
{
"name": "Box",
"mesh": 0,
"rotation": [
0,
0,
0,
1
],
"scale": [
1,
1,
1
],
"translation": [
0,
0,
0
]
},
{
"name": "Light",
"extensions": {
"KHR_lights_punctual": {
"light": 2
}
},
"rotation": [
0,
0,
0,
1
],
"scale": [
1,
1,
1
],
"translation": [
0,
0,
0
]
}
],
"extensions": {
"KHR_lights_punctual": {
"lights": [
{
"name": "Key - Directional",
"color": [
0.92477783203125,
0.8875688601181507,
0.856960791015625
],
"intensity": 1,
"type": "directional"
},
{
"name": "Rim - Directional",
"color": [
1,
1,
1
],
"intensity": 1,
"type": "directional"
},
{
"name": "Light",
"color": [
1,
1,
1
],
"intensity": 1,
"type": "directional"
}
]
}
},
"extensionsUsed": [
"KHR_lights_punctual"
],
"buffers": [
{
"byteLength": 804,
"uri": "Box-textureModeUniform.bin"
}
],
"bufferViews": [
{
"buffer": 0,
"byteOffset": 0,
"byteLength": 36,
"target": 34963
},
{
"buffer": 0,
"byteOffset": 36,
"byteLength": 288,
"byteStride": 12,
"target": 34962
},
{
"buffer": 0,
"byteOffset": 324,
"byteLength": 288,
"byteStride": 12,
"target": 34962
},
{
"buffer": 0,
"byteOffset": 612,
"byteLength": 192,
"byteStride": 8,
"target": 34962
}
],
"accessors": [
{
"bufferView": 0,
"byteOffset": 0,
"componentType": 5121,
"count": 36,
"max": [
23
],
"min": [
0
],
"type": "SCALAR"
},
{
"bufferView": 1,
"byteOffset": 0,
"componentType": 5126,
"count": 24,
"max": [
0.5,
0.5,
0.5
],
"min": [
-0.5,
-0.5,
-0.5
],
"type": "VEC3"
},
{
"bufferView": 2,
"byteOffset": 0,
"componentType": 5126,
"count": 24,
"max": [
1,
1,
1
],
"min": [
-1,
-1,
-1
],
"type": "VEC3"
},
{
"bufferView": 3,
"byteOffset": 0,
"componentType": 5126,
"count": 24,
"max": [
1,
1
],
"min": [
0,
0
],
"type": "VEC2"
}
],
"meshes": [
{
"name": "Box",
"primitives": [
{
"attributes": {
"POSITION": 1,
"NORMAL": 2,
"TEXCOORD_0": 3
},
"indices": 0,
"mode": 4,
"material": 0
}
]
}
],
"materials": [
{
"name": "Default Material",
"pbrMetallicRoughness": {
"baseColorFactor": [
0.8,
0.8,
0.8,
1
],
"roughnessFactor": 0.936
},
"emissiveFactor": [
0,
0,
0
]
}
],
"scenes": [
{
"name": "Practice-1",
"nodes": [
0,
3,
4,
5
]
}
],
"scene": 0
}
Q&A
自己解決
