CODEWITHSUNDEEP
javascriptthree.js
Vivekraj K R
Vivekraj K R

Reputation: 2558

three.js - How to set camera position?

I'm pretty beginner in three.js and webgl programming. so I have created a box in three.js and its working fine but the problem is when I set camera position in z axis(eg: camera.position.z = 2; ) the box just disappears. could anyone explain me why is it happening and how can I properly set the position of the camera?

try uncommenting the camera.position.z = 2; in the fiddle

function init() {

    var scene = new THREE.Scene();

    var box = getBox(1, 1, 1);

    scene.add(box);

    var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
    //camera.position.z = 2;

    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("webgl").appendChild(renderer.domElement);

    renderer.render(scene, camera);
}

function getBox(w, h, d) {
    var geometry = new THREE.BoxGeometry(w, h, d);
    var material = new THREE.MeshBasicMaterial({
        color : 0x00ff00
    });

    var mesh = new THREE.Mesh(geometry, material);

    return mesh;
} 

init();

Upvotes: 14

Views: 50773

Answers (2)

Alex Logvin
Alex Logvin

Reputation: 881

Try

camera.position.set( <X> , <Y> , <Z> );

where <X> and <Z> are 2D coordinates and <Y> is height

Upvotes: 9

Dacre Denny
Dacre Denny

Reputation: 30390

not sure if you're trying to create this scene with an orthographic camera or perspective camera, but you'll typically need to specify the camera by type (ie THREE.PerspectiveCamera(...)). I also added a few extra lines to ensure the camera was configured correctly, namely, setting the "LookAt" point to (0,0,0) , as well as setting an actual position of the camera via the THREE.Vector3.set(...) method.

Here are my adjustments to your code:

function init() {

var scene = new THREE.Scene();

var box = getBox(1, 1, 1);

scene.add(box);

var camera = new THREE.PerspectiveCamera(70, 
window.innerWidth/window.innerHeight, 0.1, 1000 ); // Specify camera type like this
camera.position.set(0,2.5,2.5); // Set position like this
camera.lookAt(new THREE.Vector3(0,0,0)); // Set look at coordinate like this

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);

renderer.render(scene, camera);
}

function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
    color : 0x00ff00
});

var mesh = new THREE.Mesh(geometry, material);

return mesh;
} 

init();

Upvotes: 13

Related Questions