From d6c8e5487f3f0b4b8b5c2340b229ed5761c3edb0 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Mon, 14 Apr 2025 02:46:59 +0900
Subject: [PATCH] fix

---
 book/city/07_teleport.md | 72 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 68 insertions(+), 4 deletions(-)
diff --git a/book/city/07_teleport.md b/book/city/07_teleport.md
index 3cc02bb..9fafd2c 100644
--- a/book/city/07_teleport.md
+++ b/book/city/07_teleport.md
@@ -5,12 +5,76 @@
 1. sketchfabのgalaxyをbrowserで表示する
 2. ボタンが押されたとき移動先へ移動する
 
-```html
-<div class="sketchfab-embed-wrapper"> <iframe title="Need some space?" width="100%" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%;" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/d6521362b37b48e3a82bce4911409303/embed?autostart=1&ui_animations=0&ui_infos=0&ui_stop=0&ui_inspector=0&ui_watermark_link=0&ui_watermark=0&ui_hint=0&ui_ar=0&ui_help=0&ui_settings=0&ui_vr=0&ui_fullscreen=0&ui_annotations=0&ui_theme=dark"> </iframe> </div>
-```
-
 <iframe width="100%" height="415" src="https://www.youtube.com/embed/Ub0B91UtGQI?rel=0&showinfo=0&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
+## sketchfab api
+
+apiを使ってzoom-in, zoom-outします。
+
+```html
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Sketchfab Viewer API example</title>
+		<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.12.1.js"></script>
+	</head>
+	<body>
+		<iframe id="api-frame" class="w-full" width="100%" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%;" allow="xr-spatial-tracking; autoplay; fullscreen; xr-spatial-tracking; accelerometer" xr-spatial-tracking web-share></iframe>
+		<script type="text/javascript">
+				var iframe = document.getElementById( 'api-frame' );
+				var uid = 'd6521362b37b48e3a82bce4911409303';
+				var client = new Sketchfab( iframe );
+				var api;
+				client.init( uid, {
+					success: function onSuccess( api ){
+						api.start({ preload:1 });
+						api.addEventListener( 'viewerready', function() {
+							api.getCameraLookAt((err, camera) => {
+								if (err) return console.error('カメラ取得失敗');
+								const direction = [
+									camera.position[0] - camera.target[0],
+									camera.position[1] - camera.target[1],
+									camera.position[2] - camera.target[2]
+								];
+								const zoomFactor = 0.01;
+								const newPosition = [
+									camera.target[0] + direction[0] * zoomFactor,
+									camera.target[1] + direction[1] * zoomFactor,
+									camera.target[2] + direction[2] * zoomFactor
+								];
+								api.setCameraLookAt(newPosition, camera.target, 10, (err) => {
+									if (!err) console.log('ズームアウト成功');
+								});
+							});
+						} );
+					},
+					error: function onError() {
+						console.log( 'Viewer error' );
+					},
+					camera:1,
+					autospin: 0,
+					preload: 0,
+					ui_controls: 0,
+					ui_infos: 0,
+					ui_inspector: 0,
+					ui_stop: 0,
+					ui_watermark: 0,
+					ui_watermark_link: 0,
+					ui_annotations: 0,
+					ui_hint: 0,
+					ui_ar:0,ui_help:0,
+					ui_settings:0,
+					ui_vr:0,
+					ui_fullscreen:0,
+					ui_loading: 0,
+				} );
+		</script>
+	</body>
+</html>
+```
+
 ## 本来やりたかったこと
 
 本来はキャラクターの動きと空間が連動するようにしたかったです。
