Obj loader - добавить возможность поворачивать объекты мышкой в любом направлении

@Universa1 · Регистрация: 10.04.2013

Студворк — интернет-сервис помощи студентам

у меня есть обычный obj loader,помогите добавить у него чтобы объекты можно было мышкой крутить самостоятельно в любом направление,тут сейчас тут стоит по движение мыши в сторону в сторону,еще по возможти добавить сюда stl loader

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <title></title> 
 
  
     
    </head>
<body>
    <script src="js/three.min.js"></script>
        <script src="js/OBJLoader.js"></script> 
        
   <script>     
        
            var clock = new THREE.Clock();
            var delta = clock.getDelta(); // seconds.
            var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
            var container, stats;
 
            var camera, scene, renderer;
 
            var mouseX = 0, mouseY = 0;
 
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
 
 
            init();
            animate();
 
 
            function init() {
 
                container = document.createElement( 'div' );
                document.body.appendChild( container );
 
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 900;
 
                // scene
 
                scene = new THREE.Scene();
 
                var ambient = new THREE.AmbientLight( 0x006400);
                scene.add( ambient );
 
                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 0, 1 );
                scene.add( directionalLight );
 
                // texture
 
                var manager = new THREE.LoadingManager();
                manager.onProgress = function ( item, loaded, total ) {
 
                    console.log( item, loaded, total );
 
                };
 
                // model
                var loader = new THREE.OBJLoader( manager );
                loader.load( 'cube.obj', function ( object ) {
 
                    object.traverse( function ( child ) {
 
                        if ( child instanceof THREE.Mesh ) {
 
                        
 
                        }
 
                    } );
 
                    object.position.x = - 60;
                    object.rotation.x = 20* Math.PI / 180;
                    object.rotation.z = 20* Math.PI / 180;
                    object.scale.x = 30;
                    object.scale.y = 30;
                    object.scale.z = 30;
                    obj = object
                    scene.add( obj );
 
                } );
 
                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
 
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
                window.addEventListener( 'resize', onWindowResize, false );
 
            }
 
            function onWindowResize() {
                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;
 
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
 
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
 
            function onDocumentMouseMove( event ) {
                mouseX = ( event.clientX - windowHalfX ) / 2;
                mouseY = ( event.clientY - windowHalfY ) / 2;
            }
 
            function animate() {
                requestAnimationFrame( animate );
                render();
            }
 
            function render() {
                obj.rotation.x += (0.2*(Math.PI / 180));
                obj.rotation.x %=360;
 
                camera.position.x += ( mouseX - camera.position.x ) * .05;
                camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
                camera.lookAt( scene.position );
 
                renderer.render( scene, camera );
            }
        
     
 
    </script>
        
    </body>
</html>

@8Observer8 · 07.11.2016, 19:24

Вам нужно просто открыть редакторе два html файла:

Файл 06-load-obj.html из папки chapter-08
Файл 08-controls-orbit.html из папки chapter-09

И аккуратно строчка за строчкой объедините эти файлы и вы получите загрузку модели и кручение модели мышкой.

Кстати, ваша модель цветная или с текстурами? Имеет она анимации?

@Universa1 · 07.11.2016, 19:40 **[ТС]**

8Observer8, цвет
var ambient = new THREE.AmbientLight( 0x006400);
scene.add( ambient )
тут задавал

@8Observer8 · 07.11.2016, 19:43

Это хорошо, что цвет. В примере 06-load-obj.html как раз используется цвет

@Universa1 · 07.11.2016, 20:04 **[ТС]**

8Observer8,

JavaScript
1
2
3
4
5
6
 var ambiLight = new THREE.AmbientLight(0x111111);
        scene.add(ambiLight);
        var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(-20, 30, 40);
        spotLight.intensity = 1.5;
        scene.add(spotLight);

мне что именно нужно просто в obj

JavaScript
1
2
3
4
var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(30, 40, 50);
        spotLight.intensity = 1;
        scene.add(spotLight);

а в orbit и то и то
это задание освещения

Добавлено через 2 минуты
8Observer8,

JavaScript
1
2
3
4
5
6
7
  var controls = new function () {        
 
 
        };
 
        var gui = new dat.GUI();
        var mesh;

не понятны эти строчки,подскажите пожалуйста

Добавлено через 2 минуты
8Observer8, dat.GUI мне нужна будет эта библ.?

Добавлено через 5 минут
8Observer8,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
 <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="OBJLoader.js"></script>
     <script type="text/javascript" src="OrbitControls.js"></script>
</head>
 
<body>
<script type="text/javascript">
 function init() {
 
        var stats = initStats();
         var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        
          var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;
         
          camera.position.x = 130;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(scene.position);
        scene.add(camera);
        
        var orbitControls = new THREE.OrbitControls(camera);
        orbitControls.autoRotate = true;
        var clock = new THREE.Clock();
        
        var spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(30, 40, 50);
        spotLight.intensity = 1;
        scene.add(spotLight);
        
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
        
           var step = 0;
           
           var loader = new THREE.OBJLoader();
        loader.load('../assets/models/pinecone.obj', function (loadedMesh) {
            var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});
 
            // loadedMesh is a group of meshes. For
            // each mesh set the material, and compute the information
            // three.js needs for rendering.
            loadedMesh.children.forEach(function (child) {
                child.material = material;
                child.geometry.computeFaceNormals();
                child.geometry.computeVertexNormals();
            });
 
            mesh = loadedMesh;
            loadedMesh.scale.set(100, 100, 100);
            loadedMesh.rotation.x = -0.3;
            scene.add(loadedMesh);
        });
 
 
        render();
 
 
         function render() {
            stats.update();
 
            
            var delta = clock.getDelta();
            orbitControls.update(delta);
 
          
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }
 
 
        function initStats() {
 
            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
 
            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
 
            document.getElementById("Stats-output").appendChild(stats.domElement);
 
            return stats;
        }
    }
    window.onload = init;
        
        </script>
