.

Sonnet-Songbird · Apr 23, 2024 · 6a25487 · 6a25487
1 parent cf7700a
commit 6a25487
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 172 deletions.
diff --git a/AFrameLoc.html b/AFrameLoc.html
@@ -7,7 +7,6 @@
             src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
     <script type='text/javascript'
             src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>
-</head>
 <body>
     <a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'
              renderer='antialias: true; alpha: true'>
@@ -26,7 +25,7 @@
                     alert(`첫 번째 GPS 위치를 얻었습니다: 경도 ${e.detail.position.longitude} 위도 ${e.detail.position.latitude}`);
 
                     const entity = document.createElement("a-box");
-                    entity.setAttribute("scale", {x: 10000, y: 10000, z: 10000});
+                    entity.setAttribute("scale", {x: 100, y: 100, z: 100});
                     entity.setAttribute('material', {color: 'blue'});
                     entity.setAttribute('gps-entity-place', {
                         latitude: e.detail.position.latitude + 0.001,

diff --git a/dino.html b/dino.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
-<html>
-    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-    <!-- we import arjs version without NFT but with marker + location based support -->
-    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
-    <body style="margin : 0px; overflow: hidden;">
-        <a-scene embedded arjs>
+<html lang="ko">
+<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+<!-- we import arjs version without NFT but with marker + location based support -->
+<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
+<body style="margin : 0px; overflow: hidden;">
+    <a-scene embedded arjs>
         <a-marker preset="hiro">
             <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
             <a-entity
-            position="0 0 0"
-            scale="0.05 0.05 0.05"
-            gltf-model="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
+                    position="0 0 0"
+                    scale="0.05 0.05 0.05"
+                    gltf-model="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
             ></a-entity>
         </a-marker>
         <a-entity camera></a-entity>
-        </a-scene>
-    </body>
+    </a-scene>
+</body>
 </html>
diff --git a/globe.html b/globe.html
@@ -1,164 +1,139 @@
 <!DOCTYPE html>
+<html lang="ko">
 <head>
-	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-	<title>Hello, world!</title>
-	<script src='js/three.js'></script>
-	<script src="jsartoolkit5/artoolkit.min.js"></script>
-	<script src="jsartoolkit5/artoolkit.api.js"></script>
-	<script src="threex/threex-artoolkitsource.js"></script>
-	<script src="threex/threex-artoolkitcontext.js"></script>
-	<script src="threex/threex-arbasecontrols.js"></script>
-	<script src="threex/threex-armarkercontrols.js"></script>
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <title>Hello, world!</title>
+    <script src='js/three.js'></script>
+    <script src="jsartoolkit5/artoolkit.min.js"></script>
+    <script src="jsartoolkit5/artoolkit.api.js"></script>
+    <script src="threex/threex-artoolkitsource.js"></script>
+    <script src="threex/threex-artoolkitcontext.js"></script>
+    <script src="threex/threex-arbasecontrols.js"></script>
+    <script src="threex/threex-armarkercontrols.js"></script>
 </head>
 
 <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
 
-<!--
-  Example created by Lee Stemkoski: https://github.com/stemkoski
-  Based on the AR.js library and examples created by Jerome Etienne: https://github.com/jeromeetienne/AR.js/
--->
 
-<script>
+    <script>
 
-var scene, camera, renderer, clock, deltaTime, totalTime;
+        let scene, camera, renderer, clock, deltaTime, totalTime;
 
-var arToolkitSource, arToolkitContext;
-
-var markerRoot1;
-
-var mesh1;
-
-initialize();
-animate();
-
-function initialize()
-{
-	scene = new THREE.Scene();
-
-	let ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
-	scene.add( ambientLight );
-
-	camera = new THREE.Camera();
-	scene.add(camera);
-
-	renderer = new THREE.WebGLRenderer({
-		antialias : true,
-		alpha: true
-	});
-	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
-	renderer.setSize( 640, 480 );
-	renderer.domElement.style.position = 'absolute'
-	renderer.domElement.style.top = '0px'
-	renderer.domElement.style.left = '0px'
-	document.body.appendChild( renderer.domElement );
-
-	clock = new THREE.Clock();
-	deltaTime = 0;
-	totalTime = 0;
-
-	////////////////////////////////////////////////////////////
-	// setup arToolkitSource
-	////////////////////////////////////////////////////////////
-
-	arToolkitSource = new THREEx.ArToolkitSource({
-		sourceType : 'webcam',
-	});
-
-	function onResize()
-	{
-		arToolkitSource.onResize()
-		arToolkitSource.copySizeTo(renderer.domElement)
-		if ( arToolkitContext.arController !== null )
-		{
-			arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
-		}
-	}
-
-	arToolkitSource.init(function onReady(){
-		onResize()
-	});
-
-	// handle resize event
-	window.addEventListener('resize', function(){
-		onResize()
-	});
-
-	////////////////////////////////////////////////////////////
-	// setup arToolkitContext
-	////////////////////////////////////////////////////////////
-
-	// create atToolkitContext
-	arToolkitContext = new THREEx.ArToolkitContext({
-		cameraParametersUrl: 'data/camera_para.dat',
-		detectionMode: 'mono'
-	});
-
-	// copy projection matrix to camera when initialization complete
-	arToolkitContext.init( function onCompleted(){
-		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
-	});
-
-	////////////////////////////////////////////////////////////
-	// setup markerRoots
-	////////////////////////////////////////////////////////////
-
-	// build markerControls
-	markerRoot1 = new THREE.Group();
-	scene.add(markerRoot1);
-	let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
-		type: 'pattern', patternUrl: "data/hiro.patt",
-	})
-
-	let geometry1 = new THREE.SphereGeometry(1, 32,32);
-
-	let loader = new THREE.TextureLoader();
-	let texture = loader.load( 'images/earth-sphere.jpg', render );
-	let material1 = new THREE.MeshLambertMaterial( { map: texture, opacity: 0.5 } );
-
-	mesh1 = new THREE.Mesh( geometry1, material1 );
-	mesh1.position.y = 1;
-
-	markerRoot1.add( mesh1 );
-
-	let pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
-	pointLight.position.set(0.5,3,2);
-	// create a mesh to help visualize the position of the light
-	pointLight.add(
-		new THREE.Mesh(
-			new THREE.SphereBufferGeometry( 0.05, 16,8 ),
-			new THREE.MeshBasicMaterial({ color: 0xffffff, opacity: 0.5 })
-		)
-	);
-	markerRoot1.add( pointLight );
-}
-
-
-function update()
-{
-	if ( markerRoot1.visible )
-		mesh1.rotation.y += 0.01;
-	// update artoolkit on every frame
-	if ( arToolkitSource.ready !== false )
-		arToolkitContext.update( arToolkitSource.domElement );
-}
-
-
-function render()
-{
-	renderer.render( scene, camera );
-}
-
-
-function animate()
-{
-	requestAnimationFrame(animate);
-	deltaTime = clock.getDelta();
-	totalTime += deltaTime;
-	update();
-	render();
-}
-
-</script>
+        let arToolkitSource, arToolkitContext;
+
+        let markerRoot1;
+
+        let mesh1;
+
+        initialize();
+        animate();
+
+        function initialize() {
+            scene = new THREE.Scene();
+
+            let ambientLight = new THREE.AmbientLight(0xcccccc, 0.5);
+            scene.add(ambientLight);
+
+            camera = new THREE.Camera();
+            scene.add(camera);
+
+            renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                alpha: true
+            });
+            renderer.setClearColor(new THREE.Color('lightgrey'), 0)
+            renderer.setSize(640, 480);
+            renderer.domElement.style.position = 'absolute'
+            renderer.domElement.style.top = '0px'
+            renderer.domElement.style.left = '0px'
+            document.body.appendChild(renderer.domElement);
+
+            clock = new THREE.Clock();
+            deltaTime = 0;
+            totalTime = 0;
+
+            arToolkitSource = new THREEx.ArToolkitSource({
+                sourceType: 'webcam',
+            });
+
+            function onResize() {
+                arToolkitSource.onResize()
+                arToolkitSource.copySizeTo(renderer.domElement)
+                if (arToolkitContext.arController !== null) {
+                    arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
+                }
+            }
+
+            arToolkitSource.init(function onReady() {
+                onResize()
+            });
+
+            window.addEventListener('resize', function () {
+                onResize()
+            });
+
+            arToolkitContext = new THREEx.ArToolkitContext({
+                cameraParametersUrl: 'data/camera_para.dat',
+                detectionMode: 'mono'
+            });
+
+            // copy projection matrix to camera when initialization complete
+            arToolkitContext.init(function onCompleted() {
+                camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
+            });
+
+            markerRoot1 = new THREE.Group();
+            scene.add(markerRoot1);
+            let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
+                type: 'pattern', patternUrl: "data/hiro.patt",
+            })
+
+            let geometry1 = new THREE.SphereGeometry(1, 32, 32);
+
+            let loader = new THREE.TextureLoader();
+            let texture = loader.load('images/earth-sphere.jpg', render);
+            let material1 = new THREE.MeshLambertMaterial({map: texture, opacity: 0.5});
+
+            mesh1 = new THREE.Mesh(geometry1, material1);
+            mesh1.position.y = 1;
+
+            markerRoot1.add(mesh1);
+
+            let pointLight = new THREE.PointLight(0xffffff, 1, 100);
+            pointLight.position.set(0.5, 3, 2);
+            pointLight.add(
+                new THREE.Mesh(
+                    new THREE.SphereBufferGeometry(0.05, 16, 8),
+                    new THREE.MeshBasicMaterial({color: 0xffffff, opacity: 0.5})
+                )
+            );
+            markerRoot1.add(pointLight);
+        }
+
+
+        function update() {
+            if (markerRoot1.visible)
+                mesh1.rotation.y += 0.01;
+            // update artoolkit on every frame
+            if (arToolkitSource.ready !== false)
+                arToolkitContext.update(arToolkitSource.domElement);
+        }
+
+
+        function render() {
+            renderer.render(scene, camera);
+        }
+
+
+        function animate() {
+            requestAnimationFrame(animate);
+            deltaTime = clock.getDelta();
+            totalTime += deltaTime;
+            update();
+            render();
+        }
+
+    </script>
 
 </body>
 </html>
