I know this question has been asked many times and answered, but still i can't figure out what to add to my code to prevent player (camera) from going through the walls. Please help.
This is my code:
https://codepen.io/payamspot/pen/XErObb
<head>
<meta charset="utf-8">
<title>Find the Way!</title>
<link rel="icon" sizes="192x192" href="https://cdn.glitch.com/60055b0c-41c5-49c8-805c-da359f1c3f99%2Ffindtheway%20logo.png?1520489367793">
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene antialias="true">
<a-assets>
<img id="grass" src="https://cdn.glitch.com/60055b0c-41c5-49c8-805c-da359f1c3f99%2Fgrass.jpg?1519297817380">
</a-assets>
<!-- sky -->
<a-sky geometry="radius:200; thetaLength:100;" material="shader:gradient; topColor:52 112 251; bottomColor:123 179 220; offset:0;"></a-sky>
<!-- ground -->
<a-plane class="hasEvent" position="0 0 0" rotation="-90 0 0" geometry="width:200; height:200;" material="src:#grass; repeat:111 111;"></a-plane>
<!-- walls -->
<a-box class="wall" id="w0001" position="-2 2 -3" rotation="0 0 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0002" position="-3 2 0" rotation="0 -90 0" geometry="width:6; height:4; depth:0.1;" material="src:#grass; repeat:6 4;"></a-box>
<a-box class="wall" id="w0003" position="0 2 3" rotation="0 0 0" geometry="width:6; height:4; depth:0.1;" material="src:#grass; repeat:6 4;"></a-box>
<a-box class="wall" id="w0004" position="3 2 2" rotation="0 -90 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0005" position="3 2 -2" rotation="0 -90 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0006" position="2 2 -3" rotation="0 0 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-entity light="type:ambient; color:#fff; intensity:1.1;"></a-entity>
<a-entity light="type:directional; color:yellow; intensity: 0.3" position="-3.635 5.02 -5.484"></a-entity>
<a-entity id="cameraRig" position="0 -1.6 0">
<a-camera user-height="3.9"></a-camera>
<a-entity teleport-controls="cameraRig:#cameraRig; button:trigger; type:line; maxLength:44; defaultPlaneSize:999;"
laser-controls raycaster="objects:.hasEvent; interval:200; showLine:true;" line="color:#eee; opacity:0.2;" />
</a-entity>
</a-scene>
</body>
Related
I'm starting to learn aframe and want to use it with an Oculus Quest 2. I have the hands displayed and I'm trying to move around the VR world but when I move the hands don't move ... how to make the hands follow the camera?
thanks
This is my code
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.0/dist/aframe-extras.min.js"></script>
<script>
</script>
</head>
<body>
<a-scene>
<a-entity id="rig" movement-controls position="0 0 0">
<a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>
</a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
I finally found ...
At the beginning I put the controllers in the camera ... but I had to put them in #rig
<a-entity id="rig" movement-controls position="0 0 0">
<a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly;"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly;"></a-entity>
</a-entity>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v1.16.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="duck1" position="1 0 -3">
<a-animation attribute="rotation" to="0 -360 0" repeat="indefinite" easing="linear" dur="30000"> </a-animation>
<a-entity color="#FF0000" scale="0.1 0.1 .1" position="0 0 1">
<a-animation attribute="rotation" to="0 360 0" easing="linear" dur="4000" begin="mouseenter"> </a-animation>
<a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
</a-entity>
<a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>
The way animation is working here I want to make it look similar in 1.2.0 version of Aframe. I am trying to use the same formula. Here is what I am trying to do in 1.2.0 Aframe.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: " animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
<a-box class="rota" color="#FF0000" position="20 0 -10" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
<a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera>
</a-scene>
</body>
</html>
In the second code it is working fine initially then it is getting stuck at one particular position. Can anyone help me in fixing this error and make it look similar to the code in version 0.5.0 Aframe.
Here is the 0.5.0 code in 1.2.0 syntax
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="duck1" position="1 0 -3"
animation="property: rotation; to:0 -360 0; loop: true; easing:linear; dur:3000">
<a-entity color="#FF0000" scale="0.1 0.1 0.1" position="0 0 1"
animation="property:rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
<a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
</a-entity>
<a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>
Glitch here:
https://glitch.com/edit/#!/animation-example-0-5-to-12-0?path=index.html%3A1%3A0
Not sure I completely understand what the code is supposed to do - e.g. there is a collision handler with #otherduck, but no #otherduck entity.
1.2.0 code seems to be doing the same as the 0.5 code, though.
I want to use touch and drag and pinch to zoom in and out with 0.9.0
The following code works with aframe 0.3.0 but isnt fully visible here, but
here is link to the code
<html>
<head>
<title>A-Frame Click & Drag Component - Basic</title>
<script src="https://jesstelford.github.io/aframe-click-drag-component/build.js"></script>
</head>
<body>
<a-scene>
<a-sphere look-controls click-drag position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box click-drag position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder click-drag position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera look-controls keyboard-controls="mode: fps"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
I'm writing a script in aframe to showcase the earth. However, when I try to add texture it becomes all white.
This is my script:
<html>
<head>
<div class="navbar">
</div>
<!-- aframe itself -->
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<a-scene stats>
<a-assets>
<a-asset-item id="earth-obj" src="https://cdn.glitch.com/5995a6f7-2893-46f8-a015-8513de4817c6%2F1227%20Earth.obj?1551999264805"></a-asset-item>
<a-asset-item id="earth-mtl" src="https://cdn.glitch.com/5995a6f7-2893-46f8-a015-8513de4817c6%2F1227%20Earth.mtl?1552002240966"></a-asset-item>
</a-assets>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
</a-entity>
<a-entity obj-model="obj: #earth-obj; mtl: #earth-mtl"
position="0 1.5 -3"
scale="0.05 0.05 0.05">
<a-animation attribute="rotation"
dur="30"
to="0 360 0"
repeat="indefinite"
easing="linear"></a-animation>
</a-entity>
<a-entity camera look-controls position="0 1.5 0">
<a-cursor>
<a-entity position="0 0 -3" id="weapon">
<a-box color="blue" width="0.25" height="0.5" depth="3"
static-body></a-box>
</a-entity>
</a-cursor>
</a-entity>
<a-entity environment="shadow: true; shadowSize: 10; preset:default;" ></a-entity>
<a-plane color="brown" rotation="-90 0 0"
static-body
width="100" height="100"></a-plane>
</a-scene>
</head>
<body>
</body>
</html>
and this is the .mtl file
newmtl Mat
map_Kd Earth.png
usemtl Mat
Earth.png is in the same directory as the .obj and .mtl files, I don't know what to do.
Your MTL and texture aren't in the same directory. They are hosted on individual URLs on a CDN. Glitch may give you the illusion they are on the same directory.
I'm trying to link these curved images in a-frame to my other HTML Pages which are:
hall.html
clock.html
titanic.html
I've researched it online but haven't been able to find an answer so if anyone has any experience with a-frame the help would be appreciated.
Essentially what I'm trying to do is when someone looks at one of the curved images in a-frame it takes them to the HTML page.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360Belfast</title>
<meta name="description" content="Curved Images - A-Frame">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
<script src="js/build.js"></script>
</head>
<body>
<a-scene background="color: white">
<a-assets>
<img id="mozvr" src="img/logo.png">
<img id="shadow2" src="img/radial-shadow-2.png">
<img id="ui1" src="img/ui-1.png">
<img id="ui2" src="img/ui-2.png">
<img id="ui3" src="img/ui-3.png">
<img id="3d" src="img/3d.png">
<img id="3dcity" src="img/3dcity.png">
<img id="3dclock" src="img/3dclock.png">
</a-assets>
<!-- <a-box id="blue-cube" position="-3.5 3.5 -2" rotation="30 30 0"
width="2" depth="2" height="2" color="blue"
href="#orange-cube"></a-box> -->
<a-curvedimage href="hall.html" src="#ui1" radius="5.7" theta-length="70" height="3.02"
rotation="0 155 0" scale="0.8 0.8 0.8"></a-curvedimage>
<a-curvedimage src="#mozvr" radius="5.7" theta-length="20" height=".7"
opacity="0.6" rotation="0 250 0" position="0 2 0"></a-curvedimage>
<a-curvedimage src="#ui3" radius="5.7" theta-length="70" height="3.02"
rotation="0 80 0" scale="0.8 0.8 0.8" href="clock.html"></a-curvedimage>
<a-curvedimage src="#ui2" radius="5.7" theta-length="70" height="3.02"
rotation="0 -130 0" scale="0.8 0.8 0.8" href="titanic.html"></a-curvedimage>
<a-curvedimage src="#3d" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
rotation="0 -130 0" scale="0.8 0.8 0.8"></a-curvedimage>
<a-curvedimage src="#3dclock" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
rotation="0 80 0" scale="0.8 0.8 0.8" href="model.html"></a-curvedimage>
<a-curvedimage src="#3dcity" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
rotation="0 155 0" scale="0.8 0.8 0.8"></a-curvedimage>
<a-image position="0 -5 0" src="#shadow2" rotation="-90 0 0" scale="6 6 6"></a-image>
<a-entity position="0 0 1">
<a-camera>
<a-cursor color="#4CC3D9"></a-cursor>
</a-camera>
</a-entity>
<a-sky background="color: white"></a-sky>
</a-scene>
</body>
</html>
Use the link component:
<a-curvedimage link="href: hall.html; on: click"></a-curvedimage>
Note that In-VR navigation is only supported by Firefox, Oculus Browser, Samsung Internet and Supermedium.