diff --git a/test/js/index.js b/test/js/index.js
index 3a2c2fa..e936790 100644
--- a/test/js/index.js
+++ b/test/js/index.js
@@ -19,11 +19,77 @@
     const scene = new THREE.Scene();
     scene.background = new THREE.Color( 0x87B8C0 ); // 背景色
 
-    // カメラを作成
-    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
-    camera.position.set(0, 400, 1000);
+    // カメラ設定
+const camera = new THREE.PerspectiveCamera(60, width / height);
+const controls = new THREE.PointerLockControls(camera);
+controls.getObject().position.y = 10
+// canvasクリックでポインタロック
+scene.add(controls.getObject());
+document.getElementById('canvas').addEventListener('click', function() {
+  controls.lock(); 
+});
 
-    const controls = new THREE.OrbitControls(camera, renderer.domElement);
+let move = (function() {
+
+  const SPEED = 60.0;
+
+  let moveForward  = false;
+  let moveBackward = false;
+  let moveLeft     = false;
+  let moveRight    = false;
+  let prevTime     = performance.now();
+
+  // キーダウンイベント設定
+  document.addEventListener( 'keydown', function(e) {
+    switch ( e.keyCode ) {
+      case 87: // w
+        moveForward = true;
+        break;
+      case 65: // a
+        moveLeft = true;
+        break;
+      case 83: // s
+        moveBackward = true;
+        break;
+      case 68: // d
+        moveRight = true;
+        break;
+    }
+  }, false );
+
+  // キーアップイベント設定
+  document.addEventListener( 'keyup', function(e) {
+    switch ( e.keyCode ) {
+      case 87: // w
+        moveForward = false;
+        break;
+      case 65: // a
+        moveLeft = false;
+        break;
+      case 83: // s
+        moveBackward = false;
+        break;
+      case 68: // d
+        moveRight = false;
+        break;
+    }
+  }, false );
+
+  return {
+    getVelocity() {
+      let time = performance.now();
+      let delta = ( time - prevTime ) / 1000;
+      let directionX = Number( moveLeft ) - Number( moveRight );
+      let directionZ = Number( moveForward ) - Number( moveBackward );
+      let velocity = new THREE.Vector3();
+      velocity.x -= directionX * SPEED * delta;
+      velocity.z -= directionZ * SPEED * delta;
+      prevTime = time;
+      return velocity;
+    }
+  }
+
+})();
 
     // Load GLTF or GLB
     const loader = new THREE.GLTFLoader();
@@ -66,48 +132,12 @@
     scene.add(ambient); //シーンにアンビエントライトを追加
 
     // 初回実行
-    tick();
+   function tick() {
+  let v = move.getVelocity();
+  controls.getObject().translateX(v.x);
+  controls.getObject().translateZ(v.z);
+  renderer.render(scene, camera); // レンダリング
 
-    function tick() {
-        controls.update();
-const raycaster = new THREE.Raycaster();
-const pointer = new THREE.Vector2();
-
-function onPointerMove( event ) {
-
-	// calculate pointer position in normalized device coordinates
-	// (-1 to +1) for both components
-
-	pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
+  requestAnimationFrame(tick);
 }
-
-function render() {
-
-	// update the picking ray with the camera and pointer position
-	raycaster.setFromCamera( pointer, camera );
-
-	// calculate objects intersecting the picking ray
-	const intersects = raycaster.intersectObjects( scene.children );
-
-	for ( let i = 0; i < intersects.length; i ++ ) {
-
-		moveforward =false;
-
-	}
-
-	renderer.render( scene, camera );
-
-}
-
-window.addEventListener( 'pointermove', onPointerMove );
-
-window.requestAnimationFrame(render);
-        if (model != null) {
-            console.log(model);
-        }
-        renderer.render(scene, camera);
-        requestAnimationFrame(tick);
-    }
 }