Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="extended layered model in VR">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
      <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
      <script src="https://rawgit.com/dmarcos/a-painter-loader-component/master/dist/a-painter-loader-component.min.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.11.4/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/super-hands@2.0.2/dist/super-hands.min.js"></script>
​
  
</head>
<body>
  
  
  <a-scene>
    <a-entity progressive-controls>
  <a-camera super-hands>
    <a-entity raycaster></a-entity>
  </a-camera>
  <a-entity class="right-controller" super-hands></a-entity>
  <a-entity class="left-controller" super-hands></a-entity>
</a-entity>
    
  <a-entity position="0.611 -0.67 -0.854" hoverable grabbable stretchable draggable dropppable material="opacity:1.0" class="layer" id="cell" a-painter-loader="src: https://ucarecdn.com/9f422a82-cd48-489b-b162-1cf7eef73f91/"></a-entity>
  <a-entity position="1.066 0 -1.633" material="opacity:0.1" class="layer" id="chemical-molecule" a-painter-loader="src: https://ucarecdn.com/f5aaf19a-991b-4cf9-878d-da4bf6854d9b/"></a-entity>
  <a-entity position="0.575 0.034 -1.223" material="opacity:0.0" class="layer" id="atom" a-painter-loader="src: https://ucarecdn.com/6a0403a3-026b-404a-9f9c-0b6d0bdcf2c0/"></a-entity>
    <a-sky color="darkblue"></a-sky>
    <a-entity geometry="radius:10;segmentsWidth:8;segmentsHeight:8;primitive:sphere" material="side:back;wireframe:true"></a-entity>
  </a-scene>
​
  <pre>
# start JSBin to copy/paste this description and link to https://fabien.benetou.fr/Analysis/ExtendedLayeredModel
# start A-painter
# drag and drop 3 images of my 3 layers namely a carbon atom, , a cell
# draw an atom with it's neutron and electrons and save
# clear, draw a chemical compound and save
# clear, draw a cell with it's constituent and save
# gather those 3 drawings thanks to the apainter loader component
# load the super hands component
# bind the size of each loaded drawing to the opacity of the other 2 models
# test
  </pre>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Utopiahpro
0viewers