I am working on a web application where people can build a house a preview it in 3D. The 3D preview works well in firefox, chrome and IE11+ but it won't work with ie9. Is there a way to get a few images of the 3D scene they are supposed to see so that I can at least show them images of what their house looks like in 3D? I am using three.js.
Related
I've been struggling to make this 3d model display at the right place on Samsung Internet browser.
Here's the link on Glitch:
https://juniper-evening-guilty.glitch.me
To reproduce the issue:
open the link above in Chrome's on android phone, then allow camera access and point the camera at below marker
https://i.stack.imgur.com/5cahN.png
Result: The 3d model will load up just fine, right above the marker.
Open the same link in Samsung Internet browser on android phon.
Result: you won't see the 3d model - in fact it's loaded up but is displayed out of place, and you need to move the camera very close to the marker before you will see only part of it.
Expected Result: 3d model shows up right above the Hiro when using Samsung Internet browser, like what we got with Chrome browser.
So I made a project using Three.js and everything works how I want it to on desktop browsers, tested using chrome, and firefox. When I try to open the project on any mobile browser, safari, chrome, or IE, some objects are not rendered these objects have normal maps and textures which appear fine on desktop but are not rendered at all on mobile. In addition objects appear to be overly bright on mobile and sometimes flicker going from behind one another to in front of one another.
One user suggested adding this.image = image; to the three.js file at line 18420 but this did not solve the issue. Here is a link to the project here http://pixelpusher.ninja/Ocean%20World/OceanWorld.html. You can inspect the page to view the source code. Has anyone ran into problems like this on mobile before? Any help is appreciated. Thanks!
I'm a newbee on this area.
I am currently developing card games. just for fun
on desktop i don't encounter problems on drawing portion of image on a sprite sheet to the canvas using Phaser-framework.
But when i move my application to open it on mobile browsers
like the Phaser cannot draw portion of the sprite sheet to the canvas because of the image being used is 1012 x 3324 in dimension;
Does anyone has any idea on what it the maximum sprite sheet for mobile browsers
im not having on trouble on chrome browser.
but when used firefox and android browser give me trouble.
ctx.drawImage gives NS_ERROR_NOT_AVAILABLE
Bug 574330 - NS_ERROR_NOT_AVAILABLE with canvas.drawImage and Image.onload
hope you could help me out.
i think you need to scale canvas to fit on any screen check this it might help
I'm building a multiplatform HTML5 canvas game with EaselJS (although I tested without using this library and the problem persists);
I'm loading an image in that is 1280 x 1800 and then rendering it to the canvas.
This runs as expected on all devices except the ipad 1st gen running iOS5.
It loads and draws the image to canvas at 640x900...
I alerted Image.width with a result of 640, so I don't think it has anything to do with the actual rendering to canvas but rather limitations to image size with iOS5?
As a work around I am scaling the image up, so it just appears lower quality on this particular device, but I'm looking for a solution or at least explanation of why this is happening!
here is an example of the problem:
http://kokodev.co.uk/ipadcanvasimageproblem/
I also connected the iPad to the xCode organizer console to see if it reported any errors or memory warnings, but it did not!
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).