Customise hands and laser (raycaster) for headsets in Cloud Editor

🧑‍💻 Technical Support
5

Sure we can use the A-frame World template :


<!-- Copyright (c) 2022 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->

<a-scene
  xrextras-tap-recenter
  landing-page
  xrextras-loading
  xrextras-runtime-error
  xrextras-gesture-detector
  xrweb="allowedDevices: any; disableDefaultEnvironment: true; disableXrTablet: true;">

  <a-entity
    light="
      type: directional; 
      castShadow: true; 
      color: white; 
      intensity: 0.5"
    position="5 10 7">
  </a-entity>

  <a-light type="ambient" intensity="0.5"></a-light>

  <a-camera 
position="0 2 2" 
raycaster="showLine: false;" 
cursor="fuse: false; 
rayOrigin: mouse;">
  </a-camera>

  <a-entity
    id="leftHand"
    hand-controls="hand: left; handModelStyle: lowPoly; color: #ff0000">
  </a-entity>

  <a-box
    xrextras-one-finger-rotate
    position="0 0.5 0"
    material="
      color: #AD50FF; shader: flat; 
      src: https://cdn.8thwall.com/web/assets/cube-texture.png"
    shadow>
  </a-box>

  <a-plane
    height="2000"
    width="2000"
    rotation="-90 0 0"
    material="shader: shadow; opacity: 0.67"
    shadow>
  </a-plane>
</a-scene>

I tried raycaster=“showLine: false;”

I found this yesterday for custom texture on hands where @joshmao used threeJS (I didnt tried yet) but I still need some help to control the lasers display

Thank you again !