Knit Tests

by bejnar

HTML

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js"></script>
<div id="app">
  <div class="preview">
		
    <a-scene embedded>
			<a-assets>
				<img id="my-texture" src="https://bejnar1.s3-eu-west-1.amazonaws.com/work/rejon/rejon-studio-tablet_hu87fc1ccfa4dbaf793849a0ba5a9ecc90_3097930_1200x0_resize_q85_lanczos.jpg">
			</a-assets>
      <a-entity 
      id="camera"
      camera
      look-controls 
      orbit-controls="target: 0 0 -3; 
				minDistance: 0.5; 
				maxDistance: 5; 
				initialPosition: 0 0 1"
      ></a-entity>
      
      <a-torus 
        position="0.3 0.45 -3" 
        arc="180" 
        radius="0.3" 
        radius-tubular="0.015"
        rotation="0 90 0"
        :color=`hsl(${color},100%,50%)` 
        material="src: https://source.unsplash.com/uicqU6-6pEA/800x800; color: #fff; shader: flat; blending: additive; side: double;"
                
      ></a-torus>

      <a-torus 
        position="-0.3 0.45 -3" 
        arc="180" 
        radius="0.3" 
        radius-tubular="0.015"
        rotation="0 90 0"
        :color=`hsl(${color},100%,50%)` 
        material="src: https://source.unsplash.com/uicqU6-6pEA/800x800; color: #fff; shader: flat; blending: additive; side: double;"
        
      ></a-torus>

      <a-cone 
        position="0 0.35 -3" 
        height="0.2"        
        :radius-bottom="chest" 
        radius-top="0.5"
        open-ended="true"
				:material="texture"
        
        ></a-cone>
      
      <a-cone 
      	id="target"
        position="0 0 -3" 
        height="0.5"
        :radius-bottom="waist" 
        :radius-top="chest"
        open-ended="true"
        :color=`hsl(${color},100%,50%)` 
        material="src: https://bejnar.de/work/rejon/rejon-tablet_hu5438825b9b6d1014226d20d231e650c2_697933_1000x0_resize_q85_lanczos.jpg; color: #fff; shader: flat;...

CSS

body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               'helvetica neue', helvetica,
               roboto, noto,
               'segoe ui', arial,
               sans-serif;
}

#app {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  height: 100vh;
  width: 100vw;
}
.preview {
  
}
.configure {
  padding: 5px 20px;
	display: grid;
}

.purchase {
	margin-top: 50px;
	display: inline-block;
	align-self: center;
	text-align: center;
	background-color: #1CCF4E;
	color: white;
	text-decoration: none;
	padding: 10px;
	border-radius: 5px;
}

h5 {
	font-weight: normal;
}

a-scene { min-width: 100%; min-height: 100%; }



input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #eee;
  background: #eee;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #eee;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #222;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #000;
}

JavaScript

console.log('init')
Vue.config.ignoredElements = [
  'a-scene',
  'a-entity',
  'a-camera',
  'a-cylinder',
  'a-cone',
  'a-sky',
  'a-torus',
	'a-assets'
]
new Vue({
  el: '#app',
  data: {
    chest: 0.6,
    hip: 0.6,
    waist: 0.5,
		color: 49,
		texture: 'src: #my-texture; color: #00ffff; shader: flat; blending: additive; side: double;'
  },
  mounted() {
    console.log('mounted')
  }
})