StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POThree.js - how to detect what shape was selected? after drag
text
Body
copied!<p>I made a canvas with shapes in it...the shapes are draggable. Everything seems to work fine...But now I'm trying to figure out how can I detect what shape was selected/dragged?</p> <p>this is my code: (Javascript)</p> <pre><code>var container, stats; var camera, scene, projector, renderer; var objects = [], plane; var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), INTERSECTED, SELECTED; var basic_x_dist = 0; var cameraX = 0,cameraY = 0,cameraZ = 100; // default-same as camera.position.z! init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 500 ); camera.position.z = 300; scene = new THREE.Scene(); scene.add( new THREE.AmbientLight( 0x505050 ) ); var light = new THREE.SpotLight( 0xffffff, 1.5 ); light.position.set( 0, 500, 2000 ); light.castShadow = true; scene.add( light ); var geometry = new THREE.CubeGeometry( 7, 7, 1, 3, 3, 1); for ( var i = 0; i < 5; i ++ ) { var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( 'red.png' ) } ) ); //object.material.ambient = object.material.color; object.position.x = basic_x_dist; basic_x_dist += 10; //object.position.x = Math.random() * 100 - 50; //object.position.y = Math.random() * 60 - 30; //object.position.z = Math.random() * 80 - 40; //object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180; //object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180; //object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180; //object.scale.x = Math.random() * 2 + 1; //object.scale.y = Math.random() * 2 + 1; //object.scale.z = Math.random() * 2 + 1; //object.castShadow = true; //object.receiveShadow = true; scene.add( object ); objects.push( object ); } plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) ); plane.lookAt( camera.position ); plane.visible = false; scene.add( plane ); projector = new THREE.Projector(); renderer = new THREE.CanvasRenderer(); renderer.sortObjects = false; renderer.setSize( window.innerWidth, window.innerHeight ); //renderer.shadowMapEnabled = true; //renderer.shadowMapSoft = true; //renderer.shadowCameraNear = 3; //renderer.shadowCameraFar = camera.far; //renderer.shadowCameraFov = 50; //renderer.shadowMapBias = 0.0039; //renderer.shadowMapDarkness = 0.5; //renderer.shadowMapWidth = 1024; //renderer.shadowMapHeight = 1024; container.appendChild( renderer.domElement ); var info = document.createElement( 'div' ); info.style.position = 'absolute'; info.style.top = '10px'; info.style.width = '100%'; info.style.textAlign = 'center'; info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - draggable cubes'; container.appendChild( info ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement ); renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ); renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ); renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false ); document.onkeypress=key_event; } function onDocumentMouseMove( event ) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); if ( SELECTED ) { var intersects = ray.intersectObject( plane ); SELECTED.position.copy( intersects[ 0 ].point.subSelf( offset ) ); return; } var intersects = ray.intersectObjects( objects ); if ( intersects.length > 0 ) { if ( INTERSECTED != intersects[ 0 ].object ) { if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex ); INTERSECTED = intersects[ 0 ].object; INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); plane.position.copy( INTERSECTED.position ); } container.style.cursor = 'pointer'; } else { if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex ); INTERSECTED = null; container.style.cursor = 'auto'; } } function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( objects ); if ( intersects.length > 0 ) { SELECTED = intersects[ 0 ].object; var intersects = ray.intersectObject( plane ); offset.copy( intersects[ 0 ].point ).subSelf( plane.position ); container.style.cursor = 'move'; } } function onDocumentMouseUp( event ) { event.preventDefault(); if ( INTERSECTED ) { plane.position.copy( INTERSECTED.position ); SELECTED = null; } container.style.cursor = 'auto'; } function rotateLeft(){ cameraX += 5; } function rotateRight(){ cameraX -= 5; } function rotateUp(){ cameraY += 5; } function rotateDown(){ cameraY -= 5; } function zoomIn(){ cameraZ += 5; } function zoomOut(){ cameraZ -= 5; } function showPositions(){ for(var i=0; i<5; i++){ alert(objects[i].position.x); alert(objects[i].position.y); alert(objects[i].position.z); } } function key_event( event ) { var unicode=event.keyCode? event.keyCode : event.charCode; //alert(unicode); // find the char code switch(unicode){ case 97: rotateLeft(); break; case 100: rotateRight(); break; case 119: rotateUp(); break; case 120: rotateDown(); break; case 122: zoomIn(); break; case 99: zoomOut(); break; case 115: showPositions(); break; } } function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { camera.position.x = cameraX; // updating the camera view-x scale after events camera.position.y = cameraY; // updating the camera view-y scale after events camera.position.z = cameraZ; // updating the camera view-z scale after events camera.lookAt( scene.position ); renderer.render( scene, camera ); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload