i am using google Chrome (59.0.3071.125) in my mobile
i was Enabled : WebVR , Gamepad in my chrome using chrome://flags/ to support WEBVR when i tried first time it worked
BUT after 2 days now its givig this exception:
Uncaught (in promise) DOMException: Presentation request was denied.
I have no clue why.
i tried to search around but i found nothing
below is the code of https://threejs.org/examples/?q=vr#webvr_cubes i have tried
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webvr - cubes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- Origin Trial Token, feature = WebVR, origin = https://threejs.org, expires = 2017-06-13 -->
<meta http-equiv="origin-trial" data-feature="WebVR" data-expires="2017-06-13" content="ApAQvHfiHMQB7SmRhfvCUX61adJaTA6pAu0Ry439jjeipa5lGm1RcTQynFoHGGcaSJkWfMOv7qK6pwSUb95ClQgAAABKeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJWUiIsImV4cGlyeSI6MTQ5NzMxMjAwMH0=">
<style>
body {
font-family: Monospace;
background-color: #101010;
color: #fff;
margin: 0px;
overflow: hidden;
}
a {
color: #f00;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/controls/VRControls.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/vr/WebVR.js"></script>
<script>
if ( WEBVR.isAvailable() === false ) {
document.body.appendChild( WEBVR.getMessage() );
}
//
var clock = new THREE.Clock();
var container;
var camera, scene, raycaster, renderer;
var effect, controls;
var room;
var isMouseDown = false;
var INTERSECTED;
var crosshair;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'three.js webgl - interactive cubes';
container.appendChild( info );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
scene.add( camera );
crosshair = new THREE.Mesh(
new THREE.RingGeometry( 0.02, 0.04, 32 ),
new THREE.MeshBasicMaterial( {
color: 0xffffff,
opacity: 0.5,
transparent: true
} )
);
crosshair.position.z = - 2;
camera.add( crosshair );
room = new THREE.Mesh(
new THREE.BoxGeometry( 6, 6, 6, 8, 8, 8 ),
new THREE.MeshBasicMaterial( { color: 0x404040, wireframe: true } )
);
scene.add( room );
scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );
var geometry = new THREE.BoxGeometry( 0.15, 0.15, 0.15 );
for ( var i = 0; i < 200; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 4 - 2;
object.position.y = Math.random() * 4 - 2;
object.position.z = Math.random() * 4 - 2;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
object.scale.z = Math.random() + 0.5;
object.userData.velocity = new THREE.Vector3();
object.userData.velocity.x = Math.random() * 0.01 - 0.005;
object.userData.velocity.y = Math.random() * 0.01 - 0.005;
object.userData.velocity.z = Math.random() * 0.01 - 0.005;
room.add( object );
}
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x505050 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
controls = new THREE.VRControls( camera );
effect = new THREE.VREffect( renderer );
WEBVR.getVRDisplay( function ( display ) {
document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
} );
renderer.domElement.addEventListener( 'mousedown', onMouseDown, false );
renderer.domElement.addEventListener( 'mouseup', onMouseUp, false );
renderer.domElement.addEventListener( 'touchstart', onMouseDown, false );
renderer.domElement.addEventListener( 'touchend', onMouseUp, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onMouseDown() {
isMouseDown = true;
}
function onMouseUp() {
isMouseDown = false;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
effect.requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta() * 60;
if ( isMouseDown === true ) {
var cube = room.children[ 0 ];
room.remove( cube );
cube.position.set( 0, 0, - 0.75 );
cube.position.applyQuaternion( camera.quaternion );
cube.userData.velocity.x = ( Math.random() - 0.5 ) * 0.02 * delta;
cube.userData.velocity.y = ( Math.random() - 0.5 ) * 0.02 * delta;
cube.userData.velocity.z = ( Math.random() * 0.01 - 0.05 ) * delta;
cube.userData.velocity.applyQuaternion( camera.quaternion );
room.add( cube );
}
// find intersections
raycaster.setFromCamera( { x: 0, y: 0 }, camera );
var intersects = raycaster.intersectObjects( room.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex( 0xff0000 );
}
} else {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = undefined;
}
// Keep cubes inside room
for ( var i = 0; i < room.children.length; i ++ ) {
var cube = room.children[ i ];
cube.userData.velocity.multiplyScalar( 1 - ( 0.001 * delta ) );
cube.position.add( cube.userData.velocity );
if ( cube.position.x < - 3 || cube.position.x > 3 ) {
cube.position.x = THREE.Math.clamp( cube.position.x, - 3, 3 );
cube.userData.velocity.x = - cube.userData.velocity.x;
}
if ( cube.position.y < - 3 || cube.position.y > 3 ) {
cube.position.y = THREE.Math.clamp( cube.position.y, - 3, 3 );
cube.userData.velocity.y = - cube.userData.velocity.y;
}
if ( cube.position.z < - 3 || cube.position.z > 3 ) {
cube.position.z = THREE.Math.clamp( cube.position.z, - 3, 3 );
cube.userData.velocity.z = - cube.userData.velocity.z;
}
cube.rotation.x += cube.userData.velocity.x * 2 * delta;
cube.rotation.y += cube.userData.velocity.y * 2 * delta;
cube.rotation.z += cube.userData.velocity.z * 2 * delta;
}
controls.update();
effect.render( scene, camera );
}
</script>
</body>
</html>
I just hit a very similar issue. It seems that VRButton does not work well with requestAnimationFrame. Instead you need to use renderer.setAnimiationLoop.
Your code:
function animate() {
effect.requestAnimationFrame( animate );
render();
}
Change it to this:
function animate() {
renderer.setAnimationLoop(() => { render(); });
}
Related
Please tell me how to display the project.
html
<head>
<meta charset="UTF-8"/>
<title>name</title>
<style>
body {
padding:0;
margin: 0;
}
canvas { width: 100%; height: 100%; }
#program3d {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<script src="js\Sistem\three.js"></script>
<script src="js\Loader\OBJLoader.js"></script>
<script src="js\Sistem\TrackballControls.js"></script>
<script src="js\Sistem\mucode.js"></script>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHD4lDk5cupCKwwEl78HwEgL6lfk1WcsVq88FTSe2xpVGN_n4s" width="175px"/> <br/>
<div id="program3d"></div>
<input type="button" id="B1" value="Start" name="button1" onclick="A1(); style.display='none'" ><br/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHD4lDk5cupCKwwEl78HwEgL6lfk1WcsVq88FTSe2xpVGN_n4s" width="175px"/> <br/>
</body>
</html>
JS
function A1(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(65,window.innerWidth/window.innerHeight, 0.1, 10000);
container = document.getElementById( 'program3d' );
document.body.appendChild( container );
var render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
container.appendChild( render.domElement );
render.setClearColor ( 0xC8C7C7 );
camera.position.z= 5;
camera.position.x= 0;
camera.position.y= 0;
var ambientLight = new THREE.AmbientLight ( 0xfffef5, 0.45 );
scene.add (ambientLight);
var directionalLight = new THREE.DirectionalLight (0xfff2e8, 0.8 );
directionalLight.position.set (0.1, 1, 0.2);
scene.add(directionalLight);
var light1 =new THREE.PointLight(0xFFFFFF, 4 , 30);
//scene.add (light1);
var light2 =new THREE.PointLight(0xFFFFFF, 4 , 30);
//scene.add (light2);
var light3 =new THREE.PointLight(0xFFFFFF, 4 , 30);
//scene.add (light3);
var update = function (){
var time = Date.now() * 0.0005;
light1.position.x = Math.sin ( time * 0.7) * 30;
light1.position.y = Math.cos ( time * 0.5) * 40;
light1.position.z = Math.cos ( time * 0.3) * 30;
light2.position.x = Math.cos ( time * 0.3) * 30;
light2.position.y = Math.sin ( time * 0.5) * 40;
light2.position.z = Math.sin ( time * 0.7) * 30;
light3.position.x = Math.sin ( time * 0.7) * 30;
light3.position.y = Math.cos ( time * 0.3) * 40;
light3.position.z = Math.sin ( time * 0.3) * 30;
};
var manager = new THREE.LoadingManager();
var loader = new THREE.ImageLoader(manager);
var masif = [
THREE.OBJLoader,
THREE.MMDLoader];
var meshes = [];
var objLoader = new masif [0]();
objLoader.load ('models/bas2.obj', function (object){
console.log(object);
object.traverse (function (child)
{
if (child instanceof THREE.Mesh)
{
meshes.push(child);
}
});
var mesh1 = meshes [2];
mesh1.position.y = 0;
var textureBody = new THREE.Texture();
loader.load ('tex/Base4.png', function (image){
textureBody.image = image;
textureBody.needsUpdate = true;
});
var bumpMapBody = new THREE.TextureLoader().load('tex/untitled2-NM_u0_v0.tif');
mesh1.material = new THREE.MeshPhongMaterial({
wireframeLinecap : "round",
wireframeLinejoin : "round",
map: textureBody
});
meshes.forEach(function(entry){
scene.add(entry);
});
});
var controls = new THREE.TrackballControls (camera);
var rendering =function() {
controls.update();
render.render(scene, camera);
};
var GameLoop = function(){
requestAnimationFrame (GameLoop);
update();
rendering();
};
GameLoop();
rendering();
};
so that (canvas) is strictly in div program3d
and does not go beyond
I was able to transfer it to
container = document.getElementById ('program3d');
But for some reason, after clicking on the button, the window still flies to the end (body) And takes the whole page
Please tell me how to fix it.
http://static2.keep4u.ru/2018/10/17/6566af4d181bd622e8e.png
I'm trying to load a 3D globe into my HTML site using a ThreeJS script (found below) But it's stitched together with code from other sources, meaning the camera is mapped to MouseX and MouseY positions. I want the object to sit in the center of the page with a simple slow spin, but every time I try and achieve this the object vanishes.
The Javascript:
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 5, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 250;
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.8 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xFFF1CF, 0.6 , 0 );
camera.add( pointLight );
scene.add( camera );
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {;
};
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('planet.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('planet.obj', function(object) {
object.position.y = 0;
scene.add(object);
}, onProgress, onError);
});
//
renderer = new THREE.WebGLRenderer( {alpha: true});
renderer.setClearColor( 0x000000, 0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseclick', onmousedown, false);
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX );
mouseY = ( event.clientY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
You need to change your code a little bit,
In the 'init' function, change the object loading logic as follows
var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();
mtlLoader.load( 'planet.mtl', function(materials) {
materials.preload();
objLoader.setMaterials(materials);
objLoader.load( 'planet.obj', function( object ){
object.position.set( 0, 0, 0 ); // set the position as (0,0,0)
globe = object; // globe is the object to be added to the scene
scene.add(globe);
animate(); //call the animate function only after the object is loaded
}, onProgress, onError);
} );
And change the render method,
function render() {
globe.rotation.y += 0.01; // this will rotate the object
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
I wish to move a cube based on the movement of another cube to which TransformControls is attached by means of Matrix4() method only.
The attempts so far have failed to shift the follower cube.
I'm not sure why the follower doesn't seem to take the world co-ordinates of the directing cube.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - transform controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
background-color: #000000;
color: #fff;
font-family:Monospace;
text-align: center;
font-size: 15px;
line-height: 30px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 15px;
z-index:100;
}
</style>
</head>
<body>
<div id="info">
"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid
</div>
<script src="build/three.js"></script>
<script src="js/controls/TransformControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
var camera, scene, renderer, control, mesh, mesh1;
init();
animate();
//render();
//update();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.set( 1000, 500, 1000 );
camera.lookAt( new THREE.Vector3( 0, 200, 0 ) );
scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 1000, 10 ) );
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );
//var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
//texture.mapping = THREE.UVMapping;
//texture.anisotropy = renderer.getMaxAnisotropy();
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
control.attach( mesh );
scene.add( control );
var followerCube = new THREE.BoxGeometry( 200, 200, 200 );
var material1 = new THREE.MeshBasicMaterial( { color: 0xff9909 } );
mesh1 = new THREE.Mesh( followerCube, mesh1 );
scene.updateMatrixWorld();
mesh1.matrixAutoUpdate = false;
var relativeMeshOffset = new THREE.Vector3( 100, 100, 200 );
var offsetPosition = relativeMeshOffset.applyMatrix4( mesh.matrixWorld );
mesh1.position.x = offsetPosition.x;
mesh1.position.y = offsetPosition.y;
mesh1.position.z = offsetPosition.z;
scene.add( mesh1 );
console.log(mesh1.position);
var orbitControl = new THREE.OrbitControls( camera, renderer.domElement );
orbitControl.addEventListener( 'change', render );
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'keydown', function ( event ) {
switch ( event.keyCode ) {
case 81: // Q
control.setSpace( control.space === "local" ? "world" : "local" );
break;
case 17: // Ctrl
control.setTranslationSnap( 100 );
control.setRotationSnap( THREE.Math.degToRad( 15 ) );
break;
case 87: // W
control.setMode( "translate" );
break;
case 69: // E
control.setMode( "rotate" );
break;
case 82: // R
control.setMode( "scale" );
break;
case 187:
case 107: // +, =, num+
control.setSize( control.size + 0.1 );
break;
case 189:
case 109: // -, _, num-
control.setSize( Math.max( control.size - 0.1, 0.1 ) );
break;
}
});
window.addEventListener( 'keyup', function ( event ) {
switch ( event.keyCode ) {
case 17: // Ctrl
control.setTranslationSnap( null );
control.setRotationSnap( null );
break;
}
});
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function animate() {
requestAnimationFrame( animate );
render();
update();
}
function update() {
var relativeMeshOffset = new THREE.Vector3( 100, 100, 200 );
var offsetPosition = relativeMeshOffset.applyMatrix4( mesh.matrixWorld );
mesh1.position.x = offsetPosition.x;
mesh1.position.y = offsetPosition.y;
mesh1.position.z = offsetPosition.z;
}
function render() {
control.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>
Cause you set mesh1.matrixAutoUpdate = false; in line 75. If you do that, the mesh1 wouldn't change its position.
I have a problem .
I want move the earth in 360° with the mouse but nothing happens .
However , I would like the world is fixed and does not move when I use the mouse to rotate 360 .
Waiting for a response .
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">three.js - earth demo</div>
<script src="../build/three.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var group;
var mouseX = 0, mouseY = 0;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 900;
scene = new THREE.Scene();
group = new THREE.Object3D();
scene.add( group );
// earth
var earthTexture = new THREE.Texture();
var loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function ( event ) {
earthTexture.image = event.content;
earthTexture.needsUpdate = true;
} );
loader.load( 'textures/1.jpg');
var geometry = new THREE.SphereGeometry( 250, 55, 55 );
var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
// shadow
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.50;
camera.position.y += ( - mouseY - camera.position.y ) * 0.50;
camera.lookAt( scene.position );
group.rotation.y -= 0.01;
renderer.render( scene, camera );
}
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
</script>
</body>
the problem that you are having is that you are only moving the camera in the X and Y direction, when the camera is a 3D entity.
In order to do the rotation, you need to move convert the mouse coordinate from 3D spherical coordinates (like latitude, longitude, altitude, assuming a constant altitude, you can assign X to longitude and Y to latitude).
Then assign the 3D cartesian coordinates to your camera:
The formula is (replacing what you have in your render function):
(assume altitude is 960, which works with your model)
camera.position.x = 960 * Math.sin(mouseX) * Math.cos(mouseY);
camera.position.y = 960 * Math.sin(mouseX) * Math.sin(mouseY);
camera.position.z = 960 * Math.cos(mouseX);
The next caveat is that sin and cos take radians (range from -pi to pi (-3.14159 to 3.14159)...so you will need to adjust your onDocumentMouseMove event to something like
mouseX = -Math.PI + (event.clientX)/(windowHalfX*2)*Math.PI*2;
mouseY = -Math.PI + (event.clientY)/(windowHalfY*2)*Math.PI*2;
This will cause the mouse to act in lat/long coordinate (which can still be a little strange if you are looking at the top of the world. You could restrict mouseY=0, then the X rotation would always be on the equator.
The math is a little more complicated if you want moving the mouse to be on a moving frame vs. the earth centric frame I've shown. But this should at least be a start.
http://www.mrspeaker.net/
This guy make his entire background particles but I've been roaming around in Inspect Element to figure out how he did it and can't. I'm not quite sure how it's done does anyone know the code for him to do this?
http://www.mrspeaker.net/wp-content/themes/stuartspeaker/scripts/speaker.js
$( window ).load( function(){
bubbleController.init();
setInterval( function(){
bubbleController.update()
}, 200 );
$( window ).resize(function(){
bubbleController.setBoundaries();
});
if( $( ".leftcolumn" ).length )
{
//main page
var leftColumn = parseInt( $( ".leftcolumn" ).height(), 10 );
var rightColumn = parseInt( $( ".rightcolumn" ).height(), 10 );
/* Going to add extra stuff if the columns are uneven */
}
else{
swapTwitterPix();
}
});
var bubbleController = {
bubbles : [],
screenWidth : 0,
leftEdge : 0,
rightEdge : 0,
channelWidths : [],
minBubbleWidth : 10,
maxBubbleWidth : 100,
init : function(){
this.setBoundaries();
$("<div></div>").attr("id", "bubbleContainer").appendTo( $("body") );
for( var i = 0; i < 18; i++ ) {
var side = ( i % 2 === 0 ) ? 1 : 0;
var bub = new bubble();
this.bubbles.push( bub );
var width = Math.floor( Math.random() * this.maxBubbleWidth ) + this.minBubbleWidth;
bub.init(
this.getXPos( side ),
Math.floor( Math.random() * 800 ),
side,
(Math.random()*20/100).toFixed(2),
width,
Math.floor( ( ( ( this.maxBubbleWidth + this.minBubbleWidth ) - width ) / 8 ) / 5 ) + 1,
"#bubbleContainer" );
}
},
getXPos : function( blnLeftOrRight ) {
var xpos = ( Math.random() * this.channelWidths[ blnLeftOrRight ] );// + ( this.maxBubbleWidth / 2 );
return Math.floor( xpos / ( this.channelWidths[ blnLeftOrRight ] ) * 100 );
},
setBoundaries : function() {
this.screenWidth = $("body").width();
this.leftEdge = $("#outerWrapper").position().left;
this.rightEdge = this.leftEdge + 1040;
this.channelWidths[ 0 ] = this.leftEdge < 150 ? 150 : this.leftEdge;
this.channelWidths[ 1 ] = this.screenWidth - this.rightEdge;
},
update : function() {
$.each( this.bubbles, function() {
this.update();
});
}
};
function bubble(){
this.domRef;
this.diameter;
this.x;
this.xPerc;
this.y;
this.side;
this.opacity;
this.speed;
this.init = function( x, y, side, opacity, diameter, speed, addToElement ){
this.side = side;
this.xPerc = x;
this.y = y;
this.speed = speed;
this.opacity = opacity;
this.diameter = diameter;
this.domRef = $("<div></div")
.addClass( "bubble" )
.css("top", this.y )
.css("left", this.getXPos() )
.css( "opacity", this.opacity )
.appendTo( $( addToElement ) );
//.css("z-index", "-1")
var img = $( "<img></img>" )
//.attr("src", baseUrl + "/images/circle_" + this.colour + "_des.png" )
.attr("src", "/images/circleeye.png" )
.attr("height", this.diameter )
.appendTo( this.domRef )
.show()
/*.load(function(){
// Whoa... cpu == 90% for long fades
$(this).fadeIn( 20000 );
});*/
};
this.getXPos = function() {
this.x = ( bubbleController.channelWidths[ this.side ] * ( this.xPerc / 100 ) ) - ( this.diameter / 2 );
this.x += this.side == 1 ? bubbleController.rightEdge : 0;
return this.x;
};
this.update = function() {
this.y -= this.speed;
this.x = this.getXPos();
if( this.y < -this.diameter ) {
this.y = 800;
this.xPerc = bubbleController.getXPos( this.side );
this.x = this.getXPos();
this.opacity = (Math.random()*15/100).toFixed(2);
this.fireFadeIn();
}
this.updateDom();
};
this.setInit = function(){
};
this.updateDom = function() {
this.domRef
.css("top", this.y )
.css("left", this.x );
};
this.fireFadeIn = function() {
this.domRef
.hide()
.css( "opacity", this.opacity )
.fadeIn( 5000 );
};
}
p.s. there's nothing really HTML5 about this from my quick perusal of the markup and javascript
Check out the speaker.js file. When the page loads, he creates an empty div and adds 18 divs within it that are called "bubbles". Each bubble has an update method that changes its location, slowly creeping up the screen.
Furthermore, he sets a timer on the page to call a page-wide update method every 200 milliseconds. Within the page-wide update method, he calls update on each bubble.
I was going to post the code, but I see qntmfred already has.