I am developing a web based 3D WebGL application using Three.js. I am trying to load a "Blender" model JS file using the following code:
var loader = new THREE.JSONLoader();
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "../build/MySampleModel.js", addModelToScene );
// addModelToScene function is called back after model has loaded
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshFaceMaterial( materials );
meshObj = new THREE.Mesh( geometry, material );
meshObj.scale.set(10,10,10);
meshObj.add( android );
}
When I tested this in Chrome browsers, it does NOT load the model and it gives the following error:
THREE.WebGLRenderer 59dev three.min.js:417
XMLHttpRequest cannot load file:///Users/xxxx/Desktop//THREE_JS_3DWEB/Dev/three.js-dev/build/MySampleModel.js. Cross origin requests are only supported for HTTP. three.min.js:211
THREE.JSONLoader: [../build/HouseModel.js] seems to be unreachable or file there is empty three.min.js:210
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 three.min.js:211
I am not running any local server in my machine. Is it necessary to have a local server running to load Blender model JS file in a Three.js based project?
(When I try running Three.js example file called "webgl_loader_json_blender.html" which uses loading of blender models, in Eclipse with a local apache server running, it is able to load the blender file properly when I'm running "webgl_loader_json_blender.html" in Chrome browser.)
I'm not an expert, but yours seems to be a problem with the browsers' "same origin policy" security restriction. Check this link from the three.js repository: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
I've experienced that it is easier to load local models using Mozilla Firefox instead Chrome.
So the answer is no, server is not required to load a model.
Good luck!
Related
I am trying to dynamically load files in a WebView. I can use an ajax call out to fetch from a server but can not figure out how I would load the resources if they are in the assets folder.
DETAILS:
I am loading a three js scene from the local file system using:
<WebView source={{ uri: "file:///android_asset/test.html" }} />
I have maybe 10 local models in the asset folder and would like to load a specific model when the user selects it. How would this be done using a THREE js loader? If a loader cant be used, can I fetch the model and pass it into the loader manually?
Basically is it possible to have a webview access the local file system in react-native?
Try something like this
const localHtmls = [require('../htmls/test.html'),
require('../htmls/test2.html'), ...];
// Do your logic here to find the index
let theHtml = localHtmls[0];
<WebView
source={theHtml}
style={{flex: 1}}
/>
Make sure the path in require is correct.
In my vuejs nuxt static site hosted on netlify, I'm trying to use a mp4 video hosted on Vimeo Pro as a video texture in three.js with the following (simplified version)
// create video dom element
let video_ele = document.createElement('video')
video_ele.className = 'video_texture'
video_ele.setAttribute('playsinline', true)
video_ele.muted = true
video_ele.loop = true
video_ele.autoplay = true
video_ele.crossOrigin = 'anonymous'
video_ele.src = "https://vimeo-video-url-here.....mp4"
document.body.appendChild(video_ele)
// create video texture from video
let video_texture = new THREE.VideoTexture(video_ele)
video_texture.minFilter = THREE.LinearFilter
video_texture.magFilter = THREE.LinearFilter
video_texture.format = THREE.RGBFormat
// map video texture to material
material = new THREE.MeshStandardMaterial({
color: 0xa8a8a8,
map: video_texture
})
Everything else works fine on chrome, firefox and also chrome mobile browser.
but in Safari 13 on mac os and ios 13, i get this error thrown in the console
THREE.WebGLState:
SecurityError: The operation is insecure.
I tried replacing the vimeo video with urls of other videos hosted elsewhere and i get same error in safari only.
I'm pretty sure its a CORS issue because when i replace the vimeo or external url with a static video hosted within same host (netlify), it works fine.
I also tried appending a timestamp to the video url just to be sure its not a cache issue, but still no luck
Wondering how can i make this work with an externally hosted video like vimeo?
Upon further testing, it seems to me that the issue was caused by the 302 redirect to their CDN that happens when you use a vimeo file url.
As #gman pointed out, there's a similar issue on Soundclound and i found that the solution provided there worked for my case too.
How to get Safari 12 to process audio from soundcloud?
I solved it by making an async fetch request to get the CDN url and then passing it to the video.src. Works in safari mac and ios (13) now now!
async function getMediaURLForTrack(texture_to_update, passed_url) {
await fetch(passed_url, {
method: 'HEAD'
})
.then((response) => {
texture_to_update.src = response.url
});
}
I am facing very weird problem. I am running two threejs apps(same codebase only change in ui) in samsung note3. One app is running perfectly but in the other one webgl is not working Detector.webgl is return false.
ThreeJS version: r79.
this.renderer = new THREE.WebGLRenderer({
antialias: true
});
Above code is giving this error:
TypeError: Cannot call method 'getExtension' of null
at get (file:///android_asset/www/grid-assets/js/three.js:28022:20)
at new THREE.WebGLRenderer (file:///android_asset/www/grid-assets/js/three.js:25056:13)
Any help would be highly appreciated.
Thanks
When WebGLRenderer is instantiated, WebGLExtensions is called to get various texture filtering support. The gl object which exists in any webGL enabled browser when a canvas object is created. Three.js calls something like:
gl = canvas.getContext('webgl');
In your case, gl is returning Null. Since your error is not: "getContext is undefined", we know you have a good canvas. The problem is that it did not return a webGL context to the gl property when THREE.WebGLExtensions is called. So for some reason the browser is not providing Three.js with webGL access.
This could be a number of things. It may be the timing of objects loading onto a page, or something halting webGL access in the browser such as a hanging process. It's tough to say. I would check that you have the latest Android and android browser too. I would compare your working app with the failing app to try to identify a point of failure. Also reboot the device and have your failing app be the first thing you open to help rule out external processes causing webGL to fail.
I have problems loading an image from an http resource into javafx.scene.image.Image.
I am using the constructor new Image(url). In my case the url is not ending with an image extension. In this cases just nothing is loaded but there is also no error:
new Image("http://localhost/some.jpg") // this works
new Image("http://localhost/getImage") // not working, no error
So is there a way to load images from such rest resources?
If not i have to use an http client and fiddle around with In/Outputstreams right?
function uploadFile(){
var file = $("file1").files[0];
var formdata = new FormData(); formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php";
ajax.send(formdata);
}
Error1: Unable to get value of the property '0': object is null or undefined
Error2: ForData not supported.
The FormData API is not supported by IE8 or IE9. It was only added in IE10. If you want to support these old browsers, then you cannot use modern HTML5 APIs.
There is a jQuery Forms plugin which does work in old IE versions and can allow you to upload files via ajax. I've used it myself and it is very effective. You can download it here: http://malsup.com/jquery/form/. You will probably need to rewrite your code a fair bit in order to use it as it's quite different conceptually to the HTML5 FormData API, but at least you'll get something that will work across all the browsers you want to support.
You could also try looking to see if there's a polyfill for FormData which would allow you to keep using your existing code. A quick google turned up this one, which I found listed here. I haven't tried it so can't vouch for it, but the polyfills listed by Modernizr on that list are generally pretty good.