CODEWITHSUNDEEP
three.js
MD TAHMID HOSSAIN
MD TAHMID HOSSAIN

Reputation: 1720

How to fix camera position in three.js

i have a canvas(webgl/3d Model ) like below enter image description here i want to make the model to the center of the canvas like below enter image description here

my code is like below

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;

var camera, scene;
var canvasRenderer, webglRenderer;

var mesh, zmesh, geometry, materials;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var meshes = [];

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
    //camera.position.x = 2000;
    //camera.position.y = 1400;
    //camera.position.z = 1500;

    camera.position.x = 2200;
    camera.position.y = 1600;
    camera.position.z = 1000;

    scene = new THREE.Scene();

    // LIGHTS
    var ambient = new THREE.AmbientLight(0x666666);
    scene.add(ambient);

    var directionalLight = new THREE.DirectionalLight(0xffeedd);
    directionalLight.position.set(0, 70, 100).normalize();
    scene.add(directionalLight);

    // RENDERER
    webglRenderer = new THREE.WebGLRenderer();
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    webglRenderer.domElement.style.position = "relative";
    container.appendChild(webglRenderer.domElement);
    var loader = new THREE.JSONLoader(),
        callbackKey = function (geometry, materials) {
            createScene(geometry, materials, 50, 50, 10, 2)
        };
    loader.load("ghghjghj.js", callbackKey);
    window.addEventListener('resize', onWindowResize, false);
}

so what should be my camera position.

Upvotes: 0

Views: 2149

Answers (1)

Riv
Riv

Reputation: 357

Try to increase camera.position.y until it looks better. Also, try playing around with camera.lookAt(). It takes vector3 as argument.

Upvotes: 1

Related Questions