当前位置: 首页 > 工具软件 > voxel.js > 使用案例 >

threejs第十三用 简单堆积木

仲鸿风
2023-12-01

放一个地平面 然后点击,发出射线,打到地面了或者打中小方块了就生成一个小方块 按住shift点击就销毁一个

核心就这么多,这里的小方块长50

          function onDocumentMouseDown(e)
		 {
		 e.preventDefault();
		 mouse.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1;//[-1 1]
		 mouse.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1;//[1 -1]
		 var vector = new THREE.Vector3(mouse.x, mouse.y,1.0).unproject(camera);
		 ray.setFromCamera(mouse,camera);
		 
		 intersects=ray.intersectObjects(objs);
		 if(intersects.length > 0 ) 
		 {
		 
		 
		  var result=intersects[0];
		  if(isShift==1)
		  {
		    if(result.object!=plane)
			{
			    scene.remove( result.object );

				objs.splice( objs.indexOf( result.object ), 1 );
			}
		  }
		  else
		  {
		     
		     var voxel = new THREE.Mesh( cubeGeometry, cubeMaterial );
			 voxel.position.copy( result.point ).add( result.face.normal );						
			 voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
			 voxel.castShadow = true;
			 scene.add( voxel );
			 objs.push( voxel );
			 console.log(666);
		  }
		 }
		 }//

一起交流threejs吧 企鹅群511163089

 类似资料: