I need to load .obj and .mtl files from a web URL for my Web app. But I'm not able to find a clear example. Example code would be very much appreciated.
From A-Frame's docs example:
<a-scene>
<a-assets>
<a-asset-item id="tree-obj" src="/path/to/tree.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="/path/to/tree.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>
</a-scene>
You can use a URL in the src.
Related
quick cry for help: this website "broke" somehow and is stuck in the pre-loader
https://thelosertakesitall.com/ – I want to understand why and how to fix it, thank you!
I tried removing the elements displaying the loader but then it just stays at a blank screen. I understand the code is old and was set up by someone I do not have contact to anymore.
jQuery is not loaded because of:
Mixed Content: The page at 'https://thelosertakesitall.com/' was
loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
try to change
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Load jQuery library -->
to
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Load jQuery library -->
I am working with Vue.js 2 and Laravel and have been trying to load a video from a local folder of my project without success.
Vue-loader plugin is correctly installed and added in my webpack.config.js as specified on the docs: https://vue-loader.vuejs.org/guide/#manual-setup
I have tried the most simple way.
<template>
<div>
<video autoplay muted loop id="myVideo">
<source src="/storage/videos/landing.mp4" type="video/mp4" />
</video>
</div>
</template>
I have also tried with a different approach as suggested on another stackoverflow question by dinamically updating the src attribute when the component is mounted.
<template>
<div>
<video ref="videoRef" src="" autoplay muted loop id="myVideo"></video>
</div>
</template>
<script>
export default {
mounted: function() {
this.$refs.videoRef.src =
"/storage/videos/landing.mp4";
}
};
</script>
None of those have worked tho.
Im quite sure the problem lies in Vue not resolving the video route properly since I have tried to use a dummy video link from the web and it is working absolutely fine.
Firefox is also giving me some clues.
However, Im not sure about what the problem is or how to solve it. Thanks in advance.
PS: I have triple checked the route specified and it definitely exists in my project.
Either you load your video with an es module import, your loader has to be able to import mp4, and you put that in the src
import video from 'path/to/video/a.mp4'
and in your component you do
<video :src="video">
PS make sure that the imported video is then defined in your data function.
Or you can use it like your doing with src="path/to/folder" and try to understand where that path is pointing at through your network tab, and put the video in the right folder based on that.
I am trying to to use a texture from my own hosted webserver but putting it into the asset-item tag I get the following error.
> Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin
> 'http://localhost' has been blocked by CORS policy: No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost' is therefore not allowed access.
The picture is accessible, since I can see it in the webinspector.
It works perfectly in a simple image tag. Does anyone know what to do here?
Thanks!
Update: My code you could find below:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-assets>
<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/>
</a-assets>
<a-sky src="#cat"/> <!-- this code works not (CORS) -->
<a-sky src="http://192.168.x.x:3000/cat.jpg" /> <!-- this code works not (CORS) -->
</a-scene>
<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/> <!-- this code works -->
Solution:
I figured out the main problem: It had nothing to do with A-Frame itself, it was a minor mistake on the server. The headers were specified after the fileserver was initialized. Putting the specification in the initialization phase did the trick... of course... :-D
What's CORS?
This is not A-frame or Three.js or WebVR that is an issue. CORS (Cross-origin resource sharing) happens when the JavaScript (in your situation is that this script https://aframe.io/releases/0.5.0/aframe.min.js ) makes a cross-domain XHR (XMLHttpRequest) call (in your situation is that to http://192.168.x.x:3000/cat.jpg ).
On Wikipedia I've found an image that gives more information about the workflow of CORS.
Your request is a GET-request, there are custom HTTP headers and didn't add Acces-Control-* headers, result an error.
More information about CORS I've found on the Mozilla Developer Network.
Documentation from A-frame
Why does my asset (e.g., image, video, model) not load?
First, if you are doing local development, make sure you are using a local server so that asset requests work properly.
If you are loading the asset from a different domain (and that you do), make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could either find a host to serve the asset with CORS headers, or place the asset on the same domain (directory) as your application.
Why is this happen?1
It looks like the script (https://aframe.io/releases/0.5.0/aframe.min.js ) that must be added, loads the images and that's why <a-sky src="http://192.168.0.253:457/cat.jpg" /> is not working at all. Because the image is loaded from the script that is hosted on A-frame.
If you use <a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets>, the image URL is bound to the a-skys src-attribute. And again the image is loaded from the script on A-frames server and makes a cross-domain XHR call.
1 I'm not 100% sure, but there is a big chance that it's correct. If anyone think that this is not correct, please say it. If it is correct, please say it also.
Solutions
Place the file on your local host web server.
Add the response header Access-Control-Allow-Origin when the image is requested. I think, the value must be http://aframe.io.
After many trial and error, I finally found a way to incorporate images from remote server to my local server without facing CORS errors. The solution is using a CORS proxy instead of doing direct request.
Despite the following code is not the most elegant solution, it works for me.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="frodo" crossorigin="anonymous" src="https://cors-anywhere.herokuapp.com/http://i.dailymail.co.uk/i/pix/2011/01/07/article-1345149-0CAE5C22000005DC-607_468x502.jpg">
</a-assets>
<!-- Using the asset management system. -->
<a-image src="#frodo"></a-image>
</a-scene>
</body>
</html>
Using CORS Proxy, adds all the headers needed to perform the request to the remote server and gather the objects in the src field.
Please note that the src request is: https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>
I have a C# MVC app that makes use of recaptcha security code in a particular view.
In my view i have the following code:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
...
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
#Html.ValidationMessage("captcha")
When i try to load the page, i get the following error in chrome's debugger:
Mixed Content: The page at 'https://mywebsite.com' was loaded over HTTPS, but requested an insecure resource 'http://www.google.com/recaptcha/api/challenge?k=mykey'. This request has been blocked; the content must be served over HTTPS.
and if i inspect the source of the loaded page, the razor control for recaptcha generates this script tag:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=mykey">
the src attribute is a http url not a https url.
If anyone knows how i can overcome this error, it would be greatly appreciated.
Thanks,
Kapetanios
Ok here i am posting an answer to my own question again.
It turns out that this:
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
#Html.ValidationMessage("captcha")
was rendering this:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=mykey"></script>
The src attribute of the script tag contained http and not https
So, to fix this issue, i just replaced the #html.raw & #html.validate with this:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=mekey"></script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=mykey" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript>
Doing this stopped chrome debugger from getting the error.
I've noticed that websites made in google drive (shared public folder)
can't use svg as image.
Is it a security restriction ?
so this code don't show the image
<!DOCTYPE html>
<html>
<head>
<title>SVG as image</title>
</head>
<body>
<img src="the_image.svg">
</body>
</html>
online example
https://www.googledrive.com/host/0BwRlR3z6e0egbXM3clR1ZEFaM00/svg_as_image.html
Google is returning the file as MIME type "text/xml" rather than the "image/svg+xml" it should be. You could try requesting Google fix that.
In the meantime, try using an object instead.
<object data="the_image.svg" type="image/svg+xml" />
You might have more luck.
Thanks a lot !
it helped me
the mimetype of the svg file saved with janvas (janvas.com) whose "text/xml"
this example use a svg file saved on google drive with the right mymetype "image/svg+xml"
works !
https://www.googledrive.com/host/0BwRlR3z6e0egbXM3clR1ZEFaM00/svg_as_image_right_mimetype.html
You can insert svg images on sites.google using the "insert code" tool to insert the svg code. When you there, just open your svg in a text editor, copy the entire svg code and paste it on your insert code as I show in this images.
site google svg
site google svg2