# Camera.lookAt() is invalid

**URL:** <https://discourse.threejs.org/t/camera-lookat-is-invalid/5793>\
**Category:** Questions\
**Tags:** camera-controls\
**Created:** [January 18, 2019, 8:19am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793 "2019-01-18T08:19:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jiang](https://discourse.threejs.org/u/jiang)\
**Post date:** [January 18, 2019, 8:19am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/1 "2019-01-18T08:19:53Z")

</div>

I used THREE.PerspectiveCamera and set the camera lookAt（{x:0,y:1000,z:-1000}）and camera’s position.  
but why the orientation of the camera is always （0,0,0), when the web page is refreshed.

my code:  
this.camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 10000);  
this.camera.lookAt({  
 x : 0,  
 y : 1000,  
 z : -1000  
});  
this.camera.position.x = 595;  
this.camera.position.y = -17 ;  
this.camera.position.z = -842;

I think it should be oriented （0,1000,-1000），Right？  
Please help~~~

PS: The control I used is THREE.MapControls.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 18, 2019, 8:25am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/2 "2019-01-18T08:25:19Z")

</div>

Hi!  
Try it like that: `camera.lookAt(0, 1000, -1000);`

And do you use `THREE.OrbitControls()` in your scene?

---

<div class="post-metadata">

**Author:** ![jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jiang](https://discourse.threejs.org/u/jiang)\
**Post date:** [January 18, 2019, 8:35am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/3 "2019-01-18T08:35:19Z")

</div>

Thanks for your suggestion~  
I modified to camera.lookAt(0, 1000, -1000); ，but the orientation of the camera is always （0,0,0).

And I need to implement it to move to any coordinate point and rotate around any coordinate point, like browsing a map.  
So I used MapControls.  
I think OrbitControls can’t imiplement it ,It always rotates around (0,0,0) ,Right?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 18, 2019, 8:39am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/4 "2019-01-18T08:39:36Z")

</div>

Any chance to provide a working live code example? codepen, jsfiddle etc.

---

<div class="post-metadata">

**Author:** ![jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jiang](https://discourse.threejs.org/u/jiang)\
**Post date:** [January 18, 2019, 9:48am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/5 "2019-01-18T09:48:07Z")

</div>

OK, The following is my code :  
\<template\>

\<div ref=“demo1”\>\</div\>

\</template\>

\<script\>  
 import ServerLayout from ‘./js/ServerLayout’;  
 import LoadingData from “./js/LoadingData”;  
 export default {  
 name: ‘Three’,  
 data: () =\> ({  
 controls: {  
 scene: null,  
 camera: null,  
 renderer: null,  
 loading : false,  
 // rotationSpeed: 0.02  
 }  
 }),  
 created () {  
 this.$nextTick(() =\> {  
 // this.init();  
 });  
 },  
 mounted () {  
 window.THREE = require(‘three’);  
 require(‘three/examples/js/controls/OrbitControls’);  
 require(‘three/examples/js/loaders/MTLLoader’);  
 require(‘three/examples/js/loaders/OBJLoader’);  
 require(‘three/examples/js/loaders/STLLoader’);  
 require(‘three/examples/js/loaders/GLTFLoader’);  
 require(‘three/src/loaders/TextureLoader’);  
 require(‘three/examples/js/controls/MapControls’);  
 require(‘three/examples/js/controls/TransformControls’);  
 require(‘three/examples/js/controls/FirstPersonControls’);

require(‘three/examples/js/controls/DragControls’);  
 require(‘three/examples/js/controls/TrackballControls’);

this.$nextTick(function () {  
 this.init();  
 });  
 },

methods: {  
 init () {  
 this.initMesh();  
 },

initMesh () {  
 this.scene = new THREE.Scene();  
 this.scene.background = new THREE.Color(0xcccccc);  
 this.renderer = new THREE.WebGLRenderer({antialias: true });  
 this.renderer.setSize(window.innerWidth, window.innerHeight);  
 document.body.appendChild(this.renderer.domElement);

this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);  
 this.camera.lookAt(0,200,200);  
 this.camera.position.x = 500;  
 this.camera.position.y = 400;  
 this.camera.position.z = 400;

let light1 = new THREE.DirectionalLight(0xffffff, 0.95);  
 light1.position.set(100,100,60);  
 this.scene.add(light1);

var sphere=new THREE.SphereGeometry(20,20,20);  
 var sphereMaterial=new THREE.MeshLambertMaterial({color:0xff0000});  
 var spereMesh=new THREE.Mesh(sphere,sphereMaterial);  
 spereMesh.position.x =0;  
 spereMesh.position.y = 200;  
 spereMesh.position.z = 200;  
 this.scene.add(spereMesh);

this.loadPlane(this.scene); // add plane  
 this.$refs.demo1.append(this.renderer.domElement);  
 this.renderScene();  
 let controls = new THREE.MapControls(this.camera,this.renderer.domElement);  
 controls.addEventListener(‘change’,this.renderer);  
 },  
 renderScene () {  
 let {controls, scene, camera, renderer} = this;  
 requestAnimationFrame(this.renderScene);  
 renderer.render(scene, camera);  
 },  
 loadPlane (scene) {  
 let length = 3000;  
 let geometry1 = new THREE.Geometry();  
 let lineMaterial = new THREE.LineDashedMaterial({color: 0x777777});  
 geometry1.vertices.push(new THREE.Vector3(-length / 2, 0, 0));  
 geometry1.vertices.push(new THREE.Vector3(length / 2, 0, 0));

for (let i = 0; i \<= length / 10; i++) {  
 let lineX = new THREE.Line(geometry1, lineMaterial);  
 lineX.position.z = (i \* 10) - length / 2;  
 scene.add(lineX);

let lineY = new THREE.Line(geometry1, lineMaterial);  
 lineY.rotation.y = 0.5 _Math.PI;  
 lineY.position.x = (i_ 10) - length / 2;  
 scene.add(lineY);  
 }

let axes = new THREE.AxisHelper(20);  
 scene.add(axes);  
 }  
 }  
 };  
\</script\>

---

<div class="post-metadata">

**Author:** ![jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jiang](https://discourse.threejs.org/u/jiang)\
**Post date:** [January 18, 2019, 9:49am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/6 "2019-01-18T09:49:59Z")

</div>

And it is the result：  
 ![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/c/ca683bfd79766f23ba8a79882c8ebdc890b6bd95.png)  
I think the orientation of the camera should be the red ball.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 18, 2019, 10:05am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/7 "2019-01-18T10:05:14Z")

</div>

After  
`let controls = new THREE.MapControls(this.camera,this.renderer.domElement);`  
try to add

```auto
controls.target.copy(sphereMesh.position);
controls.update();

```

PS Next time try to format the text of your source code. It’s very hard to read it, when it’s not formatted.

---

<div class="post-metadata">

**Author:** ![jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@jiang](https://discourse.threejs.org/u/jiang)\
**Post date:** [January 18, 2019, 10:17am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/8 "2019-01-18T10:17:29Z")

</div>

Thanks for your help ~~~~!!  
The issue was resolved.

And I will format next time, thanks for your suggestion.🤗🤗

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 18, 2019, 11:36am UTC](https://discourse.threejs.org/t/camera-lookat-is-invalid/5793/9 "2019-01-18T11:36:28Z")

</div>

You’re welcome 🍻 🙂