diff --git a/location.html b/location.html
@@ -19,7 +19,6 @@
                 const x = (Math.random() - 0.5) * 100;
                 const z = (Math.random() - 0.5) * 100;
 
-                //엔티티 추가
 
                 const geom = new THREE.BoxGeometry(size, size, size);
                 const mtl = new THREE.MeshBasicMaterial({color});
@@ -42,11 +41,11 @@
             arjs.startGps();
 
             function render() {
-                if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
-                    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
-                    camera.aspect = canvas.clientWidth / canvas.clientHeight;
-                    camera.updateProjectionMatrix();
-                }
+                // if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
+                //     renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+                //     camera.aspect = canvas.clientWidth / canvas.clientHeight;
+                //     camera.updateProjectionMatrix();
+                // }
                 renderer.render(scene, camera);
                 requestAnimationFrame(render);
             }
@@ -55,6 +54,8 @@
         }
 
         main();
+
+
     </script>
 </body>
 </html>
diff --git a/rader.html b/rader.html
@@ -45,7 +45,7 @@
 
 
         const curruntLocation = () => {
-            navigator.geolocation.getCurrentPosition()
+
         }
     </script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
             const curruntLocation = () => {
-                navigator.geolocation.getCurrentPosition()
             }
         </script>
@@ Expand Down @@