查看内容

正方体的组合

本次教程基于引擎2.0版本;
教程描述:本次教程主要利用6个PLANE 组成一个正方体,为每一个PLANE赋予材质贴图,形成一个六个面分别可以独立出来的正方体;射线在本次案例中的运用;
项目截图:

脚本代码:


  1. //script.js
  2. this.boxGroup = new TONG.Group();
  3. var speed = 0;
  4. var mouse = new TONG.Vector2(),INTERSECTED;
  5. var raycaster = new TONG.Raycaster();
  6. function start()
  7. {
  8. console.log(this.boxGroup.children);
  9. }
  10.  
  11. function update(e)
  12. {
  13. this.boxGroup.rotation.y = speed;
  14.  
  15. //scene refresh();
  16. raycaster.setFromCamera( mouse, this.camera ); //射线应用1.渲染范围
  17. var intersects = raycaster.intersectObjects( this.boxGroup.children ); //获取场景的子物体
  18. if ( intersects.length > 0 ) {
  19. if ( INTERSECTED != intersects[ 0 ].object ) {
  20. speed+=0;
  21. if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  22. INTERSECTED = intersects[ 0 ].object;
  23. INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
  24. INTERSECTED.material.emissive.setHex( 0xff0000 );
  25. }
  26. } else {
  27. speed+=0.02;
  28. if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  29. INTERSECTED = null;
  30. }
  31. }
  32. function mousemove(event){
  33.  
  34. event.preventDefault();
  35. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  36. mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  37. }
分享: