Develop Reference

How can i move the "camera" of the canvas in HTML?

I'm making a 3D game which guides you across skyboxes, and what I need to do is for it to detect when the user presses a key, and move the camera that way (I'm fine with standard WASD).
How could I do this?
JavaScript:
var world = document.getElementById("boxDiv");
var x;
var y;
document.addEventListener('mousemove', function (e)
{
x = e.clientX;
y = e.clientY;
y = -y;
world.style.transform = "translateZ(600px) rotateX("+y+"deg) rotateY("+x+"deg)";
});
This code is for the skybox generation.

I think this is one of the best minimal reproducible examples on WASD controls on three.js
Kudos for the author Fyrestar
Relevant code is below:
// author: Fyrestar <info#mevedia.com>
var camera, scene, renderer, mesh, goal, keys, follow;
var time = 0;
var newPosition = new THREE.Vector3();
var matrix = new THREE.Matrix4();
var stop = 1;
var DEGTORAD = 0.01745327;
var temp = new THREE.Vector3;
var dir = new THREE.Vector3;
var a = new THREE.Vector3;
var b = new THREE.Vector3;
var coronaSafetyDistance = 0.3;
var velocity = 0.0;
var speed = 0.0;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.set( 0, .3, 0 );
scene = new THREE.Scene();
camera.lookAt( scene.position );
var geometry = new THREE.BoxBufferGeometry( 0.2, 0.2, 0.2 );
var material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
goal = new THREE.Object3D;
follow = new THREE.Object3D;
follow.position.z = -coronaSafetyDistance;
mesh.add( follow );
goal.add( camera );
scene.add( mesh );
var gridHelper = new THREE.GridHelper( 40, 40 );
scene.add( gridHelper );
scene.add( new THREE.AxesHelper() );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
keys = {
a: false,
s: false,
d: false,
w: false
};
document.body.addEventListener( 'keydown', function(e) {
const key = e.code.replace('Key', '').toLowerCase();
if ( keys[ key ] !== undefined )
keys[ key ] = true;
});
document.body.addEventListener( 'keyup', function(e) {
const key = e.code.replace('Key', '').toLowerCase();
if ( keys[ key ] !== undefined )
keys[ key ] = false;
});
}
function animate() {
requestAnimationFrame( animate );
speed = 0.0;
if ( keys.w )
speed = 0.01;
else if ( keys.s )
speed = -0.01;
velocity += ( speed - velocity ) * .3;
mesh.translateZ( velocity );
if ( keys.a )
mesh.rotateY(0.05);
else if ( keys.d )
mesh.rotateY(-0.05);
a.lerp(mesh.position, 0.4);
b.copy(goal.position);
dir.copy( a ).sub( b ).normalize();
const dis = a.distanceTo( b ) - coronaSafetyDistance;
goal.position.addScaledVector( dir, dis );
goal.position.lerp(temp, 0.02);
temp.setFromMatrixPosition(follow.matrixWorld);
camera.lookAt( mesh.position );
renderer.render( scene, camera );
}

Three.js SpotLight class on an animating JSON mesh

I'm trying to get a grasp on the three.js light classes. I've tinkered around with the three.js example in an attempt to get a 3D mesh model into the screen and add a basic rotate animation to it.
How do I achieve a static light source on the moving object? Currently the light reflected from the object seems to follow some path along the rotation.
Here's the code: http://codepen.io/jagomez8/pen/BzByEz
I've switched it out for various other light classes but I think the issue lies in the MeshPhongMaterial. When I apply flatShading to the material it renders the desired result except for the flat look it gets.The relevant code is on line 105.
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var scene = new THREE.Scene();
var egg;
var matFloor = new THREE.MeshPhongMaterial();
var matBox = new THREE.MeshPhongMaterial( { color: 0x4080ff } );
var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
var mshFloor = new THREE.Mesh( geoFloor, matFloor );
var mshBox = new THREE.Mesh( geoBox, matBox );
var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
var spotLight = new THREE.SpotLight( 0xffffff, 1 );
var lightHelper;
var gui, guiElements, param = { color: '0xffffff' };
function init() {
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
camera.position.set( 65, 8, - 10 );
spotLight.position.set( 15, 40, 35 );
spotLight.castShadow = true;
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 1;
spotLight.shadow.camera.far = 200;
lightHelper = new THREE.SpotLightHelper( spotLight );
matFloor.color.set( 0x808080 );
mshFloor.receiveShadow = true;
mshFloor.position.set( 0, - 0.05, 0 );
mshBox.castShadow = true;
mshBox.position.set( 40, 1.8, 0 );
scene.add( camera );
scene.add( mshFloor );
scene.add( mshBox );
scene.add( ambient );
scene.add( spotLight );
scene.add( new THREE.AxisHelper( 10 ) );
scene.add( lightHelper );
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
controls.addEventListener( 'change', render );
controls.minDistance = 20;
controls.maxDistance = 500;
controls.maxPolarAngle = Math.PI / 2;
controls.enablePan = false;
controls.target.copy( mshBox.position );
controls.update();
window.addEventListener( 'resize', onResize, false );
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 loader = new THREE.JSONLoader( manager );
loader.load( 'http://alexgdm.com/egg.json', function( geometry, material ) {
///****3D MESH***///
egg = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30/*, shading: THREE.FlatShading */} ) );
egg.position.set(0, 1, 1);
scene.add( egg );
animate();
}, onProgress, onError );
}
function onResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = ( window.innerWidth / window.innerHeight );
camera.updateProjectionMatrix();
}
function render() {
lightHelper.update(); // required
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
egg.rotation.y += 0.01;
renderer.render( scene, camera );
}
function clearGui() {
if ( gui ) gui.destroy();
gui = new dat.GUI();
gui.open();
}
function buildGui() {
clearGui();
addGui( 'light color', spotLight.color.getHex(), function( val ) {
spotLight.color.setHex( val );
render();
}, true );
addGui( 'intensity', spotLight.intensity, function( val ) {
spotLight.intensity = val;
render();
}, false, 0, 2 );
addGui( 'distance', spotLight.distance, function( val ) {
spotLight.distance = val;
render();
}, false, 0, 200 );
addGui( 'angle', spotLight.angle, function( val ) {
spotLight.angle = val;
render();
}, false, 0, Math.PI / 3 );
addGui( 'penumbra', spotLight.penumbra, function( val ) {
spotLight.penumbra = val;
render();
}, false, 0, 1 );
addGui( 'decay', spotLight.decay, function( val ) {
spotLight.decay = val;
render();
}, false, 1, 2 );
}
function addGui( name, value, callback, isColor, min, max ) {
var node;
param[ name ] = value;
if ( isColor ) {
node = gui.addColor( param, name ).onChange( function() {
callback( param[ name ] );
} );
} else if ( typeof value == 'object' ) {
node = gui.add( param, name, value ).onChange( function() {
callback( param[ name ] );
} );
} else {
node = gui.add( param, name, min, max ).onChange( function() {
callback( param[ name ] );
} );
}
return node;
}
init();
buildGui();
render();

Your egg-shaped model is invalid. In particular, the vertex normals are not correct.
It appears that the vertex normals have the y-component and z-component switched. Try remapping them, and setting .y = -.z, and .z = .y.
Or, just call
geometry.computeVertexNormals();
That should result in reasonable vertex normals.
THREE.VertexNormalsHelper can be used to view the normals, if you want.
three.js r.77

Hide objects on Click with raycaster

I wanna hide scene objects with clicking on them,
I read many "raycaster" tutorials but I don't know where is my fault
with these codes when I open my HTML file all the objects are hidden.
I have deleted most of irreverent codes to raycaster.
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container, stats;
var group1 , group2 , group3 ;
var camera, scene, controls;
var renderer;
var mesh;
var textureCube;
var cameraCube, sceneCube;
var loader;
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 and controls
....
// SCENE
scene = new THREE.Scene();
// SKYBOX
.....
//models
group1=...
group2=...
group3=...
cubes = new THREE.Object3D() ;
cubes.add( group1 ) ;
cubes.add( group2 ) ;
cubes.add( group3 ) ;
mouseVector = new THREE.Vector3();
projector = new THREE.Projector();
// LIGHTS
lights...
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
renderer.autoClear = false;
container.appendChild( renderer.domElement );
//
renderer.gammaInput = true;
renderer.gammaOutput = true;
// STATS
stats = new Stats();
container.appendChild( stats.domElement );
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
//
function onWindowResize( event ) {
....
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update();
cameraCube.rotation.copy( camera.rotation );
renderer.clear();
renderer.render( sceneCube, cameraCube );
//raycast
var raycaster = projector.pickingRay( mouseVector.clone(), camera );
window.addEventListener( 'mousedown', onMouseDown, false );
var onMouseDown = function ( event ) {
var intersects = raycaster.intersectObjects( cubes.children );
var intersection = intersects[0] , obj = intersection.object ;
obj.visible = false ;
};
renderer.render( scene, camera );
}
</script>

You are doing the raycast on every frame while rendering. When you want to raycast on mouse clicks, you need an Event Listener:
window.addEventListener( 'mousedown', onMouseDown, false );
var onMouseDown = function ( event ) {
var intersects = raycaster.intersectObjects( cubes.children );
var intersection = intersects[0], obj = intersection.object;
obj.visible = false ;
};

Position camera inside three.js cube

I'm starting learning three.js. I studied the Getting started section on the website and had a look to some examples, but I can't figure out many things.
What I'd like to do is to create a cube (a box) and put the camera in the middle of it, so that I would see the inner side of each face. Is this actually possible?
Looking at the documentation, various examples and on stackoverflow, right now I'm at this point:
var camera, scene, renderer;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
init();
animate();
function init() {
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3(1, 1, 1);
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(7, 7, 7);
geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
var material = [
new THREE.MeshBasicMaterial( { color: 0x8bf2a7 } ),
new THREE.MeshBasicMaterial( { color: 0x1ad9a5 } ),
new THREE.MeshBasicMaterial( { color: 0xdadcad } ),
new THREE.MeshBasicMaterial( { color: 0xb1b1b1 } ),
new THREE.MeshBasicMaterial( { color: 0x3a3a3a } ), // front
new THREE.MeshBasicMaterial( { color: 0xf5f5f5 } )
];
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(material) );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false );
document.addEventListener( 'dragenter', function ( event ) {
document.body.style.opacity = 0.5;
}, false );
document.addEventListener( 'dragleave', function ( event ) {
document.body.style.opacity = 1;
}, false );
document.addEventListener( 'drop', function ( event ) {
event.preventDefault();
var reader = new FileReader();
reader.addEventListener( 'load', function ( event ) {
material.map.image.src = event.target.result;
material.map.needsUpdate = true;
}, false );
reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
document.body.style.opacity = 1;
}, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting === true ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseUp( event ) {
isUserInteracting = false;
}
function onDocumentMouseWheel( event ) {
// WebKit
if ( event.wheelDeltaY ) {
camera.fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if ( event.wheelDelta ) {
camera.fov -= event.wheelDelta * 0.05;
// Firefox
} else if ( event.detail ) {
camera.fov += event.detail * 1.0;
}
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame( animate );
update();
}
function update() {
if ( isUserInteracting === false ) {
// lon += 0.1;
}
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 500 * Math.cos( phi );
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( camera.target );
camera.position.z = 3;
/*
// distortion
camera.position.copy( camera.target ).negate();
*/
renderer.render( scene, camera );
}
I can actually see the cube from the inside, but it's not exactly what I want. I'm trying to put the camera in the exact center of the room and I would it to rotate on itself, but I don't exactly how to precisely move it.

If you look at this fiddle the only difference is the material.
Comment and uncomment the following line to see the effect.
THREE.ImageUtils.crossOrigin = '';
Also you can read more at this issue

Animating obj files with OBJLoader in Three.js

I currently have to do an animation with obj files. I want to rotate horizontally the loaded ribs. Is it just POSSIBLE to animate obj files ? If so, how do you do that ? I search all over the web, the only animation examples I found were made using JSONLoader, wich I don't use. Here is my code :
window.onload = function() {
var container, stats;
var camera, scene, renderer, object;
var windowHalfX;
var windowHalfY;
init();
animate();
function init() {
width = 500;
height = 500;
windowHalfX=width/2;
windowHalfY=height/2;
camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
camera.position.z = 300;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 1, 1 );
scene.add( directionalLight );
var loader = new THREE.OBJMTLLoader();
for ( var i = 1; i < 13; i ++ ) {
var chem = './three/obj/Cotes/left/CG';
if (i<10) {
var nomcote = chem+'0'+i+'.obj';
var matcote = chem+'0'+i+'.mtl';
}
else{
var nomcote = chem+i+'.obj';
var matcote = chem+i+'.mtl';
}
loader.load( nomcote, matcote, function ( object ) {
object.position.y = - 70;
object.name = "cotesG"+i;
scene.add( object );
} );
}
for ( var i = 1; i < 13; i ++ ) {
var chem = './three/obj/Cotes/right/CD';
if (i<10) {
var nomcote = chem+'0'+i+'.obj';
var matcote = chem+'0'+i+'.mtl';
}
else{
var nomcote = chem+i+'.obj';
var matcote = chem+i+'.mtl';
}
loader.load( nomcote, matcote, function ( object ) {
object.position.y = - 70;
object.name = "cotesD"+i;
scene.add( object );
} );
}
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.addEventListener( 'change', render );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = width / 2;
windowHalfY = height / 2;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
// camera.lookAt( scene.position );
renderer.render( scene, camera );
}
}