Clay Viewer 开源项目教程

最新推荐文章于 2024-08-12 08:50:49 发布

甄如冰Lea

最新推荐文章于 2024-08-12 08:50:49 发布

阅读量420

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00714/article/details/141119192

版权

Clay Viewer 开源项目教程

clay-viewer3D model viewer with high quality rendering and glTF2.0/GLB export项目地址:https://gitcode.com/gh_mirrors/cl/clay-viewer

项目介绍

Clay Viewer 是一个高质量的 3D 模型查看器，支持 glTF 2.0 和 GLB 格式的模型渲染和导出。该项目基于 ClayGL 构建，提供了丰富的功能和高质量的渲染效果。Clay Viewer 不仅支持从 glTF Sample Models 和 Sketchfab 获取模型，还提供了多种模型格式的支持。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/pissang/clay-viewer.git
cd clay-viewer

运行

在项目目录下，启动一个本地服务器。可以使用 Python 的 SimpleHTTPServer 模块：

python -m SimpleHTTPServer 8000

然后在浏览器中打开 http://localhost:8000，即可看到 Clay Viewer 的界面。

加载模型

在 Clay Viewer 中加载一个 glTF 模型，可以使用以下代码：

var viewer = new ClayViewer(document.getElementById('main'), {
    // Full config at
    // https://github.com/pissang/clay-viewer/blob/master/src/defaultSceneConfig.js
    devicePixelRatio: 1,
    // Enable shadow
    shadow: true,
    shadowQuality: 'high',
    // Environment panorama texture url
    environment: 'env.jpg',
    mainLight: {
        intensity: 2.0
    },
    ambientCubemapLight: {
        exposure: 1,
        diffuseIntensity: 0.2,
        texture: 'asset/texture/example1.jpg'
    },
    postEffect: {
        // Enable post effect
        enable: true,
        bloom: {
            // Enable bloom
            enable: true
        },
        screenSpaceAmbientOcculusion: {
            // Enable screen space ambient occulusion
            enable: true
        }
    }
});

// Load a glTF model
// Model will be fit in 10x10x10 automatically after load
// Return an eventful object
viewer.loadModel('asset/xiniu/xiniu_walk_as.gltf', {
    // Shading mode 'standard'|'lambert'
});