使用 ThreeJS 加载一个 obj 文件

Question

<!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:

这是我正在使用的 obj 文件：Download it from my Google Drive
我尝试将这个obj文件上传到一些在线3D审查程序中，它显示得很好！

更新：

模型的行为就像它使用我的鼠标坐标作为其原点，但有一段距离。 Click here看效果（需要按住鼠标左键移动才能找到模型）

Answer 1

首先解决物体太小，可以缩放：

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

由于没有居中，您的模型可能不在原点（创建时）。您可以修复模型，或使用 model.position 更改模型在 three.js 中的位置。如果您的对象没有正确显示，请尝试添加：

object.frustumCulled = false;

这样就可以了~

使用 ThreeJS 加载一个 obj 文件

Load an obj file using ThreeJS

three.js