网页3D：three.js入门

H、绑定陀螺仪。

  1. var controlsBtn= document.getElementById("controlBtn"); // 控制陀螺仪开关的按钮
  2. var isDeviceing = false; // 陀螺仪状态
  3. controlsBtn.addEventListener("touchend", controlDevice, true);
  4. isDeviceing == true ? $("#controlBtn").addClass("controlIconae") : $("#controlBtn").addClass("controlIcon");
  5. // 初始化陀螺仪
  6. function initDevices() {
  7.     deviceControl = new THREE.DeviceOrientationControls(camera);
  8. }
  9. /* 控制陀螺仪 */
  10. function controlDevice(event) {
  11.     if (isDeviceing == true) {
  12.         isDeviceing = false;
  13.         //关闭陀螺仪
  14.         $("#controlBtn").removeClass("controlIcon").addClass("controlIconae");
  15.     } else {
  16.         isDeviceing = true;
  17.         //开启陀螺仪
  18.         $("#controlBtn").removeClass("controlIconae").addClass("controlIcon");
  19.     }
  20. }

I、给全景里的物体加点击事件。

  1. /**
  2.  *点击按钮
  3.  */
  4. $('.btn1').on('touchstart',function(){
  5.     alert('第一个按钮被点击了');
  6. });
  7. $('.btn2').on('touchstart',function(){
  8.     alert('第二个按钮被点击了');
  9. });

截止到这一步，一个立方体的3D基本上已经完成了。大家可以扫描下方二维码查看演示效果。

注意事项

重力感应在安卓下有时候体验非常不好，所以我做的这个DEMO在iOS和Android下都支持手势操作，想体验重力感应的小伙伴可以点击左上角的按钮，选择开启重力感应或关闭重力感应。

 

 

1 2 3
你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！