how do i make these objects clickable and highlighted when clicked on it [Answered]RSS

• • Reply
  Lexi85

  Member

  200 Points

  692 Posts

  how do i make these objects clickable and highlighted when clicked on it

  Aug 23, 2016 11:03 AM|Lexi85|LINK

  I have got below code for a cube how do I write a code in javascript to make this cube highlighted when clicking it....any tutorials or example links to play around with please.

  <script>
     
  			var container //   , stats;
  			var camera, controls, scene, renderer;
  			var objects = [];
  			var plane = new THREE.Plane();
  			var raycaster = new THREE.Raycaster();
  			var mouse = new THREE.Vector2(),
  			offset = new THREE.Vector3(),
  			intersection = new THREE.Vector3(),
  			INTERSECTED, SELECTED;
  
  			init();
  			animate();
  
  			function init() {
  
  				//container = document.createElement( 'div' );
       
  				camera.position.z = 2000;
  
  				controls = new THREE.TrackballControls( camera , container ); //**
  				controls.rotateSpeed = 1.0;
  				controls.zoomSpeed = 1.2;
  				controls.panSpeed = 0.8;
  				controls.noZoom = false;
  				controls.noPan = false;
  				controls.staticMoving = true;
  				controls.dynamicDampingFactor = 0.3;
  
  				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;
  
  				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
  				light.shadow.bias = - 0.00022;
  
  				light.shadow.mapSize.width = 2048;
  				light.shadow.mapSize.height = 2048;
  
  				scene.add( light );
  
  				var geometry = new THREE.BoxGeometry( 40, 40, 40 );
  var ax = ay = az = 0;
  				for ( var i = 0; i < 512; i ++ ) {
  var newColor = (Math.random() * 0x1)*0x100 + (Math.random() * 0x1)*0x10000 + (Math.random() * 0x1)*0x1000000 ;
  
  					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: newColor } ) );
  
  
  					object.position.x = ax;
  					object.position.y = ay;
  					object.position.z = az;
  
  					object.scale.x = 2;
  					object.scale.y = 2;
  					object.scale.z = 2;
  
  					object.castShadow = true;
  					object.receiveShadow = true;
  
  					scene.add( object );
  
  					objects.push( object );
  
  ax = ax + 100;
  if(ax > 700){
  ax = 0;
  ay = ay + 100;
  }
  if(ay > 700){
  ay = 0;
  az = az + 100;
  }  
      
  				}
  
  				renderer = new THREE.WebGLRenderer( { antialias: true } );
  				renderer.setClearColor( 0xf0f0f0 );
  			
  				//renderer.setSize( window.innerWidth, window.innerHeight );
         
  
  				renderer.shadowMap.enabled = true;
  				renderer.shadowMap.type = THREE.PCFShadowMap;
  
  				container.appendChild( renderer.domElement );
  
  
  				renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
  				renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
  				renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
          
  
  				//window.addEventListener( 'resize', onWindowResize, false );
  
  			}
  
  			
  			function onDocumentMouseMove( event ) {
  
  				event.preventDefault();
  
  				mouse.x = ( event.clientX / container.innerWidth ) * 2 - 1;  ///////
  				mouse.y = - ( event.clientY / container.innerHeight ) * 2 + 1;  ///////
  
  				raycaster.setFromCamera( mouse, camera );
  
  				if ( SELECTED ) {
  
  					if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
  
  						SELECTED.position.copy( intersection.sub( offset ) );
  
  					}
  
  					return;
  
  				}
  
  				var intersects = raycaster.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.setFromNormalAndCoplanarPoint(
  							camera.getWorldDirection( plane.normal ),
  							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();
  
  				raycaster.setFromCamera( mouse, camera );
  
  				var intersects = raycaster.intersectObjects( objects );
  
  				if ( intersects.length > 0 ) {
  
  					controls.enabled = false;
  
  					SELECTED = intersects[ 0 ].object;
  
  					if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
  
  						offset.copy( intersection ).sub( SELECTED.position );
  
  					}
  
  					container.style.cursor = 'move';
  
  				}
  
  			}
  
  			function onDocumentMouseUp( event ) {
  
  				event.preventDefault();
  
  				controls.enabled = true;
  
  				if ( INTERSECTED ) {
  
  					SELECTED = null;
  
  				}
  
  				container.style.cursor = 'auto';
  
  			}
  
  			//
  
  			function animate() {
  
  				requestAnimationFrame( animate );
  
  				render();
  				//   stats.update();
  
  			}
  
  			function render() {
  
  				controls.update();
  
  				renderer.render( scene, camera );
  
  			}

• • Reply
  Cathy Zou

  Star

  8500 Points

  2883 Posts

  Re: how do i make these objects clickable and highlighted when clicked on it

  Aug 25, 2016 01:54 AM|Cathy Zou|LINK

  Hi Lexi85,

  From your description, I think that you also could implement raycaster to select/click/pick certain object in three.js or use Object picking by referring to the following links:

  http://stackoverflow.com/questions/12376263/three-js-clickable-cube-texture

  http://threejs.org/examples/canvas_geometry_cube.html

  https://soledadpenades.com/articles/three-js-tutorials/object-picking/

  http://stackoverflow.com/questions/17638933/three-js-clickable-objects

  Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know.

  Best regards
  Cathy

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.