The cursor/camera is able to intersect the inner walls of a house that I built in blender (.gltf 2.0)
the outer boundary works perfectly fine though and the cursor/camera is unable to penetrate that.
Here is my code -
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-gltf-part-component/dist/aframe-gltf-part-component.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.12.4/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-gltf-part-component/dist/aframe-gltf-part-component.min.js"></script>
<script src="scripts/components/cursor.js"></script>
</head>
<body>
<div id="myEmbeddedScene">
<a-scene raycaster-autorefresh physics embedded="">
<a-assets>
<a-asset-item id="ducks" src="../images/house.glb"></a-asset-item>
<a-mixin id="checkpoint"></a-mixin>
<a-mixin id="checkpoint-hovered" color="#6CEEB5"></a-mixin>
</a-assets>
<a-entity static-body id="duck" gltf-model-next="#ducks" position="0 0.1 -2" rotation="0 -90 0"></a-entity>
<a-grid static-body></a-grid>
<a-entity camera="userHeight: .6"
universal-controls="movementControls: checkpoint, keyboard"
checkpoint-controls="mode: animate"
kinematic-body>
<a-cursor
cursor="fuse: true;"
timeout="10"
position="0 0.1 -2.2"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
material="color: #4CC3D9; shader: flat;">
</a-cursor>
</a-entity>
<a-light type="ambient" color="#fff"></a-light>
</a-scene>
</div>
</body>
</html>
https://codepen.io/nirajupadhyay11/pen/ZaGWdN?editors=1111
Related
Why do I get error in console for:
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="myCtrl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
</head>
<body>
</body>
</html>
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MyApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fnomod%3Fp0%3DMyApp%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A24%3A66%0A%20%20%20%20at%20a%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A109)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A352%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A381%0A%20%20%20%20at%20m%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A7%3A322)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A229)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A40%3A503)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A19%3A339)%0A%20%20%20%20at%20Ac%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A20%3A151)
at angular.js:38
at angular.js:4385
at m (angular.js:336)
at g (angular.js:4346)
at eb (angular.js:4272)
at d (angular.js:1630)
at Ac (angular.js:1651)
at Zd (angular.js:1545)
at angular.js:28359
at HTMLDocument.a (angular.js:2996)
You need to declare the module and controller under the script or in a separate file
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="myCtrl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
</head>
<body>
<h1>{{text}}</h1>
<script>
var app = angular.module('MyApp',[]);
app.controller('myCtrl',function($scope){
$scope.text = "Works";
});
</script>
</body>
</html>
Because you haven't defined 'MyApp' or 'MyCtrl'. They need to be defined in a js file included on your web page. I suggest you read a basic tutorial on setting up an AngularJs app.
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>
I am following a tutorial on AngularJS - "Building a website with AngularJS"
The routes I am using are pretty much the same as the tutorial :
// JavaScript Document
angular.module('quest', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/start', {template:'partials/start.html'}).
otherwise({redirectTo:'/home', template:'partials/home.html'});
});
The problem is: it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows:
PARTIALS/ABOUT.HTML
I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.HTML" if i change the url to index.html#/start it shows "PARTIALS/START.HTML"
html of page:
<!DOCTYPE html>
<html lang="en" ng-app="quest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title></title>
</head>
<body ng-controller="MainController">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quest.js"></script>
<div ng-view></div>
</body>
</html>
Use templateUrl instead of template
I've got a simple website using jQuery mobile. It's composed of 2 pages, index.php and pageB.php. In pageB.php is the jqm pages' header. I put a link back to index.php:
Retour
In index.php, the page id is welcome
My problem is that if I
Enter the site from domain.com/
Click on a link to pageB.php (ajax-loaded)
Click on the link back to index.php
The event pageshow is not fired again and the content, which I loaded dynamically before, is not present. (Seems to be a new page of type #welcome)
But if I replace the link in pageB.php with a link to index.php#welcome, welcome being the id of the page in index.php, then if I enter the site from pageB.php, the link is inactive.
Update:
Here is simplified code to reproduce the problem:
index.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
<div data-role=page id=welcome>
<div data-role=header>
<h1>Index</h1>
</div>
<div data-role=content>
<a href="pageB.php">link to pageB</link>
<script>
$('#welcome').bind('pageshow', function(){
alert('pageshow triggered');
});
</script>
</div>
</div>
</body>
</html>
and pageB.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
<div data-role=page id=pageB>
<div data-role=header>
<!--Retour-->
Retour
<h1>PageB</h1>
</div>
<div data-role=content>
nothing
</div>
</div>
</body>
</html>
I suggest the following solution:
First, create a javascript file and call it test.js for example. In this file, include the following code:
function myfunc(){
alert('pageshow triggered');
}
$(document).delegate('#welcome', 'pageshow', myfunc);
Then, include the following code for both your files index.php and pageB.php:
-index.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div data-role="page" id="welcome">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
link to pageB
</div>
</div>
</body>
</html>
-pageB.php:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div data-role="page" id="pageB">
<div data-role="header">
Retour
<h1>PageB</h1>
</div>
<div data-role="content">nothing</div>
</div>
</body>
</html>
Another solution would be to group every jQuery Mobile pages in one HTML file:
<!DOCTYPE HTML>
<html>
<head>
<!-- Explicit charset definition -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
<!-- useful for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includes javascript & css files required for jquery mobile -->
<script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
<script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
<!-- INCLUDE YOUR FILE 'test.js' -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<!-- PAGE ONE -->
<div data-role="page" id="welcome">
<div data-role="header">
<h1>Index</h1>
</div>
<div data-role="content">
link to pageB
</div>
</div>
<!-- PAGE TWO -->
<div data-role="page" id="pageB">
<div data-role="header">
Retour
<h1>PageB</h1>
</div>
<div data-role="content">nothing</div>
</div>
</body>
</html>
PS: You may change the path / source of the file 'test.js' according to your convenience.
Here is my entire HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=232, user-scalable=no" />
<style>
body {margin:0;width:200px;border:1px solid black;padding:15px;background:#ccff99;color:#004000;font-family:sans-serif;font-size:6pt}
</style>
</head>
<body>
<h1>Test page</h1>
</body>
</html>
If I understand right, the body should be the full width of the viewport (200+(1+15)*2 = 232) so why is it that the page renders with a viewport width of 360? I would expect that of device-width, not an absolute 232...