Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three.js - wrong axes or camera rotation

I'm trying to make a floor positioned horizontally, but it's positioned upright. What's wrong with my code? Maybe the camera rotation is off? I'm using three.js r52.

    camera = new THREE.PerspectiveCamera                                                                                            
        (45, window.innerWidth / window.innerHeight, 1, 10000);                                                                     
    camera.position.x = -500;                                                                                                       
    camera.position.z = 0;                                                                                                          

    scene = new THREE.Scene();

    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);                                                                  
    var floorMaterial = new THREE.MeshBasicMaterial( {color:0x448844} );                                                            
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);                                                                       

    scene.add(floor);

    controls = new THREE.FirstPersonControls(camera);                                                                             
    controls.movementSpeed = 1000;                                                                                                
    controls.lookSpeed = 0.0;                                                                                                     
    controls.lookVertical = true; 

upright PlaneGeometry

like image 581
nnyby Avatar asked Mar 16 '26 01:03

nnyby


1 Answers

Your code is fine, but you have to add this to rotate it 90 degrees. Have a look at this: http://cssdeck.com/labs/threejsrotation/0 (line 18: floor.rotation.x = -Math.PI / 2;)

Rotation is just a THREE.Vector3, like position.

like image 145
oal Avatar answered Mar 18 '26 15:03

oal