Model cant find camera rotation - three.js

Im doing a project with AR.JS/Aframe. The project worked but recently all models that were displayed correctly are shown static on one place. IDK if this happend because of a libary update. Can someone tell me whats going on?
Imports:
<head>
<title>Demo</title>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
</script>
<script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/events.js"></script>
</head>
Creating the model (This worked and hasnt been changed):
let scene = document.querySelector('a-scene');
let model = document.createElement('a-entity');
model.setAttribute('position', '0 -1 -10');
model.setAttribute('rotation', '10 0 0');
model.setAttribute('gltf-model', `url(${data_url})`);
scene.appendChild(model);
The a-scene:
<a-scene
sceneviewer
vr-mode-ui="enabled: false"
embedded
arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960;
displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>


Refresh the page after granting accesss to camera and mobile movement was the solution.

Related

Uncaught TypeError: THREE.OBJLoader is not a constructor | Vanilla js with Three.js

I copy-pasted this codepen on to my project,
the only thing Ive changed was in the js file
this line
Background.renderer = new THREE.WebGLRenderer({ alpha: true });
to this
Background.renderer = new THREE.WebGL1Renderer({ alpha: true });
cause my system doesnt support webgl2
I've been struggling a lot to make three js work on vanilla project and not react.js and I always get errors .
<script src="assets/js/modernizr.custom.63321.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"
integrity="sha512-bzjaf85dHTL4H0BvkAJ/Jbvxqf1rDj+jVpCNe3oxQj/RXSnkx1HnKhqIcmMWghxEAbXsYgddrc38saWpltlkug=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<div class="particlehead"></div>
<h1><strong>WebGL</strong> head made <em>of</em> particles</h1>
<script src="assets/js/main.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
integrity="sha512-3n19xznO0ubPpSwYCRRBgHh63DrV+bdZfHK52b1esvId4GsfwStQNPJFjeQos2h3JwCmZl0/LgLxSKMAI55hgw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/OBJLoader.js"></script>
EDIT SOLUTION:
changed back the code to Background.renderer = new THREE.WebGLRenderer({ alpha: true });
used this cdn
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"
integrity="sha512-Umo2flOa4LGkVHRQ17JlfSaDZdj2QuedGJ8/H3OO4EFujr1rfpkWI6/njf3ucOws8PiqcyVvVKHYegwhirm/PA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
and as the answer below suggested I included THREE.OBJLoader before main.js

You have to include THREE.OBJLoader before your main.js script is executed.
Besides, it seems you are using a very outdated version of THREE.OBJLoader. Make sure to use the same version of the loader like the core library. In your case r122. I suggest you use these links:
https://cdn.jsdelivr.net/npm/three#0.122/build/three.min.js
https://cdn.jsdelivr.net/npm/three#0.122/examples/js/loaders/OBJLoader.js

How to replace an image with another on button click

Hi I have a problem that I can't quite solve. I'm a total noob with HTML/Javascript, so I'm not sure how to proceed. The instructions are in the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q2</title>
<script type="text/javascript" src="342.js"></script>
<script type="text/javascript">
function swap() {
if (Math.random()>.5){
document.getElementById("c").style.display = 'none';
document.getElementById("f").src = "images/f.jpg";
} else {
document.getElementById("d").style.display = 'none';
document.getElementById("f").src = "images/f.jpg";
}
}
</script>
</head>
<body>
<p>Add code so that clicking the button changes either the src "c.jpg" or "d.jpg" to "f.jpg" The choice of which should be replaced
should be determined randomly.</p>
<img src="images/c.jpg" id="c"><br>
<img src="images/d.jpg" id="d">
<br><br>
<button type="button" onclick="swap()">OK</button>
</body>
</html>
The original problem had everything but the scripts. When I try this, I'm able to get the image c or d to disappear, but image f doesn't appear. I don't know how to get the image to show. getELementById won't work because I haven't made an id, but how do I do that without having image f showing? Any help is appreciated.

Seems you're missing html
Try add f html element for work:
<img src="images/f.jpg" id="f">

The p tag in the html is talking about c.jpg, d.jpg and e.jpg.
Its not talking about f.jpg, you may want to check that
with the assumption that it is e.jpg and not "f.jpb". And also assuming that you have e.jpg in your images folder. Below code will work fine (small modification in the script)
function swap() {
if (Math.random()>.5){
// document.getElementById("c").style.display = 'none';
document.getElementById("c").src = "images/e.jpg";
} else {
// document.getElementById("d").style.display = 'none';
document.getElementById("d").src = "images/e.jpg";
}
}

HtmlAgility - dealing with in-between html

Lets say I have a website "example.com". I call the following line
// Pass html content of the site.com to a string
string htmlCode = client.DownloadString("http://example.com");
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(WebUtility.HtmlDecode(htmlCode));
For some websites I have the exact html I want. But some sites return a html consist of forms, or with an empty body and some kind of scripts.
Example for script one:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CacheControl" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="data:;base64,iVBORw0KGgo=">
<script>
(function(){
var securemsg;
var dosl7_common;
window["bobcmn"] = "111110111110102000000022000000052000000002a4b927ad200000096300000000300000000300000006/TSPD/300000008TSPD_101300000005https200000000200000000";
window.hQv=!!window.hQv;try{(function(){try{var __,i_,j_=1,O_=1,z_=1,s_=1,S_=1,Ji=1,li=1,oi=1,si=1;for(var Si=0;Si<i_;++Si)j_+=2,O_+=2,z_+=2,s_+=2,S_+=2,Ji+=2,li+=2,oi+=2,si+=3;__=j_+O_+z_+s_+S_+Ji+li+oi+si;window.SL===__&&(window.SL=++__)}catch(JI){window.SL=__}var OI=!0;function SI(_){_&&(OI=!1,document.cookie="brav=ad");return OI}function _j(){}SI(window[_j.name]===_j);SI("function"!==typeof ie9rgb4);SI(/\x3c/.test(function(){return"\x3c"})&!/x3d/.test(function(){return"'x3'+'d';"}));
var ij=window.attachEvent||/mobi/i.test(window["\x6e\x61vi\x67a\x74\x6f\x72"]["\x75\x73e\x72A\x67\x65\x6et"]),Ij=+new Date+6E5,Jj,lj,Oj=setTimeout,zj=ij?3E4:6E3;function Zj(){if(!document.querySelector)return!0;var _=+new Date,l=_>Ij;if(l)return SI(!1);l=lj&&Jj+zj<_;l=SI(l);Jj=_;lj||(lj=!0,Oj(function(){lj=!1},1));return l}Zj();var sj=[17795081,27611931586,1558153217];
function Sj(_){_="string"===typeof _?_:_.toString(36);var l=window[_];if(!l.toString)return;var O=""+l;window[_]=function(_,O){lj=!1;return l(_,O)};window[_].toString=function(){return O}}for(var si=0;si<sj.length;++si)Sj(sj[si]);SI(!1!==window.hQv);
(function iJ(){if(!Zj())return;var l=!1;function O(l){for(var z=0;l--;)z+=Z(document.documentElement,null);return z}function Z(l,z){var O="vi";z=z||new s;return o_(l,function(l){l.setAttribute("data-"+O,z._s());return Z(l,z)},null)}function s(){this.Lz=1;this.Jz=0;this.il=this.Lz;this.c=null;this._s=function(){this.c=this.Jz+this.il;if(!isFinite(this.c))return this.reset(),this._s();this.Jz=this.il;this.il=this.c;this.c=null;return this.il};this.reset=function(){this.Lz++;this.Jz=0;this.il=this.Lz}}
var S=!1;function z(l,z){if(!Zj())return;var O=document.createElement(l);z=z||document.body;z.appendChild(O);O&&O.style&&(O.style.display="none");Zj()}function J_(z,O){if(!Zj())return;O=O||z;var Z="|";function s(l){l=l.split(Z);var z=[];for(var O=0;O<l.length;++O){var S="",I_=l[O].split(",");for(var J_=0;J_<I_.length;++J_)S+=I_[J_][J_];z.push(S)}return z}var J_=0,o_="datalist,details,embed,figure,hrimg,strong,article,formaddress|audio,blockquote,area,source,input|canvas,form,link,tbase,option,details,article";
o_.split(Z);o_=s(o_);o_=new RegExp(o_.join(Z),"g");while(o_.exec(z))o_=new RegExp((""+new Date)[8],"g"),l&&(S=Zj()),++J_;return Zj()?O(J_&&1):void 0}function o_(l,O,Z){if(!Zj())return;(Z=Z||S)&&z("div",l);l=l.children;var s=0;for(var J_ in l){Z=l[J_];try{Z instanceof HTMLElement&&(O(Z),++s)}catch(o_){}}return Zj()?s:void 0}J_(iJ,O);Zj()})();var IJ=82;window.oz={zz:"0820fdace1017800ebdf62cbc35cbeca5d8b435652ee3d253bb2e03195f77060a34ecc0424666f18abca1759ee2fa744800dfad86d4269514242d4fceed9d9c70b54e28c9b8c3fbf20a4971c6cf7cf3e60654d34ea06fc0747a30d8d8807f58873200a982d1d45fb8ed817474e167ab24b6ec97b833fc5141c0ef332e22dc753"};function I(_){return 396>_}
function J(_){var l=arguments.length,O=[];for(var Z=1;Z<l;++Z)O.push(arguments[Z]-_);return String.fromCharCode.apply(String,O)}function L(_,l){_+=l;return _.toString(36)}(function JJ(l){return l?0:JJ(l)*JJ(l)})(OI);})();}catch(x){document.cookie='brav=oex'+x;}finally{ie9rgb4=void(0);};function ie9rgb4(a,b){return a>>b>>0};
})();
</script>
<script type="text/javascript" src="/TSPD/084fc6184bab20009b43f88181dfc281050b986fbf5cd6e7067eeb760574cf33392dd93acd61a34b?type=8"></script>
<script>
(function(){
var securemsg;
var dosl7_common;
window["blobfp"] = "1111111110112000003e82ff5ac71e30000004a91d2b9750979230f005996dcd100001c20be2e63e7a47a6a80ea7aac3f26b85092554439d9300000020http://re.security.f5aas.com/re/";
})();
</script>
<script type="text/javascript" src="/TSPD/084fc6184bab20009b43f88181dfc281050b986fbf5cd6e7067eeb760574cf33392dd93acd61a34b?type=11"></script>
<noscript>Please enable JavaScript to view the page content.</noscript>
</head><body>
</body></html>
How can I deal with this "ecnryption" system and get the final html I want that is on "example.com", that you see when you check the source on the browser?

