How to make a camera that will spin around the scene

timob256 · April 17, 2023, 12:55pm

How to make a camera that will spin around the scene using your finger (run on the phone).

My code ( this not working ; _ ; )

    var camera;
    var scene;
    var renderer;
    var trackballControls;
    var clock;

    // инициализировать статистику
    var stats = initStats();

    // создаëм сцену, которая будет содержать все наши элементы, такие как объекты, камеры и источники света.
    scene = new THREE.Scene();

    // создайте камеру, которая определяет, куда мы смотрим.
    // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera = initCamera(new THREE.Vector3(50, 120, 220));
    // camera.position.set(20, 0, 150);

    // создайте рендеринг и установите размер
    renderer = new THREE.WebGLRenderer();
    
      renderer.antialias = true; // чтоб муравьи не бегали
      renderer.setClearColor(new THREE.Color(0x497580)); // поставмл пока серо-синий фон
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;

    // инициализируйте элементы управления трекболом и часы, которые необходимы
    trackballControls = initTrackballControls(camera, renderer);
    clock = new THREE.Clock();
     
function render() {
    	stats.update();
  var delta = clock.getDelta();
    trackballControls.update(delta);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

mjurczyk · April 17, 2023, 3:12pm

Isn’t just the OrbitControls what you’re looking for ? They do spin around the scene (can also do so automatically.)

timob256 · April 18, 2023, 1:57pm

Thanks for the reply. But I didn’t understand where to insert the arbit control?? Also I couldn’t open the example to see the code.

Can you please tell me where to put the code to make it work?

mjurczyk · April 18, 2023, 2:09pm

Code of each example in the bottom-right corner

As for where to put the controls - most of the time you’d be putting them in the same place where you create the renderer etc.

timob256 · April 18, 2023, 5:58pm

function init() {

    // прослушивание событий изменения размера
    window.addEventListener('resize', onResize, false);

    var camera;
    var scene;
    var renderer;
    var trackballControls;
    var clock;
    var control;

    // инициализировать статистику
    var stats = initStats();

    // создаëм сцену, которая будет содержать все наши элементы, такие как объекты, камеры и источники света.
    scene = new THREE.Scene();

    // создайте камеру, которая определяет, куда мы смотрим.
    // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera = initCamera(new THREE.Vector3(50, 120, 220));
    // camera.position.set(20, 0, 150);

    // создайте рендеринг и установите размер
    renderer = new THREE.WebGLRenderer();
    
      renderer.antialias = true; // чтоб муравьи не бегали
      renderer.setClearColor(new THREE.Color(0x497580)); // поставмл пока серо-синий фон
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;

    // инициализируйте элементы управления трекболом и часы, которые необходимы
    trackballControls = initTrackballControls(camera, renderer);
    clock = new THREE.Clock();
    
    control = new OrbitControls( camera, renderer.domElement );
				control.listenToKeyEvents( window ); // optional

				//control.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

				control.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
				control.dampingFactor = 0.05;

				control.screenSpacePanning = false;

				control.minDistance = 100;
				control.maxDistance = 500;

				control.maxPolarAngle = Math.PI / 2;
     
     // рисую квадраты осей 
	
	//--------------Создаем объект-------------------
	var osxyGeometry = new THREE.Geometry();//Производная фигура
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));//Указываем вектор первой точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, 10, 0));//Указываем вектор второй точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
	var osxyMaterial = new THREE.LineBasicMaterial({color:0x7457bd, linewidth:1});
	var osxy = new THREE.Line(osxyGeometry, osxyMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxy);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osyzGeometry = new THREE.Geometry();//Производная фигура
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));
	var osyzMaterial = new THREE.LineBasicMaterial({color:0x3d803d, linewidth:1});
	var osyz = new THREE.Line(osyzGeometry, osyzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osyz);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osxzGeometry = new THREE.Geometry();//Производная фигура
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));
	var osxzMaterial = new THREE.LineBasicMaterial({color:0xab5641, linewidth:1});
	var osxz = new THREE.Line(osxzGeometry, osxzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxz);//Добавляем объект на сцену
	
	
    // создайте наземную плоскость
    //var planeGeometry = new THREE.PlaneGeometry(60, 60, 1, 1);
    //var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    //var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    //plane.receiveShadow = true;

      // поверните и расположите плоскость
      //plane.rotation.x = -0.5 * Math.PI;
      //plane.position.x = 15;
      //plane.position.y = 0;
      //plane.position.z = 0;

      // add the plane to the scene
      //scene.add(plane);
    
    // добавляем оси  и коордиеационные сетки
    var axes = new THREE.AxisHelper(30);

      axes.position.set( 0,0,0 ); scene.add(axes);

  
    var gridXZ = new THREE.GridHelper(100, 20);

      gridXZ.setColors( new THREE.Color(0x006600), 

    new THREE.Color(0x006600) );

      gridXZ.position.set( 100,0,100 );

      scene.add(gridXZ);

    
    var gridXY = new THREE.GridHelper(100, 20);

        gridXY.position.set( 100,100,0 );

        gridXY.rotation.x = Math.PI/2;

        gridXY.setColors( new THREE.Color(0x000066), 

     new THREE.Color(0x000066) );

        scene.add(gridXY);

        
     var gridYZ = new THREE.GridHelper(100, 20);

        gridYZ.position.set( 0,100,100 );

        gridYZ.rotation.z = Math.PI/2;

        gridYZ.setColors( new THREE.Color(0x660000), 

     new THREE.Color(0x660000) );

        scene.add(gridYZ);

    // расположите и направьте камеру в центр сцены
    //camera.position.x = -30;
   // camera.position.y = 40;
  //  camera.position.z = 30;
  //  camera.lookAt(scene.position);
    camera.position.set(20, 0, 150);
   
    // добавьте тонкое окружающее освещение
    var ambienLight = new THREE.AmbientLight(0x353535);
    scene.add(ambienLight);

    // добавьте подсветку для теней
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 20, -5);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // добавьте выходные данные средства визуализации в html-элемент
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // вызовите функцию рендеринга
    var step = 0;

   var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    };
    
    var controls1 = new function () {
       this.site = "hangge.com";
     };
     
   var controls2 = new function () {
       this.rotationSpeed = 0; 
     };

    var gui = new dat.GUI();
    const geometryFolder  = gui.addFolder("камера");
   geometryFolder.add(controls2, "rotationSpeed", { 'стоп': 0, 'медленно': 0.02, 'быстро': 5 }).name("скорость");
    geometryFolder.add(controls, 'rotationSpeed', 0, 0.5);
    geometryFolder.add(controls, 'bouncingSpeed', 0, 0.5);
    const primitiveFolder =  gui.addFolder("примитивы");
   // primitiveFolder.add(controls2, 'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });
   
   animate();
  //  render();
    
    function animate() {

				requestAnimationFrame( animate );

				control.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

				render();

			}
    
    function render() {
    	stats.update();
  var delta = clock.getDelta();
    trackballControls.update(delta);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
        // обновите статистику и элементы управления
      //  trackballControls.update(clock.getDelta());
       // stats.update();
        // рендеринг с использованием requestAnimationFrame
       // requestAnimationFrame(render);
        //renderer.render(scene, camera);
    }

    function onResize() {
        //camera.aspect = window.innerWidth / window.innerHeight;
        //  camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }    
}

All code but this not work.

mjurczyk · April 18, 2023, 6:06pm

How do you import the orbit controls?

timob256 · April 19, 2023, 2:04pm

<!DOCTYPE html>

<html>

<head>
    <title>мое_изделие</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/OrbitControls.js"></script>
    <script type="text/javascript" src="../../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="../js/util.js"></script>
    <script type="text/javascript" src="./js/my.js"></script>
    <link rel="stylesheet" href="../../css/default.css">
</head>

<body>

    <div id="webgl-output"></div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>

</body>

</html>

Brouser not visible him

              <script type="text/javascript" charset="UTF-8" 
     src="../../libs/three/controls/OrbitControls.js"> 
       </script>

timob256 · April 20, 2023, 10:36pm

Enover various “my.js”

//#include "OrbitControls.js"
//import { create, all } from 'orbitcontrolsjs'
import { OrbitControls } from '../../libs/three/controls/OrbitControls.js';

function init() { ... }

Lawrence3DPK · April 21, 2023, 1:56am

you’ll need to change this to

<script type="module" src="./js/my.js"></script>

timob256 · April 22, 2023, 11:56am

Sorry but this not working.

my_redactor.js

<!DOCTYPE html>

<html>

<head>
    <title>мое_изделие</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/OrbitControls.js"></script>
    <script type="text/javascript" src="../../libs/util/Stats.js"></script>
    <script type="text/javascript" src="../../libs/util/dat.gui.js"></script>

    <script type="text/javascript" src="../js/util.js"></script>
     <script type="module" src="./js/my.js"></script>
    <!--  <script type="text/javascript" src="./js/my.js"></script> ранше так было -->
    <link rel="stylesheet" href="../../css/default.css">
</head>

<body>

    <div id="webgl-output"></div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>

</body>

</html>

my.js

//import * as THREE from 'three';
//#include "OrbitControls.js"
//import { create, all } from 'orbitcontrolsjs'
import { OrbitControls } from '../../libs/three/controls/OrbitControls.js';

function init() {

    // прослушивание событий изменения размера
    window.addEventListener('resize', onResize, false);

    var camera;
    var scene;
    var renderer;
    var trackballControls;
    var clock;
    var control;

    // инициализировать статистику
    var stats = initStats();

    // создаëм сцену, которая будет содержать все наши элементы, такие как объекты, камеры и источники света.
    scene = new THREE.Scene();

    // создайте камеру, которая определяет, куда мы смотрим.
    // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera = initCamera(new THREE.Vector3(50, 120, 220));
    // camera.position.set(20, 0, 150);

    // создайте рендеринг и установите размер
    renderer = new THREE.WebGLRenderer();
    
      renderer.antialias = true; // чтоб муравьи не бегали
      renderer.setClearColor(new THREE.Color(0x497580)); // поставмл пока серо-синий фон
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;

    // инициализируйте элементы управления трекболом и часы, которые необходимы
    trackballControls = initTrackballControls(camera, renderer);
    clock = new THREE.Clock();
    
    control = new OrbitControls( camera, renderer.domElement );
				control.listenToKeyEvents( window ); // optional

				//control.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

				control.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
				control.dampingFactor = 0.05;

				control.screenSpacePanning = false;

				control.minDistance = 100;
				control.maxDistance = 500;

				control.maxPolarAngle = Math.PI / 2;
     
     // рисую квадраты осей 
	
	//--------------Создаем объект-------------------
	var osxyGeometry = new THREE.Geometry();//Производная фигура
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));//Указываем вектор первой точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, 10, 0));//Указываем вектор второй точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
	var osxyMaterial = new THREE.LineBasicMaterial({color:0x7457bd, linewidth:1});
	var osxy = new THREE.Line(osxyGeometry, osxyMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxy);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osyzGeometry = new THREE.Geometry();//Производная фигура
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));
	var osyzMaterial = new THREE.LineBasicMaterial({color:0x3d803d, linewidth:1});
	var osyz = new THREE.Line(osyzGeometry, osyzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osyz);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osxzGeometry = new THREE.Geometry();//Производная фигура
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));
	var osxzMaterial = new THREE.LineBasicMaterial({color:0xab5641, linewidth:1});
	var osxz = new THREE.Line(osxzGeometry, osxzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxz);//Добавляем объект на сцену
	
	
    // создайте наземную плоскость
    //var planeGeometry = new THREE.PlaneGeometry(60, 60, 1, 1);
    //var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    //var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    //plane.receiveShadow = true;

      // поверните и расположите плоскость
      //plane.rotation.x = -0.5 * Math.PI;
      //plane.position.x = 15;
      //plane.position.y = 0;
      //plane.position.z = 0;

      // add the plane to the scene
      //scene.add(plane);
    
    // добавляем оси  и коордиеационные сетки
    var axes = new THREE.AxisHelper(30);

      axes.position.set( 0,0,0 ); scene.add(axes);

  
    var gridXZ = new THREE.GridHelper(100, 20);

      gridXZ.setColors( new THREE.Color(0x006600), 

    new THREE.Color(0x006600) );

      gridXZ.position.set( 100,0,100 );

      scene.add(gridXZ);

    
    var gridXY = new THREE.GridHelper(100, 20);

        gridXY.position.set( 100,100,0 );

        gridXY.rotation.x = Math.PI/2;

        gridXY.setColors( new THREE.Color(0x000066), 

     new THREE.Color(0x000066) );

        scene.add(gridXY);

        
     var gridYZ = new THREE.GridHelper(100, 20);

        gridYZ.position.set( 0,100,100 );

        gridYZ.rotation.z = Math.PI/2;

        gridYZ.setColors( new THREE.Color(0x660000), 

     new THREE.Color(0x660000) );

        scene.add(gridYZ);

    // расположите и направьте камеру в центр сцены
    //camera.position.x = -30;
   // camera.position.y = 40;
  //  camera.position.z = 30;
  //  camera.lookAt(scene.position);
    camera.position.set(20, 0, 150);
   
    // добавьте тонкое окружающее освещение
    var ambienLight = new THREE.AmbientLight(0x353535);
    scene.add(ambienLight);

    // добавьте подсветку для теней
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 20, -5);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // добавьте выходные данные средства визуализации в html-элемент
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // вызовите функцию рендеринга
    var step = 0;

   var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    };
    
    var controls1 = new function () {
       this.site = "hangge.com";
     };
     
   var controls2 = new function () {
       this.rotationSpeed = 0; 
     };

    var gui = new dat.GUI();
    const geometryFolder  = gui.addFolder("камера");
   geometryFolder.add(controls2, "rotationSpeed", { 'стоп': 0, 'медленно': 0.02, 'быстро': 5 }).name("скорость");
    geometryFolder.add(controls, 'rotationSpeed', 0, 0.5);
    geometryFolder.add(controls, 'bouncingSpeed', 0, 0.5);
    const primitiveFolder =  gui.addFolder("примитивы");
   // primitiveFolder.add(controls2, 'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });
   
   animate();
  //  render();
    
    function animate() {

				requestAnimationFrame( animate );

				control.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

				render();

			}
    
    function render() {
    	stats.update();
  var delta = clock.getDelta();
    trackballControls.update(delta);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
        // обновите статистику и элементы управления
      //  trackballControls.update(clock.getDelta());
       // stats.update();
        // рендеринг с использованием requestAnimationFrame
       // requestAnimationFrame(render);
        //renderer.render(scene, camera);
    }

    function onResize() {
        //camera.aspect = window.innerWidth / window.innerHeight;
        //  camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }    
}

Lawrence3DPK · April 22, 2023, 2:28pm

I think because you’re using both inline script tags and import statements this is confusing, have you tried to follow the code structure in the official examples, this would be the way to go in order to remove any inline references to three and switch over to imports

Topic		Replies	Views
How to make camera rotate around the object? Questions	1	1111	February 10, 2022
Moving Smartphone Camera around three.js Object Questions controls	1	1892	July 14, 2021
I hope my camera can always Revolve around the object itself Questions orbit-controls	2	327	January 17, 2021
Rotate camera on click event Questions animation , camera-tween	9	3298	May 31, 2021
How to move camera back? Questions camera	5	4175	May 30, 2019

How to make a camera that will spin around the scene

Related topics