</body>
</html>

Вот конечный результат

Добавлено через 3 минуты
8Observer8, не выводит, не пойму что не так=(

@8Observer8 · 07.11.2016, 22:13

Сообщение от Universa1

function initStats() {

var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms

// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.getElementById("Stats-output").appendChild(stats.domElement);

return stats;
}

Stats - это отображение FPS (FPS - Frame Per Second - количество кадров в секунду). То есть сколько в данный момент способен выводить three.js кадров в секунду. Это полезно, когда хочется узнать насколько быстро у вас работает приложение. Нужно вам выводить FPS? Если нет, то вам не нужно к себе в проект копировать всё что связано с Stats. Можете пока его закомментировать или не добавлять. Потом добавите, если захотите. Ну или пока пусть будет. Тогда нужно из папки libs примеров взять скрипт stats.js

Сообщение от Universa1

dat.GUI мне нужна будет эта библ.?

Это элементы управления, чтобы во время выполнения приложения, что-то менять, например: цвета, размеры, текстуры, ориентацию и т.д. Можете пока закомментировать всё что связано с dat.GUI. И подключение скрипта dat.gui.js тоже закомментируйте

Попробуйте запустить пример 06-load-obj.html Перед тем как менять, лучше иметь работающий проект. Проще будет добавить все требуемые библиотеки и модель для запуска. Потом к работающему примеру добавите OrbitControl из примера 08-controls-orbit.html. Лучше не сразу всё глобально менять. А иметь изначально заботающий проект и постепенно добавлять, а если что-то ломается, то возвращаться на шаг назад.

@Universa1 · 08.11.2016, 23:28 **[ТС]**

8Observer8, а у вас 06-load-obj.html работает open controls? я нажимаю ничего не происходит

Добавлено через 2 минуты
8Observer8, урааа заработало!!!!!!!!!!! я как настроить то что вы говорили
"Это элементы управления, чтобы во время выполнения приложения, что-то менять, например: цвета, размеры, текстуры, ориентацию и т.д."

Добавлено через 21 минуту
8Observer8,

JavaScript
1
2
3
4
var spotLight = new THREE.DirectionalLight(0xffeedd);
        spotLight.position.set(0, 40, 50);
        spotLight.intensity = 1;
        scene.add(spotLight);

это же отвечает за освещение? так? просто получается у что у меня только одна сторона освещается а ост черные и в чем разница между этими

JavaScript
1
2
3
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 0, 1 );
                scene.add( directionalLight );

освещениями

Добавлено через 43 минуты
8Observer8,

JavaScript
1
2
3
4
5
    var ambient = new THREE.AmbientLight( 0x006400);
                scene.add( ambient );
       var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 5, 5, 5);
                scene.add( directionalLight );

я сделал вот так,но у меня все равно "статичное освещение",не пойму что не так

Добавлено через 8 минут
8Observer8, а еще если сильно отдалять то пропадает часть фигуры так сказать за сцену уходит

Добавлено через 17 часов 58 минут
8Observer8, все починил и сделал,осталось освещение сделать и разобраться с dat.GUI

Добавлено через 5 часов 44 минуты
8Observer8, Все вопрос закрыт все сделал)спасибо за помощь

Новые блоги и статьи Все статьи Все блоги /
Особенности gif сгенерированных в Си russiannick 21.10.2026 Рассмотрим генерацию gif файлов, которые в Си имеют свои особенности. Gif представляет собой графический формат популярный в интернете. Посмотрим на палитру. Gif файл сгенерированный в си отличается. . .	FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3) 8Observer8 18.10.2026 Содержание блога \| English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .	Локальный http сервер Argus19 17.10.2026 Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .	Копировать Windows на новый диск на UEFI damix 17.10.2026 https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .
ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .

@8Observer8 9992 / 2964 / 497 Регистрация: 05.10.2013 Сообщений: 8,147 Записей в блоге: 244
	07.11.2016, 19:24
	Вам нужно просто открыть редакторе два html файла: Файл 06-load-obj.html из папки chapter-08 Файл 08-controls-orbit.html из папки chapter-09 И аккуратно строчка за строчкой объедините эти файлы и вы получите загрузку модели и кручение модели мышкой. Кстати, ваша модель цветная или с текстурами? Имеет она анимации? 0

@Universa1 0 / 0 / 2 Регистрация: 10.04.2013 Сообщений: 61
	07.11.2016, 19:40 [ТС]
	8Observer8, цвет var ambient = new THREE.AmbientLight( 0x006400); scene.add( ambient ) тут задавал 0

@8Observer8 9992 / 2964 / 497 Регистрация: 05.10.2013 Сообщений: 8,147 Записей в блоге: 244
	07.11.2016, 19:43
	Это хорошо, что цвет. В примере 06-load-obj.html как раз используется цвет 0

Obj loader - добавить возможность поворачивать объекты мышкой в любом направлении

Решение