Three.js OBJLoader加载obj文件

Javartre

已于 2025-05-09 13:06:53 修改

阅读量1.6k

点赞数 28

文章标签： javascript 开发语言 ecmascript

于 2024-11-28 17:33:03 首次发布

本文链接：https://blog.youkuaiyun.com/Javartre/article/details/144115899

版权

Three.js中文网提供Three.js、WebGL视频课程http://www.webgl3d.cn/
Three.js官方文档http://www.yanhuangxueyuan.com/threejs/docs/index.html GitHub 源码地址JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.https://github.com/mrdoob/three.js

OBJ加载器（OBJLoader）

用于加载 .obj 资源的加载器。
OBJ文件格式是一种简单的数据格式，这种格式以人类可读的形式来表示3D几何体，即每个顶点的位置、每个纹理坐标顶点的UV位置、顶点法线、将使每个多边形定义为顶点列表的面以及纹理顶点。

OBJLoadder 代码示例

// 代码示例

// instantiate a loader
const loader = new OBJLoader();

// load a resource
loader.load(
	// resource URL
	'models/monster.obj',
	// called when resource is loaded
	function ( object ) {

		scene.add( object );

	},
	// called when loading is in progresses
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}
);

OBJLoader 的应用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBJLoader</title>
</head>
<!--  CDN引用 -->
<script type="importmap">
        {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@v0.170/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.170/examples/jsm/"
          }
        }
      </script>

<script type="module">

    import * as THREE from 'three';
    import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.x = 400;
    camera.rotateX = new THREE.Euler(Math.PI, 0, 0);
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.setClearAlpha(1);

    // 创建控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.noPan = true;
    controls.staticMoving = true;
    //  焦距  距离越大图片越小
    controls.minDistance = 10;
    controls.maxDistance = 200;
    // 缩放速度
    controls.zoomSpeed = 2.5;
    controls.panSpeed = .5;
    // 旋转速度
    controls.rotateSpeed = 3;
    controls.dynamicDampingFactor = .1;
    // 创建光源
    const light = new THREE.AmbientLight(16777215, 1);
    scene.add(light);
    // light-平行光
    const directionalLight = new THREE.DirectionalLight(16777215, 0.7);
    camera.add(directionalLight);

    // 创建加载器
    const loader = new OBJLoader();
    loader.load('https://xxx', function (object) {
        scene.add(object);
    })
    // 渲染场景
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate();
</script>

<body>





</body>

</html>