diff --git a/AFrameLoc.html b/AFrameLoc.html
index f43b527..e9c511c 100644
--- 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'>
-
@@ -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
index 4ece45c..e27ba0c 100644
--- a/dino.html
+++ b/dino.html
@@ -1,19 +1,19 @@
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
diff --git a/globe.html b/globe.html
index 4755fe3..f46f900 100644
--- a/globe.html
+++ b/globe.html
@@ -1,164 +1,139 @@
+
-
- Hello, world!
-
-
-
-
-
-
-
+
+ Hello, world!
+
+
+
+
+
+
+
-
-
+ 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();
+ }
+
+
diff --git a/location.html b/location.html
index a75f77f..b28fb3b 100644
--- 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();
+
+
diff --git a/rader.html b/rader.html
index c56206f..ceb4e6c 100644
--- a/rader.html
+++ b/rader.html
@@ -45,7 +45,7 @@
const curruntLocation = () => {
- navigator.geolocation.getCurrentPosition()
+
}