Camera.lookAt() is invalid

Questions
1

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.

2

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

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

3

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?

4

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

5

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>

6

And it is the result：
image
I think the orientation of the camera should be the red ball.

7

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

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.

8

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

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

9

You’re welcome :beers: :slight_smile: