Select Git revision
42loop authored
test.html 10.93 KiB
<html>
<head>
<!-- <script src="aframe.min.js"></script> -->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!-- <script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script> -->
<script src="aframe-frustum-lock-component.js"></script>
<script src="aframe-pointcloud-component.js"></script>
<script src="aframe-click-drag-component.min.js"></script>
<script src="aframe-mouse-cursor-component.js"></script>
<script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
<script>
registerAframeClickDragComponent(window.AFRAME);
</script>
</head>
<body>
<script type="text/javascript">
/*
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {
console.log('I was clicked');
});
}
});
*/
AFRAME.registerComponent('raycaster-autorefresh', {
init: function () {
var el = this.el;
this.el.addEventListener('model-loaded', function () {
document.querySelector("[cursor]").setAttribute("cursor", "fuse: false; rayOrigin: mouse;");
var cursorEl = el.querySelector('[raycaster]');
cursorEl.components.raycaster.refreshObjects();
});
}
});
var myVar = setInterval(myTimer, 1000);
function startVideo(){
var videoEl = document.querySelector('#video1');
console.log(videoEl)
videoEl.play();
}
function hud_log(t)
{
var mylog=sceneEl.querySelector('#debug');
mylog.setAttribute('value',t);
}
function myTimer()
{
//console.log("timer event");
var mytime=sceneEl.querySelector('#timetext');
var d = new Date();
mytime.setAttribute('value',d.toLocaleTimeString());
}
function run()
{
console.log("initializing scene");
var ass=document.querySelector('a-assets');
while (!ass.hasLoaded)
{console.log("assets not yet loaded");
}
var mybutton=document.querySelector('#button');
//console.log(mybutton);
mybutton.addEventListener('mouseup', function (event) {
//startVideo();
console.log('Entity clicked: ',event.detail.target.id);
hud_log('button clicked !');
/*
var el = document.getElementById('scene');
var kunschtcontainer=document.createElement('a-entity');
kunschtcontainer.setAttribute('position', '-3 1 0');
var obj = document.createElement('a-obj-model');
obj.setAttribute('src', '#kunscht1-obj');
obj.setAttribute('mtl', '#kunscht1-mtl');
obj.setAttribute('scale', '0.005 0.005 0.005');
obj.setAttribute('rotation','-90 0 0');
obj.setAttribute('id','kunscht1');
obj.setAttribute('shadow','cast')
obj.addEventListener('click', function (event) {
console.log('Entity clicked: ',event.detail.target.id);
hud_log('Kunst !');
});
kunschtcontainer.appendChild(obj);
var anim=document.createElement('a-animation');
anim.setAttribute('attribute','rotation');
anim.setAttribute('dur','20000');
anim.setAttribute('fill','forwards');
anim.setAttribute('to','0 360 0');
anim.setAttribute('easing','linear');
anim.setAttribute('repeat','indefinite');
kunschtcontainer.appendChild(anim);
el.appendChild(kunschtcontainer);
var myspot=sceneEl.querySelector('#spotlight');
var k=sceneEl.querySelector('#kunscht1');
myspot.setAttribute('light','target',k);
var obj2 = document.createElement('a-obj-model');
obj2.setAttribute('src', '#ubootgang-obj');
obj2.setAttribute('mtl', '#ubootgang-mtl');
obj2.setAttribute('shadow','cast')
//obj2.setAttribute('id','kunscht1');
el.appendChild(obj2);
var egroup=document.createElement('a-entity');
egroup.setAttribute('id','electro-group');
egroup.setAttribute('material','opacity:0.8;transparent:true;color:#ff8800');
var obj4 = document.createElement('a-obj-model');
obj4.setAttribute('src', '#elektro-obj');
obj4.setAttribute('color', '#0000FF');
//obj4.setAttribute('mtl', '#elektro-mtl');
//obj2.setAttribute('id','kunscht1');
egroup.appendChild(obj4);
el.appendChild(egroup);
var pcontainer=document.createElement('a-entity');
pcontainer.setAttribute('scale','.1 .1 .1');
pcontainer.setAttribute('rotation','-91 205 0');
pcontainer.setAttribute('position','-3.9 2.22 2.52');
var obj3 = document.createElement('a-pointcloud');
obj3.setAttribute('src', '#pointcloud-ply');
obj3.setAttribute('size','.01');
obj3.setAttribute('scale','.1 .1 .1');
// obj3.setAttribute('texture','#cloudtex-png');
obj3.setAttribute('depthWrite','false');
pcontainer.appendChild(obj3);
//obj2.setAttribute('id','kunscht1');
el.appendChild(pcontainer);
*/
});
/*
var myartwork=sceneEl.querySelector('#kunscht1');
console.log(myartwork);
myartwork.addEventListener('click', function (event) {
console.log('Entity clicked: ',event.detail.target.id);
hud_log('Kunst !');
});
var mytestcube2=sceneEl.querySelector('#video1');
console.log(mytestcube2);
mytestcube2.addEventListener('click', function (event) {
console.log('Entity clicked: ',event.detail.target.id);
hud_log('Video !');
});
*/
};
</script>
<a-scene id="scene" raycaster-autorefresh light="defaultLightsEnabled: true" antialias="true">
<a-assets>
<a-asset-item id="basemodel-obj" src="assets/untitled.obj"></a-asset-item>
<a-asset-item id="basemodel-mtl" src="assets/Halle.mtl"></a-asset-item>
<!-- <img id="logo" src="assets/logo.gif">
<video id="testvid" autoplay src="assets/machines.m4v"></video>
<a-asset-item id="ubootgang-obj" src="assets/ubootgang.obj"></a-asset-item>
<a-asset-item id="ubootgang-mtl" src="assets/ubootgang.mtl"></a-asset-item>
<a-asset-item id="elektro-obj" src="assets/elektro.obj"></a-asset-item>
<a-asset-item id="elektro-mtl" src="assets/elektro.mtl"></a-asset-item>
<a-asset-item id="traverse1-obj" src="assets/traverse1.obj"></a-asset-item>
<a-asset-item id="traverse1-mtl" src="assets/traverse1.mtl"></a-asset-item>
<a-asset-item id="traverse2-obj" src="assets/traverse1.obj"></a-asset-item>
<a-asset-item id="traverse2-mtl" src="assets/traverse1.mtl"></a-asset-item>
<a-asset-item id="kunscht1-obj" src="assets/newhill.obj"></a-asset-item>
<a-asset-item id="kunscht1-mtl" src="assets/newhill.mtl"></a-asset-item>
<a-asset-item id="pointcloud-ply" src="assets/garage8.ply"></a-asset-item>
<a-asset-item id="cloudtex-png" src="assets/cloudtex.png"></a-asset-item>
-->
</a-assets>
<!--obj imports -->
<!--obj imports -->
<!--shadow="cast: true; receive: true"-->
<a-entity shadow="cast: true; receive: true" position="0 0 0" scale="1 1 1" rotation="0 0 0" obj-model="obj: #basemodel-obj;mtl: #basemodel-mtl"></a-entity>
<!--<a-entity shadow="cast: true; receive: true" material="opacity:1;transparent:false" position="0 0 0" scale="1 1 1" rotation="0 0 0" obj-model="obj: #ubootgang-obj; mtl: #ubootgang-mtl"></a-entity>-->
<!--<a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" obj-model="obj: #pointcloud-obj; mtl: #pountcloud-mtl"></a-entity>-->
<!--
<a-entity material="opacity:0.8;transparent:true" position="-4 4.35 -1" scale=".001 .001 .001" rotation="0 90 -90" obj-model="obj: #traverse1-obj; mtl: #traverse1-mtl"></a-entity>
<a-entity material="opacity:0.8;transparent:true" position="-4.4 4.35 2.4" scale=".001 .001 .001" rotation="0 90 -90" obj-model="obj: #traverse2-obj; mtl: #traverse2-mtl"></a-entity>
<a-entity material="opacity:0.8;transparent:true" position="-4 4.35 6.4" scale=".001 .001 .001" rotation="0 90 -90" obj-model="obj: #traverse2-obj; mtl: #traverse2-mtl"></a-entity>
-->
<!-- <a-entity id="kunscht1" material="opacity:0.8;transparent:true;color:#ff8800" position="-3 1 0" scale=".005 .005 .005" rotation="-90 0 0" obj-model="obj: #kunscht1-obj; mtl: #kunscht1-mtl" shadow="cast: true">
<a-animation attribute="rotation"
dur="20000"
fill="forwards"
to="-90 360 0"
easing="linear"
repeat="indefinite"></a-animation>
</a-entity>
-->
<!-- video -->
<!--<a-video id="video1" scale=".35 .35 .35" src="#testvid" width="16" height="9" position="-4.5 3.0 -5.8" material="opacity:0.8;transparent:true"></a-video>
-->
<!--<a-entity position="-4 1.8 0" video-controls="src:#video1"></a-entity>-->
<!--
<a-box position="-3 0.5 0" scale="1 1 1" rotation="0 0 0" color="#333333" shadow="cast: true"></a-box>
-->
<!--camera-->
<a-entity mouse-cursor position="-1 0 0" rotation="0 90 0" >
<a-camera fov="50">
<!--cursor fixed to camera-->
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: orange; shader: flat">
</a-entity>
<!--hud debug display-->
<a-entity position="0 -.8 -1.5">
<a-plane cursor-listener id="screen" scale="2 1 1" frustum-lock material="color: #888888;opacity:0.6;transparent:true"></a-plane>
<a-box cursor-listener id="button" position="0.7 0.3 0" scale=".2 .2 0.2" rotation="0 0 0" color="#CC77FF"></a-box>
<a-text cursor-listener id="debug" width="2" side="double" position="-.8 0.5 0.2" text="transparent:true;color:#efef16" value="debug !"></a-text>
<a-text click-drag id="timetext" width="2" side="double" position="-.8 0.4 0.2" text="transparent:true;color:#efab16" value="Time!"></a-text>
</a-entity>
<!-- head light-->
<!--
<a-entity light="color:#CCC;type:point;intensity:0.3" ></a-entity>
-->
</a-camera>
</a-entity>
<!--lights -->
<!-- point light in the middle-->
<!--<a-entity light="color:#BBB;type:point;intensity:0.8" position="-3.7 2.3 0"></a-entity>-->
<!-- spot on artwork-->
<!--target / rotation does not work like this... -->
<!--
<a-entity id="spot" position="-2 4 2">
<a-entity id="spotlight" light="color:#F80;type:spot;intensity:3.5;angle:5;target:kunscht1;castShadow:true" ></a-entity></a-entity>
-->
<!--ambient light-->
<a-entity light="color: #888; intensity: 1.5" position="-3 1 0"></a-entity>
<!-- sun -->
<a-entity id="sun" light="type: directional; color: #F9E1A6; intensity: 0.8;castShadow:true;shadowCameraLeft:-10;shadowCameraTop:16;shadowCameraFar:60;shadowCameraRight:15" position="10 5 -5" ></a-entity>
<a-sky color="#BBBBFF"></a-sky>
</a-scene>
</body>
<!--check for loaded-->
<script type="text/javascript">
console.log("initializing testscript");
var sceneEl = document.querySelector('a-scene');
if (sceneEl.hasLoaded) {
console.log("scene loaded");
run();
} else {
sceneEl.addEventListener('loaded', run);
}
</script>
</html>