Threejs: Video texture not working in safari - javascript

I have a little scene that uses an mp4 video to texture a rectangle:
* {
margin: 0;
padding: 0;
background-color: #282923;
}
body {
margin: 0;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
overflow: hidden;
}
canvas {
display: block;
}
.no-highlight {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
#play {
color: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
cursor: pointer;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>I AM ALAN TURING</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<link type='text/css' rel='stylesheet' href='./assets/main.css'>
</head>
<video id='video' crossOrigin='anonymous' loop playsinline controls style='position:fixed; top:-10000px; left: -10000px; width: 512px; height: 256px;'>
<source src='https://duhaime.s3.amazonaws.com/sketches/A565AC1E351B6A21FF7F005AB6FDE6F7/bass-clip.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<body class='no-highlight'>
<div id='play'>play</div>
<script type='module'>
import * as THREE from 'https://duhaime.s3.amazonaws.com/sketches/A565AC1E351B6A21FF7F005AB6FDE6F7/assets/js/three.module.js';
import { AsciiEffect } from 'https://duhaime.s3.amazonaws.com/sketches/A565AC1E351B6A21FF7F005AB6FDE6F7/assets/js/AsciiEffect.js';
import { TrackballControls } from 'https://duhaime.s3.amazonaws.com/sketches/A565AC1E351B6A21FF7F005AB6FDE6F7/assets/js/TrackballControls.js';
var camera, controls, scene, renderer, effect;
var sphere, plane;
var play, video, videocanvas, videocanvasctx, texture;
var start = Date.now();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0, 0, 0 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
effect = new AsciiEffect( renderer, ' .:-+*=%##', { invert: true } );
effect.setSize( window.innerWidth, window.innerHeight );
effect.domElement.style.color = 'white';
effect.domElement.style.backgroundColor = 'black';
// use effect.domElement for ascii rendering
document.body.appendChild( effect.domElement );
controls = new TrackballControls( camera, effect.domElement );
window.addEventListener( 'resize', onWindowResize, false );
// video
video = document.querySelector('#video');
play = document.querySelector('#play');
play.addEventListener('click', startVideo);
function startVideo() {
video.play();
play.parentNode.removeChild(play);
// create the canvas
videocanvas = document.createElement('canvas');
videocanvas.height = video.clientHeight;
videocanvas.width = video.clientWidth;
videocanvas.crossOrigin = 'anonymous';
videocanvasctx = videocanvas.getContext('2d');
videocanvasctx.fillStyle = '#000000';
videocanvasctx.fillRect(0,0,video.clientWidth,video.clientHeight);
texture = new THREE.Texture(videocanvas);
var material = new THREE.MeshBasicMaterial( { map: texture } );
var geometry = new THREE.PlaneGeometry( video.clientWidth, video.clientHeight, 32 );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
effect.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = Date.now() - start;
controls.update();
effect.render( scene, camera );
if (videocanvasctx && video.readyState == video.HAVE_ENOUGH_DATA) {
videocanvasctx.drawImage(video, 0, 0);
texture.needsUpdate = true;
}
}
</script>
</body>
</html>
This works fine in Chrome, but does not run in Safari. Does anyone know why that might be, or what I should investigate to discover the different behavior in Safari? Any pointers would be very helpful!

Related

Three.js Geometry isn't showing in browser, but the scene is

was following a tutorial and got the whole scene working in the body tag, then I tried moving it inside a div, and now only the scene will render. I'm not getting any errors, and I've console logged everything to make sure it is available to access. But I can't see why I'm nothing displayed.
// console.log ("Java Script is working!")
// get div for 3D area
const container = document.querySelector('#container')
// console.log (container)
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(
75,
container.innerWidth / container.innerHeight,
0.1,
1000
)
camera.position.z = 3
var renderer = new THREE.WebGLRenderer({
antialias: true
})
renderer.setClearColor('#0D1033')
renderer.setSize(container.innerWidth, container.innerHeight)
container.appendChild(renderer.domElement)
container.addEventListener('resize', () => {
renderer.setSize(container.innerWidth, container.innerHeight)
camera.aspect = container.innerWidth / container.innerHeight
camera.updateProjectionMatrix()
})
var geometry = new THREE.BoxGeometry(10, 1, 1)
var material = new THREE.MeshLambertMaterial({
color: 0x90e9f9,
side: THREE.DoubleSide
})
var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
var light = new THREE.PointLight(0xffffff, 5, 500)
light.position.set(10, 0, 25)
scene.add(light)
var render = function() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
console.log(mesh)
console.log(camera)
render()
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
height: 100vh;
}
canvas {
display: block;
height: 100%;
width: 100%;
}
#container {
background-color: black;
height: 100vh;
}
<!DOCTYPE html>
<body>
<div id="container">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I'm trying to get this working first so I know this can work before I move it into my main project, where I'm trying to have a 3d space inside a div on the website, but not take up the full page
You can only use innerWidth and innerHeight on the window object. Use clientWidth and clientHeight instead:
const container = document.querySelector('#container')
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75,
container.clientWidth / container.clientHeight,
0.1,
1000
)
camera.position.z = 3
const renderer = new THREE.WebGLRenderer({
antialias: true
})
renderer.setClearColor('#0D1033')
renderer.setSize(container.clientWidth, container.clientHeight)
container.appendChild(renderer.domElement)
container.addEventListener('resize', () => {
renderer.setSize(container.clientWidth, container.clientHeight)
camera.aspect = container.clientWidth / container.clientHeight
camera.updateProjectionMatrix()
})
const geometry = new THREE.BoxGeometry(10, 1, 1)
const material = new THREE.MeshLambertMaterial({
color: 0x90e9f9,
side: THREE.DoubleSide
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
const light = new THREE.PointLight(0xffffff, 5, 500)
light.position.set(10, 0, 25)
scene.add(light)
const render = function() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
render()
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
height: 100vh;
}
canvas {
display: block;
height: 100%;
width: 100%;
}
#container {
background-color: black;
height: 100vh;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.133.1/build/three.min.js"></script>
<div id="container">
</div>

How to center the three js canvas?

I have this really weird (possibly intended?) bug with my three js canvas.
I want to have it not fill the complete page and center the canvas inside a div.
As you can see in the code below, the canvas is inside the div. I even added some test headings to make sure I'm not going crazy here, but the canvas seems to move itself outside the div and I have no idea how to fix this.
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
#test {
width: 100px;
height:100px;
margin: 0px auto;
border: 1px solid red;
}
</style>
<style type="text/css" src="css/main.css"></style>
</head>
<body>
<div id="test">
<h1>test1</h1>
<canvas id="canvasID"></canvas>
<h2>test2</h2>
</div>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js"></script>
<script src="three.js-master/build/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var canvas = document.getElementById("canvasID");
var renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize( window.innerWidth*0.9, window.innerHeight*0.9 );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
render();
if (Detector.webgl) {
init();
animate();
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</script>
</body>
As you can see, the canvas has "magically" moved outside of its parent div
In your code you have this line document.body.appendChild( renderer.domElement ); which appends the canvas to the end of the <body> tag. So you are adding the canvas outside of your required div.
You can add your canvas inside that div with a simple javascript selector like:
document.getElementById('test').appendChild( renderer.domElement );
or
document.querySelector('#test').appendChild( renderer.domElement );
That way you are adding the renderer inside the div with the id="test". Let me know if it worked.

how to make Panoramic view 360 with javascript,webgl

i want to make panoramic view like in this url : https://s3-eu-west-1.amazonaws.com/canonliveevents/360/ny_expo_2015/index.html
i was able to do this http://threejs.org/examples/#css3d_panorama but i need to add some button on the image for information about the image.
anyhelp will be appreciate, thanks anyway
mycode :
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
margin: 0;
}
canvas{
position: absolute;
width: 100%;
height: 100%
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
</head>
<body>
<div id="test" style="position: absolute; left: 0px; top: 0px; width: 884px; height: 657px; overflow: hidden; -moz-user-select: none; cursor: default;">
<div id="img" stlye="position:absolute;left:0px;top:0px;">
</div>
<div id="button" style="position:absolute;left:0px;right:0px;width:100%;height:100%;overflow:hidden;">
<div style="position: absolute; z-index: 2001; overflow: visible; cursor: pointer; pointer-events: auto; opacity: 1; transform-origin: 50% 50% 0px; background-image: url("https://s3-eu-west-1.amazonaws.com/canonliveevents/360/ny_expo_2015/skin/images/info.png"); width: 100px; height: 100px; background-position: 0px 0px; background-size: 100px 200px; transform: translateZ(0px) translate(373.486px, 358.85px) translate(-50px, -50px) rotate(0deg) translate(0px, 0px) scale(0.5, 0.5) translate(0px, 0px);">
</div>
</div>
</div>
<script>
var manualControl = false;
var longitude = 0;
var latitude = 0;
var savedX;
var savedY;
var savedLongitude;
var savedLatitude;
// panoramas background
var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);
// setting up the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var obj = document.getElementById('test');
obj.appendChild(renderer.domElement);
// creating a new scene
var scene = new THREE.Scene();
// adding a camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.target = new THREE.Vector3(0, 0, 0);
// creation of a big sphere geometry
var sphere = new THREE.SphereGeometry(100, 100, 40);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
// creation of the sphere material
var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])
// geometry + material = mesh (actual object)
var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);
// listeners
document.addEventListener("mousedown", onDocumentMouseDown, false);
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("mouseup", onDocumentMouseUp, false);
render();
function render(){
requestAnimationFrame(render);
if(!manualControl){
longitude += 0.1;
}
// limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
latitude = Math.max(-85, Math.min(85, latitude));
// moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(longitude));
camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - latitude));
camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(longitude));
camera.lookAt(camera.target);
// calling again render function
renderer.render(scene, camera);
}
// when the mouse is pressed, we switch to manual control and save current coordinates
function onDocumentMouseDown(event){
event.preventDefault();
manualControl = true;
savedX = event.clientX;
savedY = event.clientY;
savedLongitude = longitude;
savedLatitude = latitude;
}
// when the mouse moves, if in manual contro we adjust coordinates
function onDocumentMouseMove(event){
if(manualControl){
longitude = (savedX - event.clientX) * 0.1 + savedLongitude;
latitude = (event.clientY - savedY) * 0.1 + savedLatitude;
}
}
// when the mouse is released, we turn manual control off
function onDocumentMouseUp(event){
manualControl = false;
}
// pressing a key (actually releasing it) changes the texture map
document.onkeyup = function(event){
panoramaNumber = (panoramaNumber + 1) % panoramasArray.length
sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])
}
</script>
</body>
</html>`

Is there a way to grab my location on one site and open another site on my location?

I'm playing around with this html5 script that, right now, loads a globe that and you have to click on the globe to grab the location and it opens another site with a map on the location you clicked. Here is an example of the site with the globe:
http://parameter-pollution.github.io/webgl-ingress/demo/index.html
You'll see that when you click on the globe it opens the other site with the location you clicked on. Below is the html code that makes this all happen.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Ingress WebGL</title>
<meta charset="utf-8">
<style type="text/css">
html{
height: 100%;
}
body {
margin: 0;
padding: 0;
border: 0;
overflow-y:hidden;
overflow-x:hidden;
height: 100%;
background-color: #000000;
}
#universe{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
.ada_wheel{
position:absolute;
top: 50%;
left: 50%;
height: 396px;
width: 396px;
margin-top: -198px;
margin-left: -198px;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#wheel_outer{
animation-name: rotateLeft;
-webkit-animation-name: rotateLeft;
}
#keyframes rotateLeft{
from { transform:rotate(360deg); }
to { transform:rotate(0deg); }
}
#-webkit-keyframes rotateLeft{
from { -webkit-transform:rotate(360deg); }
to { -webkit-transform:rotate(0deg); }
}
#wheel_inner{
animation-name: rotateRight;
-webkit-animation-name: rotateRight;
}
#keyframes rotateRight{
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
#-webkit-keyframes rotateRight{
from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(360deg); }
}
#border_gradient{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
#click_notify{
position:absolute;
top:20%;
left:20%;
color: white;
font-size:2em;
display:none;
}
#webgl_error{
margin-top: 10%;
text-align: center;
color:white;
display:none;
}
</style>
<script type="text/javascript" src="/Detector.js"></script>
<script type="text/javascript" src="/three.js"></script>
<script type="text/javascript" src="/Tween.js"></script>
<script type="text/javascript" src="/myOrbit.js"></script>
<script type="text/javascript" src="/myHUD.js"></script>
<script type="text/javascript">
/*
#coder paremeter-pollution / https://github.com/parameter-pollution/
*/
//audio controls:
var sounds={};
var tweenStyle={};
tweenStyle.opacity=1;
var inner_wheel, outer_wheel, border_gradient, click_notify;
// standard global variables
var container, scene, camera, renderer, clock, controls, stats, projector;
// custom global variables
var middle_earth={x:0,y:0,z:0};
var orbit;
var earth;
var earth_radius=50;
var layers= new Array(10);
var layer_distance=0.005;
var hud;
var hud_distance=30;
var crosshairTrackingPoint;
var randomPointInterval;
var numberOfTextures=3;
function init()
{
if(!Detector.webgl){ //check for webgl support
document.getElementById('webgl_error').style.display="block";
return;
}
sounds.aquiring_position=document.getElementById('aquiring_position');
sounds.crosshair_locked=document.getElementById('crosshair_locked');
sounds.logon_established=document.getElementById('logon_established');
sounds.zoom_sound=document.getElementById('zoom_sound');
sounds.downloading_latest_intel_package=document.getElementById('downloading_latest_intel_package');
sounds.ambient_space=document.getElementById('ambient_space');
inner_wheel=document.getElementById('wheel_inner');
outer_wheel= document.getElementById('wheel_outer');
border_gradient= document.getElementById('border_gradient');
click_notify=document.getElementById('click_notify');
clock = new THREE.Clock();
scene = new THREE.Scene();
// set up camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 2000);
camera.up.set(0,0,1);
//HUD
hud = new myHUD(camera,hud_distance);
crosshairTrackingPoint=new THREE.Vector3(25,25,25);
//crosshair
var crosshairGeometry = new THREE.PlaneGeometry( 30, 30 );
var crosshairMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/crosshair.png', null, textureLoadComplete), transparent:true } );
crosshair = new THREE.Mesh(crosshairGeometry, crosshairMaterial);
hud.addTracked(crosshair, crosshairTrackingPoint);
//var ambientLight = new THREE.AmbientLight(0x101010,0.5);
//scene.add(ambientLight);
// spotlight
var spotlight = new THREE.SpotLight(0xffffff, 1.4);
spotlight.position.set(0,0,50);
spotlight.angle=Math.PI/6;
camera.add(spotlight);
/*
var spotlight2 = new THREE.SpotLight(0xffffff, 1.5, 40);
spotlight2.position.set(0,0,30);
spotlight2.exponent=0;
camera.add(spotlight2);
*/
// add the camera to the scene
scene.add(camera);
orbit=new myOrbit( camera, middle_earth, 500, clock );
// create renderer
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(window.innerWidth, window.innerHeight);
// render container
container = document.getElementById( 'universe' );
// attach renderer to the container div
container.appendChild( renderer.domElement );
// sphere parameters: radius, segments along width, segments along height
var earthGeometry = new THREE.SphereGeometry( earth_radius, 64, 32 );
var earthMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/borders.jpg', null, textureLoadComplete) } );
earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.rotation.set(Math.PI/2,0,0);
// layers
var layerMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/layer.png', null, textureLoadComplete), transparent:true, opacity: 0.6 } );
//this function doesn't work when you start with adding layers with lower scale. but i have NO FUCKING IDEA why ^^
//if you decide to change it around and find yourself changing it back again increase this counter: 3
var scale=1+layer_distance*layers.length;
for (var i = 0; i < layers.length; i++) {
layers[i] = new THREE.Mesh(earthGeometry, layerMaterial);
layers[i].scale.set( scale, scale, scale );
earth.add(layers[i]);
scale -= layer_distance;
}
scene.add(earth);
renderer.initWebGLObjects( scene );
projector = new THREE.Projector();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function textureLoadComplete(){
numberOfTextures--;
if( numberOfTextures === 0 ){ //all textures have been loaded, let's get this party started ;-)
var delta=clock.getDelta();
if( delta < 3000 ){ //make sure people with google fiber can also appreciate the loading animation ;-)
setTimeout( function(){startAnimation()}, 3000-delta);
}else{
startAnimation();
}
}
}
function startAnimation(){
fadeOutLoading();
orbit.tween_to_orbit( { distance: 200}, 4000, TWEEN.Easing.Exponential.Out, function(){
playSound(sounds.aquiring_position);
setTimeout( function(){
playSound(sounds.logon_established);
}, 2000);
setTimeout( function(){click_notify.style.display="inline";}, 5000);
});
randomPointInterval = setInterval( generateRandomTrackingPoint , 2000);
//start render loop
animate();
}
function fadeOutLoading(){
var fadeOutTween=new TWEEN.Tween(tweenStyle).to( {opacity: 0}, 4000);
fadeOutTween.easing(TWEEN.Easing.Cubic.In);
fadeOutTween.onUpdate(function(){
inner_wheel.style.opacity=tweenStyle.opacity;
outer_wheel.style.opacity=tweenStyle.opacity;
});
fadeOutTween.onComplete(function(){
inner_wheel.style.display="none";
outer_wheel.style.display="none";
});
fadeOutTween.start();
}
function animate()
{
requestAnimationFrame( animate );
render();
}
function render()
{
TWEEN.update();
orbit.update();
hud.update();
renderer.clear();
renderer.render( scene, orbit.camera );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObject( earth );
if ( intersects.length > 0 ) { //bazinga, we found an intersection point
orbit.fixAzimuth();
orbit.autoRotate=false;
window.clearInterval(randomPointInterval);
randomPointInterval=null;
hud.updateTrackingPoint( new THREE.Vector3(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z) );
var spherical=orbit.convertCartesionToSpherical( intersects[0].point );
console.log("--lat------------long------");
console.log(spherical.inclination,spherical.azimuth);
var latitude=((spherical.inclination*180/Math.PI)-90)*(-1);
var longitude=spherical.azimuth*180/Math.PI;
if( longitude > 180 ){ longitude-=360 }
console.log(latitude,longitude);
// http://www.ingress.com/intel?ll=LA.ITUDE,LO.NGITUDE&z=9
//http://www.ingress.com/intel?ll=48.729699,15.205459&z=20
playSound(sounds.zoom_sound);
playSound(sounds.downloading_latest_intel_package);
click_notify.style.display="none"
border_gradient.style.display="none";
orbit.tween_to_orbit(spherical, 3000, TWEEN.Easing.Cubic.InOut, function(){
window.location.href="http://www.ingress.com/intel?ll="+latitude+","+longitude+"&z=6";
/*orbit.reset();
hud.updateTrackingPoint(new THREE.Vector3(0,0,0));
if( randomPointInterval === null ) { randomPointInterval = setInterval( generateRandomTrackingPoint , 2000); };
//TODO: this timeout should not be necessary
setTimeout( function(){
border_gradient.style.display="inline";
orbit.tween_to_orbit( { distance: 200}, 3000, TWEEN.Easing.Exponential.Out, function(){
playSound(sounds.aquiring_position);
setTimeout( function(){
playSound(sounds.logon_established);
}, 2000);
});
}, 50);*/
});
}
}
function onWindowResize( event ) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function generateRandomTrackingPoint(){
var min_azimuth=orbit.spherical.azimuth-0.5;
var max_azimuth=min_azimuth+Math.PI/2;
var spherical={};
spherical.azimuth = getRandomNumber(min_azimuth,max_azimuth);
spherical.inclination = getRandomNumber( 0.4, Math.PI-0.4 );
spherical.distance = earth_radius;
playSound(crosshair_locked);
var point=orbit.convertSphericalToCartesian(spherical);
hud.updateTrackingPoint(new THREE.Vector3(point.x, point.y, point.z));
}
function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function playSound(sound){
var newAudio=new Audio(sound.src);
newAudio.play();
}
//chrome audio loop stops working randomly. this ugly hack fixes it
function ambient_loop_hack(){
setTimeout(function(){
playSound(sounds.ambient_space);
ambient_loop_hack();
}, 5601 );
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
<img class="ada_wheel" id="wheel_outer" src="img/ada_wheel_outer.png">
<img class="ada_wheel" id="wheel_inner" src="img/ada_wheel_inner.png">
<img id="border_gradient" src="img/border_gradient.png">
<div id="click_notify">click somewhere on the planet!</div>
<div id="webgl_error">Sorry, your graphics card and/or webbrowser don't support WebGL!</div>
<div id="universe"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42384097-1', 'github.com');
ga('send', 'pageview');
</script>
<body onload="getLocation()">
I've tried using this example to grab the current location:
http://www.w3schools.com/html/html5_geolocation.asp
and loading the function on load with this example:
http://html5hive.org/javascript-beginners-tutorial/
Is there any way to make this work where it loads the globe, grabs the location and then opens the other site with the map on the current location it grabbed from the globe? All without having to click on the globe.
This is the script I run to get the current users location coordiantes:
<body onload="getLocation()">
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Here's code that gets the users location and then redirects to the Ingress site with the right parameters:
<button onclick="getLoc()">GET LOCATION</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(redirectMe);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function redirectMe(position) {
document.location.href="https://www.ingress.com/intel?ll="+position.coords.latitude+","+position.coords.longitude+"&z=6";
}
</script>
This: position.coords.longitude and this position.coords.latitude are variables created by the navigator.geolocation function. You're then calling them up in the second function. document.location.href redirects to a URL you specify.
Fiddle: http://jsfiddle.net/ve0bwg24/4/

Texturing a sphere with Three.js does'nt work on smartphones

I have some troubles using Three.js. I want to apply a texture on a sphere (an image). My code works without any problem... until I try it on a smartphone. I try to look for the bug with Firefox and its remote debugger, but I did not find the issue. Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0" />
<script src="./three.min.js"></script>
<script src="./sphere.js"></script>
<style>
html, body, #container {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container" style="width: 300px; height: 200px;"></div>
<script>
init();
</script>
</body>
</html>
and :
var renderer, scene, camera, mesh;
function init() {
var container = document.getElementById('container');
var width = container.offsetWidth;
var height = container.offsetHeight;
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, width/height, 1, 1000);
camera.position.set(0, 0, 300);
scene.add(camera);
var geometry = new THREE.SphereGeometry(200, 16, 16);
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader();
var f = function(img) {
texture.needsUpdate = true;
texture.image = img;
var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
render();
animate();
}
loader.load('sphere.jpg', f);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.y += 0.003;
render();
}
function render() {
renderer.render(scene, camera);
}
What do I do wrong?
If you want to see the code in action, you can go here. Note that the problem is here with both WebGLRenderer and CanvasRenderer.
As a repost: The problem is solved by using power of two texture sizes.

Categories

Resources