-
Sach1810Likes 0Problem Description
Hi I have just completed the control lecture and decided it might be fun to add the DeviceOrientationControls.js and see how it works. ngrok was showing nothing on the mobile browser so I deployed it live on Heroku at https://threejscube.herokuapp.com still with the same result on both mobile safari and mobile chrome. I just see a white screen instead of the black screen with the cube inside. Any advise or help would be greatly appreciated.
-
Sonar Systems adminLikes 0
Do you get any errors or warnings in the console?
-
Sach1810Likes 0
No errors at all also checked the webinspector on the phone
-
Sonar Systems adminLikes 0
Have you compared your code the code from GitHub.
This reply has been verified.
-
Sach1810Likes 0
No I wasn't aware of any link what is it ?
-
Sach1810Likes 0
Hi again it is the same probelm with your code.
Best Regards
Sacha David
-
Sonar Systems adminLikes 0
Can you show me a screenshot of the problem.
-
Sach1810Likes 0
Screen shot on the computer would be good (background color is black screenshot on iphone would jut be a blankwhite screen if I view it on an android it shows. Live site can bee seen at https://threejscube.herokuapp.com/.
-
Sonar Systems adminLikes 0
What mobile device are you using?
-
Sach1810Likes 0
I have tried both in an iPhone 6plus and a iPhone 5s
-
Sonar Systems adminLikes 0
Have you tried on an Android device?
-
Sach1810Likes 0
Sorry thought I mentioned it earlier. Yes it works on a computer and android devices but not on iOS devices
-
Sonar Systems adminLikes 0
Do you get any logs in the console if you open safari and connect your phone?
-
Sach1810Likes 0
No no errors at all. Checked it in Safari with the dev console tareted at the iphones.
Best regards
Sacha
-
Sonar Systems adminLikes 0
Do you have access to different hosting you can deploy the test site on.
-
Sach1810Likes 0
Unfortunately I don't but I know of some other people who have used 3js with heroku and there are not issues there. Here is one of them https://aptsphere.herokuapp.com/pages/display.html
-
Sach1810Likes 0
Sorry mistake with the link https://aptsphere.herokuapp.com/
-
Sonar Systems adminLikes 0
Does it work now?
-
Sach1810Likes 0
No it doesn’t but not sure what difference would be expected seeing as the code is still exactly the same on https://threejscube.herokuapp.com
-
Sonar Systems adminLikes 0
Have you tried running it locally and debugging it via a device.
-
Sach1810Likes 0
Yes I have run it locally and also live with the same results it will not load on apple mobile devices weather it's my code or the direct code you gave in the tutorial. Very hard to debug as no errors are shown in the console.
-
Sonar Systems adminLikes 0
Have a look if this helps http://stackoverflow.com/questions/35486250/limitations-of-safari-using-webgl-with-three-js
-
Sach1810Likes 0
No doesnt help I am now using your basic code wireframe only as follows. Still no luck.
<html>
<head>
<title>Three.js Tutorial</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script type="text/javascript" src="three/build/three.min.js"></script>
<script type="text/javascript" src="three/examples/js/controls/OrbitControls.js"></script>
<script>
var scene = new THREE.Scene( );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// check when the browser size has changed and adjust the camera accordingly
window.addEventListener( 'resize', function( )
{
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
renderer.setSize( WIDTH, HEIGHT );
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix( );
} );
controls = new THREE.OrbitControls( camera, renderer.domElement );
// create the shape
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// create a material, colour or image texture
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 3;
// game logic
var update = function ( )
{
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.005;
};
// draw scene
var render = function ( )
{
renderer.render( scene, camera );
};
// run game loop (update, render, repeat)
var GameLoop = function ( )
{
requestAnimationFrame( GameLoop );
update( );
render( );
};
GameLoop( );
</script>
</body>
</html>
-
Sonar Systems adminLikes 0
What browser are you using?
-
Sach1810Likes 0
I am using both chrome and safari on all devices and checking both
-
Sonar Systems adminLikes 0
What iOS version do you have?
-
Sach1810Likes 0
Everything is the latest version (not iOS 10 beta )
-
Sonar Systems adminLikes 0
Do the contorls from the video work on iOS for you.
-
Sach1810Likes 0
What video do you mean ? All I have on iOS is a blank white website. Should be black background with wireframe cube
-
Sonar Systems adminLikes 0
I mean does the code form the controls lecture work.
Login to reply