{"id":13602270,"url":"https://github.com/pissang/clay-viewer","last_synced_at":"2025-04-04T19:11:40.681Z","repository":{"id":41497745,"uuid":"90247288","full_name":"pissang/clay-viewer","owner":"pissang","description":"3D model viewer with high quality rendering and glTF2.0/GLB export","archived":false,"fork":false,"pushed_at":"2020-07-07T02:50:12.000Z","size":17803,"stargazers_count":771,"open_issues_count":72,"forks_count":97,"subscribers_count":42,"default_branch":"master","last_synced_at":"2024-10-30T08:18:51.805Z","etag":null,"topics":["3d","electron","gltf","gltf2","viewer","webgl"],"latest_commit_sha":null,"homepage":"https://pissang.github.io/clay-viewer/editor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pissang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-04T09:47:09.000Z","updated_at":"2024-10-17T01:52:37.000Z","dependencies_parsed_at":"2022-08-10T02:35:05.375Z","dependency_job_id":null,"html_url":"https://github.com/pissang/clay-viewer","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pissang%2Fclay-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pissang%2Fclay-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pissang%2Fclay-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pissang%2Fclay-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pissang","download_url":"https://codeload.github.com/pissang/clay-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234922,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","electron","gltf","gltf2","viewer","webgl"],"created_at":"2024-08-01T18:01:18.469Z","updated_at":"2025-04-04T19:11:40.659Z","avatar_url":"https://github.com/pissang.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Clay Viewer\n\n3D model viewer with high quality rendering based on [ClayGL](https://github.com/pissang/claygl) and [glTF2.0/GLB](https://github.com/KhronosGroup/glTF) export.\n\n\n## App\n\n[Download App](https://github.com/pissang/clay-viewer/releases/) on Windows and macOS with FBX/DAE/OBj import and glTF2.0/GLB export. Use it as a common model preview tool!\n\n## Editor\n\n\u003ca href=\"https://pissang.github.io/clay-viewer/editor/\"\u003e\n    \u003cimg src=\"./screenshots/editor.jpg\" width=\"600px\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://pissang.github.io/clay-viewer/editor/\"\u003e\n    \u003cimg src=\"./screenshots/editor2.jpg\" width=\"600px\" /\u003e\n\u003c/a\u003e\n\n## Loader\n\n```js\nvar viewer = new ClayViewer(document.getElementById('main'), {\n    // Full config at\n    // https://github.com/pissang/clay-viewer/blob/master/src/defaultSceneConfig.js\n    devicePixelRatio: 1,\n    // Enable shadow\n    shadow: true,\n    shadowQuality: 'high',\n    // Environment panorama texture url.\n    environment: 'env.jpg',\n    mainLight: {\n        intensity: 2.0\n    },\n    ambientCubemapLight: {\n        exposure: 1,\n        diffuseIntensity: 0.2,\n        texture: 'asset/texture/example1.jpg'\n    },\n    postEffect: {\n        // Enable post effect\n        enable: true,\n        bloom: {\n            // Enable bloom\n            enable: true\n        },\n        screenSpaceAmbientOcculusion: {\n            // Enable screen space ambient occulusion\n            enable: true\n        }\n    }\n});\n\n// Load a glTF model\n// Model will be fit in 10x10x10 automatically after load.\n// Return an eventful object.\nviewer.loadModel('asset/xiniu/xiniu_walk_as.gltf', {\n        // Shading mode. 'standard'|'lambert'\n        shader: 'standard'\n    })\n    // Model loaded. not include textures.\n    .on('loadmodel', function (modelStat) {\n        // Set camera options.\n        viewer.setCameraControl({\n            // Alpha is rotation from bottom to up.\n            alpha: 10,\n            // Beta is rotation from left to right.\n            beta: 30,\n            distance: 20,\n            // Min distance of zoom.\n            minDistance: 1,\n            // Max distance of zoom.\n            maxDistance: 100,\n\n            // Center of target.\n            center: [0, 0, 0],\n\n            // If auto rotate.\n            autoRotate: false,\n\n            // Degree per second.\n            autoRotateSpeed: 60,\n\n            // Direction of autoRotate. cw or ccw when looking top down.\n            autoRotateDirection: 'cw',\n\n            // Start auto rotating after still for the given time\n            autoRotateAfterStill: 30\n        });\n\n        // Set main light options.\n        viewer.setMainLight({\n            // Main light intensity\n            intensity: 1,\n            // Main light color string\n            color: '#fff',\n            // Alpha is rotation from bottom to up.\n            alpha: 45,\n            // Beta is rotation from left to right.\n            beta: 45\n        });\n        // Set ambient light options\n        viewer.setAmbientLight({\n            // Ambient light intensity\n            intensity: 0.8\n        });\n\n        viewer.start();\n\n        // Load extra animation glTF\n        viewer.loadAnimation('asset/xiniu/xiniu_stand_as.gltf')\n            .on('success', function () {\n                console.log('Changed animation')\n            });\n        // Animation pause and start\n        viewer.pauseAnimation();\n        viewer.resumeAnimation();\n\n        // Print model stat.\n        console.log('Model loaded:');\n        console.log('三角面：', modelStat.triangleCount);\n        console.log('顶点：', modelStat.vertexCount);\n        console.log('场景节点：', modelStat.nodeCount);\n        console.log('Mesh：', modelStat.meshCount);\n        console.log('材质：', modelStat.materialCount);\n        console.log('纹理：', modelStat.textureCount);\n    })\n    .on('ready', function () {\n        console.log('All loaded inlcuding textures.');\n    })\n    .on('error', function () {\n        console.log('Model load error');\n    });\n\n```\n\n[Here](https://github.com/pissang/clay-viewer/blob/master/src/defaultSceneConfig.js) is the full graphic configuration\n\n## Converter\n\nClayGL provide a python tool for converting FBX to glTF 2.0.\n\nhttps://github.com/pissang/claygl/blob/master/tools/fbx2gltf.py\n\nNeeds [python3.3](https://www.python.org/download/releases/3.3.0/) and [FBX SDK 2018.1.1](http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112\u0026id=26416130)\n\n```\nusage: fbx2gltf.py [-h] [-e EXCLUDE] [-t TIMERANGE] [-o OUTPUT]\n                    [-f FRAMERATE] [-p POSE] [-q] [-b]\n                    file\n\nFBX to glTF converter\n\npositional arguments:\n  file\n\noptional arguments:\n  -h, --help            show this help message and exit\n  -e EXCLUDE, --exclude EXCLUDE\n                        Data excluded. Can be: scene,animation\n  -t TIMERANGE, --timerange TIMERANGE\n                        Export animation time, in format\n                        'startSecond,endSecond'\n  -o OUTPUT, --output OUTPUT\n                        Ouput glTF file path\n  -f FRAMERATE, --framerate FRAMERATE\n                        Animation frame per second\n  -p POSE, --pose POSE  Start pose time\n  -q, --quantize        Quantize accessors with WEB3D_quantized_attributes\n                        extension\n  -b, --binary          Export glTF-binary\n  --beautify            Beautify json output.\n  --noflipv             If not flip v in texcoord.\n```\n\n\n## Seperate scene and animation\n\nExport scene\n\n```bash\n# exclude animation\nfbx2gltf2.py -e animation -p 0 xxx.fbx\n```\n\nExport animation\n\n```bash\n# exclude scene, 0 to 20 second, 20 framerate.\nfbx2gltf2.py -e scene -t 0,20 -f 20 -o xxx_ani.gltf xxx.fbx\n```\n\nLoad scene and animation asynchronously\n\n```js\nviewer.loadModel('asset/xiniu/xiniu.gltf')\n    // Model loaded. not include textures.\n    .on('loadmodel', function (modelStat) {\n        viewer.start();\n        // Load extra animation glTF\n        viewer.loadAnimation('asset/xiniu/xiniu_ani.gltf');\n    });\n```\n\n## Build\n\n```bash\nnpm install\n# Build loader\nnpm run build\n# Build editor\nwebpack --config editor/webpack.config.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpissang%2Fclay-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpissang%2Fclay-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpissang%2Fclay-viewer/lists"}