js-3d-model-viewer 项目教程

最新推荐文章于 2025-05-09 15:34:15 发布

汪萌娅Gloria

最新推荐文章于 2025-05-09 15:34:15 发布

阅读量676

点赞数 7

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01152/article/details/142509502

js-3d-model-viewer 项目教程

js-3d-model-viewer A web player to display 3D models in the browser 项目地址: https://gitcode.com/gh_mirrors/js/js-3d-model-viewer

1. 项目介绍

js-3d-model-viewer 是一个基于 Three.js 的 Web 播放器，用于在浏览器中显示 3D 模型。该项目由 CG Wire 开发，CG Wire 是一家位于法国的公司，专注于帮助动画工作室高效管理其生产和构建管道。该项目遵循软件工艺原则，注重代码质量和开发者体验。

主要功能

支持 .obj 和 .glb 文件格式。
提供网格显示、全屏模式等功能。
基于 Three.js 开发，易于扩展和定制。

2. 项目快速启动

安装依赖

首先，通过 npm 安装 js-3d-model-viewer：

npm install js-3d-model-viewer

使用示例

在 HTML 页面加载完成后，运行以下代码：

import modelPlayer from 'js-3d-model-viewer';

const viewerElement = document.getElementById('viewer');
const opts = {
  grid: true,
  trackball: false,
  background: 'rgb(100, 100, 100)'
};

const scene = modelPlayer.prepareScene(viewerElement, opts);
modelPlayer.loadObject(scene, '/assets/sample.obj'); // 加载 .obj 文件
// 或者加载 .glb 文件
// modelPlayer.loadGlb(scene, '/assets/sample.glb');

// 全屏模式
const fullScreenButton = document.getElementById('fullscreen-button');
fullScreenButton.addEventListener('click', () => {
  modelPlayer.goFullScreen(viewerElement);
});

// 启用缓存
modelPlayer.enableCache();
// 禁用缓存
// modelPlayer.disableCache();