It is required to write an algorithm for rotating and moving the camera around the object. Tried through the sine and cosines - did not work. Is there any library on this topic? I would also be happy to just tips in the construction of the algorithm Thanks in advance.

camera.position.x = Math.cos (camera.degree) * 1100;

camera.position.z = Math.sin (camera.degree) * 1100;

camera.lookAt (new THREE.Vector3 (0, 0, 0));

render.render (scene, camera);

  • where camera.degree is the angle by which the camera should be rotated relative to the object, determined by the difference of coordinates in the mousemove event.
  • What was your problem? Put the code, explain what exactly did not work ... - ampawd
  • and more specifically, tell me what rotation is needed? - ampawd
  • I will copy: Questions asking for help with debugging (“why does this code not work?”) should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question. Questions without an explicit description of the problem are useless for other visitors. - Insider
  • Three.js has OrbitControls and TrackballControls in its set, allowing you to rotate the camera around the object with the mouse. And yes, it is desirable to see the code of what did not work with the sines and cosines, but it is really not clear what kind of rotation is needed. - prisoner849
  • A camera.lookAt(new THREE.Vector3(0, 0, 0)); note about camera.lookAt(new THREE.Vector3(0, 0, 0)); : use new or .clone() (since this method again calls new ) in the animation loop - not necessary; it is better to reuse a previously declared variable / object or use the .copy() method - prisoner849

2 answers 2

To set a stable angular velocity, we need the THREE.Clock() object ( documentation ).

Then everything is more or less simple:

 var clock = new THREE.Clock(); var angle = 0; // текущий угол var angularSpeed = THREE.Math.degToRad(20); // угловая скорость - градусов в секунду var delta = 0; var radius = 20; function animate() { delta = clock.getDelta(); // getDelta() - возвращает интервал в долях секунды requestAnimationFrame(animate); camera.position.x = Math.cos(angle) * radius; camera.position.z = Math.sin(angle) * radius; angle += angularSpeed * delta; // приращение угла camera.lookAt(mesh.position); renderer.render(scene, camera); }

jsfiddle example

Another option is if you want to organize rotation through mouse control, then OrbitControls will be OrbitControls .

All that is needed for this:

create control object

 var controls = new THREE.OrbitControls(camera, renderer.domElement);

If it is necessary that the rotation around the object is only horizontally, then the minimum and maximum angles of rotation along the vertical should be limited, since they can be within [0 .. Math.PI], then half from 180 degrees (Math. PI) will be 90 (Math.PI / 2)

 controls.minPolarAngle = Math.PI / 2; controls.maxPolarAngle = Math.PI / 2;

after which you can add in the animation loop

 controls.update();

jsfiddle example

    I will explain the mat part:

    this

     camera.position.x = Math.cos(camera.degree) * 1100; camera.position.z = Math.sin(camera.degree) * 1100;

    parametric equation of a circle, so the camera constantly rotates in one plane around the Y axis describing a circle on a sphere.

    if you need to move along a sphere, then you need to apply a parametric equation of a sphere , where the radius is the distance from the camera to the point at which it looks, and the center is the origin in the world space, in other words (0, 0, 0) .

    but it must be webgl (opengl) in mind that in webgl (opengl) notation for the coordinate axes is different from the standard mathematical notation.

    in webgl (x + - to the right, y + - to the top, z + - to itself).

    in mathematics most often (x + - to the right, y + - to itself, z + - to the top).

    therefore, the equation will be different.

    jsfiddle example

    and here

     let camera, scene, renderer, light, cube, sphere; let cameraParams = { distance: 1, mdown: new THREE.Vector2(), mmove: new THREE.Vector2(), phi: 25, theta: -15, phim: 0, thetam: 0, fov: 53 }; let updateCamera = function() { camera.position.x = cameraParams.distance * Math.sin(cameraParams.theta * degToRad) * Math.cos(cameraParams.phi * degToRad); camera.position.y = cameraParams.distance * Math.sin(cameraParams.phi * degToRad); camera.position.z = cameraParams.distance * Math.cos(cameraParams.theta * degToRad) * Math.cos(cameraParams.phi * degToRad); camera.lookAt(cube.position); }; const degToRad = Math.PI / 180; function init() { renderer = new THREE.WebGLRenderer({ antialias: true }); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(50.0, window.innerWidth / window.innerHeight, 0.1, 1000); renderer.setClearColor(0xffffff); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function initScene() { let cubeGeom = new THREE.BoxGeometry(60, 60, 60); let cubeMat = new THREE.MeshPhongMaterial({ color: 0xaa0000 }); cube = new THREE.Mesh(cubeGeom, cubeMat); cube.position.set(-100, 0, 0); scene.add(cube); let sphereGeom = new THREE.SphereGeometry(45, 60, 60); let sphereMat = new THREE.MeshPhongMaterial({ color: 0x0000ff }); sphere = new THREE.Mesh(sphereGeom, sphereMat); sphere.position.set(100, 0, 0); scene.add(sphere); let plane = new THREE.GridHelper(250, 25); scene.add(plane); light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(-25, 50, 50); scene.add(camera); camera.add(light); camera.position.set(0, 0, 500); cameraParams.distance = camera.position.clone().sub(cube.position).length(); updateCamera(); } function render() { renderer.render(scene, camera); requestAnimationFrame(render); } document.onmousedown = function(e) { cameraParams.mdown.set(e.clientX, e.clientY); cameraParams.thetam = cameraParams.theta; cameraParams.phim = cameraParams.phi; document.onmousemove = function(e) { cameraParams.mmove.set(e.clientX, e.clientY); cameraParams.theta = -(cameraParams.mmove.x - cameraParams.mdown.x) * 0.5 + cameraParams.thetam; cameraParams.phi = (cameraParams.mmove.y - cameraParams.mdown.y) * 0.5 + cameraParams.phim; cameraParams.phi = Math.min(90, Math.max(-90, cameraParams.phi)); updateCamera(); }; document.onmouseup = function(e) { document.onmousemove = null; }; }; init(); initScene(); render(); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>