Created
January 21, 2018 20:55
-
-
Save Lightnet/8fb3d4a7c5f3ed2b3865bf894aecb9b8 to your computer and use it in GitHub Desktop.
unproject camera plane
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>voxel paint app</title> | |
| <!-- | |
| <script src="/socket.io/socket.io.js"></script> | |
| --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1"> | |
| <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| AFRAME.registerComponent('rayplane', { | |
| init: function () { | |
| var sceneEl = this.el; | |
| var point = document.querySelector('#point').object3D; | |
| //var camera = document.querySelector('[camera]'); | |
| var camera = document.querySelector('a-camera'); | |
| console.log(camera); | |
| console.log(camera.object3D); | |
| //console.log(camera.elements); | |
| //var raycaster = new THREE.Raycaster(); | |
| window.addEventListener( 'mousemove',function ( event ) { | |
| let vector = new THREE.Vector3( | |
| ( event.clientX / window.innerWidth ) * 2 - 1, | |
| - ( event.clientY / window.innerHeight ) * 2 + 1, | |
| 0.5 );//.unproject( camera ); | |
| vector.unproject( camera ); | |
| var dir = vector.sub( camera.position ).normalize(); | |
| var distance = - camera.position.z / dir.z; | |
| console.log(distance); | |
| let pos = new THREE.Vector3(camera.position.x,camera.position.y,camera.position.z).add( dir.multiplyScalar( distance ) ); | |
| //console.log(pos); | |
| if(pos !=null){ | |
| point.position.x = pos.x; | |
| point.position.y = pos.y; | |
| point.position.z = pos.z; | |
| } | |
| }); | |
| }, | |
| tick: function (time, delta) {} | |
| }); | |
| </script> | |
| <a-scene> | |
| <a-assets> | |
| </a-assets> | |
| <a-camera position="0 0 5" rayplane> | |
| </a-camera> | |
| <a-entity id="box" cursor-listener geometry="primitive: box" position="0 0 0" material="color: blue"></a-entity> | |
| <a-entity id="point" geometry="primitive: box" position="0 0 0" material="color: green"></a-entity> | |
| </a-scene> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment