Загрузите файл obj с помощью ThreeJS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>

    <script src="https://meadowdecor.jackzc.com/smple/node_modules/three/build/three.min.js"></script>
    <script src="https://meadowdecor.jackzc.com/smple/node_modules/three/examples/js/controls/OrbitControls.js"></script>
    <script src="https://meadowdecor.jackzc.com/smple/node_modules/three/examples/js/controls/TrackballControls.js"></script>
    <script src="https://meadowdecor.jackzc.com/smple/node_modules/three/examples/js/loaders/OBJLoader.js"></script>

    <script>

        const height = window.innerHeight;
        const width = window.innerWidth;
        const texture_file = 'https://meadowdecor.jackzc.com/smple/source/texture.jpg';
        const model_file = 'https://meadowdecor.jackzc.com/smple/source/5.obj';

        /**
         * Generate a scene object with a background color
         **/
        function createScene() {
            var scene = new THREE.Scene();
            scene.background = new THREE.Color(0x111111);

            return scene;
        }

        /**
         * Generate the camera to be used in the scene. Camera args:
         *   [0] field of view: identifies the portion of the scene
         *     visible at any time (in degrees)
         *   [1] aspect ratio: identifies the aspect ratio of the
         *     scene in width/height
         *   [2] near clipping plane: objects closer than the near
         *     clipping plane are culled from the scene
         *   [3] far clipping plane: objects farther than the far
         *     clipping plane are culled from the scene
         **/
        function createCamera() {
            const aspectRatio = width / height;
            const camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
            camera.position.set(0, 1, 10);

            return camera;
        }

        /**
       * Generate the light to be used in the scene. Light args:
       *   [0]: Hexadecimal color of the light
       *   [1]: Numeric value of the light's strength/intensity
       *   [2]: The distance from the light where the intensity is 0
       * @param {obj} scene: the current scene object
       **/
        function createLights(scene) {

            const light1 = new THREE.PointLight(0xffffff, 1, 0);
            light1.position.set(1, 1, 1);
            scene.add(light1);

            // An ambient light
            const light2 = new THREE.AmbientLight(0x111111);
            scene.add(light2);

        }

        /**
        * Generate the renderer to be used in the scene
        **/
        function createRenderer() {

            // Create the canvas with a renderer
            const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });

            // Add support for retina displays
            renderer.setPixelRatio(window.devicePixelRatio);

            renderer.setClearColor("#fff");

            // Specify the size of the canvas
            renderer.setSize(width, height);

            // Add the canvas to the DOM
            document.body.appendChild(renderer.domElement);
            return renderer;

        }

        /**
        * Generate the controls to be used in the scene
        * @param {obj} camera: the three.js camera for the scene
        * @param {obj} renderer: the three.js renderer for the scene
        **/
        function createControls(camera, renderer) {
            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.zoomSpeed = 0.4;
            controls.panSpeed = 0.4;

            return controls;
        }

        function createTexture() {
            var texture_loader = new THREE.TextureLoader();
            var texture = texture_loader.load(texture_file);
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(1, 1);
            texture.needsUpdate = true;
        }

        /**
         * Load object
         **/
        function loadModel() {

            const loader = new THREE.OBJLoader();
            loader.load(model_file, function (object) {
                // object.rotation.z = Math.PI;
                // object.scale.set(2,2,2);
                // object.position.set(1, 1, 1);
                object.frustumCulled = false;
                scene.add(object);
            });

        }

        /**
         * Render!
         **/

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
            controls.update();
        };

        //==========================================================================================//

        var scene = createScene();
        var camera = createCamera();
        var renderer = createRenderer();
        var controls = createControls(camera, renderer);

        createLights(scene);
        loadModel(scene);
        render();

    </script>
</body>

</html>

Только начав изучать ThreeJS, я скачал файл obj и попытался загрузить его на веб-страницу с помощью ThreeJS, это сработало! Однако это работает не так, как я хочу, я ожидаю, что объект отображается в середине моего экрана, но это не так. Я должен удерживать левую кнопку мыши и тянуть ее вправо, тогда объект отображается! И это меньше, чем я ожидал!

Вот код ниже, и, как я уже говорил, я очень новичок в ThreeJS, я потратил 2 дня, пытаясь понять это, и у меня ничего не вышло. СПАСИБО за любую помощь.

PS:

  1. Вот файл obj, который я использую: Загрузите его с моего Google Диска
  2. Я пытаюсь загрузить этот obj-файл в некоторые онлайн-программы для просмотра 3D-изображений, и он показывает очень хорошо!

Обновлять:

Модель ведет себя так, как будто использует координату моей мыши в качестве источника, но с расстоянием. кликните сюда, чтобы увидеть эффект (вы должны удерживать левую кнопку мыши и перемещать ее, чтобы найти модель).

Взгляните на мой ответ

Anye 22.04.2022 18:59
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
1
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, чтобы решить, что объект слишком мал, вы можете масштабировать его:

model.scale.set(2, 2, 2); //Double

Из-за того, что ваша модель не центрирована, она может быть не в начале координат (когда она была создана). Вы можете исправить модель или изменить положение модели в three.js с помощью model.position. Если ваш объект не отображается должным образом, попробуйте добавить:

object.frustumCulled = false;

Это должно сделать это ~

Спасибо за вашу помощь, я предполагаю, что мне следует поместить эти две строки здесь: function loadModel() { const loader = new THREE.OBJLoader(); loader.load (файл_модели, функция (объект) { object.scale.set (2,2,2); object.frustrumCulled = false; scene.add (объект); }); } К сожалению, это не работает.

Jack 22.04.2022 19:43

Давайте решать одну проблему за раз. Ваша модель кажется больше?

Anye 22.04.2022 19:47

Я тоже сделал опечатку. frustrumCulled должно быть frustumCulled. я отредактировал свой ответ

Anye 22.04.2022 19:49

На самом деле он не выглядит больше, на экране ничего не появляется, просто черный фон после того, как я добавил первую строку: object.scale.set(2,2,2).

Jack 22.04.2022 19:53

Это может быть из-за culling. Вы исправили мою опечатку?

Anye 22.04.2022 20:05

Я не знаю, моя ли это иллюзия, похоже, что этот объект использует координату моей мыши в качестве источника, но с расстоянием.

Jack 22.04.2022 20:06

Не могли бы вы предоставить фрагмент, чтобы я мог взглянуть?

Anye 22.04.2022 20:06

Let us continue this discussion in chat.

Jack 22.04.2022 20:07

OK, after almost a week of struggling, I finally get it to work. It's actually quite simple because the 3D model I downloaded was not centered! After trying another model which centered, all works fine.

Jack 29.04.2022 02:51

You actually pointed out the problem but I was just confused with something else, I'm going to mark your post as an answer, Very much appreciated your help!

Jack 29.04.2022 02:54

Другие вопросы по теме