Do you have a F5 Server in front of your webserver? Because I have a similar situation, where that Javascript gets injected in my code (which leads to problems).

This was due to page loading with an AJAX call. It could be solved by using PhantomJS web driver.

Foundation 6 Reveal ajax not working

I'm trying to create a reval Modal Foundation 6 and Ajac, but does not work.
I followed the official guide
Page html
<!DOCTYPE html><html lang="it">
<head>
<title>Avvisi</title>
<link href="http://ci.dev/assets/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://ci.dev/assets/js/vendor/jquery.min.js" type="text/javascript">
</script><script src="http://ci.dev/assets/js/foundation.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/foundation.reveal.js" type="text/javascript"></script><link href="http://ci.dev/assets/css/reveal.css" rel="stylesheet" type="text/css" /><link href="http://ci.dev/assets/css/motion-ui.css" rel="stylesheet" type="text/css" /><script src="http://ci.dev/assets/js/vendor/what-input.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/vendor/motion-ui.js" type="text/javascript"></script></head>
<body>
<h2>Title</h2><p>Message</p>
<span><a href='http://ci.dev/AR-PIB/warn/edit_v/160/284'>Edit</a></span><span id='160|284'><a class='big-link' href='#' data-reveal-id='myModal' data-animation='fade'>Delete</a></span></div><hr/>
<script type="text/javascript">jQuery(document).ready(function() {
jQuery('.big-link').click(function(){
var dati = jQuery(this).parent().attr('id');
var $modal = $('#modal');
alert($modal)
$.ajax({'http://ci.dev/AR-PIB/Warn/delete'})
.done(function(resp){
alert(resp);
jQuery('body').append(resp);
$modal.html(resp.html).foundation('open');
conaole.log(resp);
});
});
});
</script>
<script src="http://ci.dev/assets/js/app.js" type="text/javascript"></script></body></html>

I'm not sure why it's not working exactly as I can't run your code (the links http://ci.dev/... seem to be local to your machine), but it may be one of the following:
You have an close div but no open
You're attempting to use the Foundation JS ($modal.html(resp.html).foundation('open'); etc.) before you have initialised Foundation (if in app.js, per your comment, this is after the Reveal code)
foundation.min.js (unless you have generated a slimmed down version) includes both the motion UI and the reveal so you don't need to add each JS file
You're missing a ; after alert($modal)
I think you mean console.log(resp); rather than conaole.log(resp);
You reference the element $('#modal') but there is no element on the page with the id modal (your link also has data-reveal-id='myModal')

According to the Foundation Docs:
http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins
Just add a Foundation.reInit('abide'); and it should work right away!

I found a solution that works with Zurb Foundation 6.3.2, as explain in https://foundation.zurb.com/sites/docs/javascript.html#programmatic-use
in the ajax done function :
var $modalContent = new Foundation.Reveal($('#modalContent'));
$modalContent.open();

Is it possible generated from local file image from html5-canvas

My canvas has image which programly generated from local file or from images from internet. When I try to save it using toDataURl function I get secure error. How can I save result (without server, using only js ) and is it possible?
I know about security rule but maybe there is some solution to bypass this rule
All my code is in github if need

Shame! Don't bypass rules built to provide security for our users.
The key to satisfying CORS security and still getting what you need is to let the user select the image file you need to load into canvas.
If the user selects the file, CORS security is satisfied and you can use the canvas as you need (including using canvas.toDataURL to save the canvas).
Here are the steps to let a user select a file from their local drive:
Add an html input element with type="file"
The user clicks browse on this element and selects their file
When the user clicks OK, use window.URL.createObjectURL to create a URL from their selected file.
Create a new Image and set its source to the URL you created in #3.
Use context.drawImage to draw your new image on the canvas.
The resulting canvas is CORS compliant so canvas.toDataURL will work.
Here's example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
$("#fileInput").change(function(e){
var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
canvas.width=img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
ctx.fillStyle="black";
ctx.fillRect(0,canvas.height-30,canvas.width,30);
ctx.fillStyle="white";
ctx.font="18px verdana";
ctx.fillText("I'm OK with CORS!",5,canvas.height-8);
}
img.src = url;
});
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<input type="file" id="fileInput">
<button id="save">Save</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Resources