| const viewer = new ThreeViewer({ | const viewer = new ThreeViewer({ | ||||
| canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | ||||
| msaa: true, | |||||
| }) | }) | ||||
| const picking = viewer.addPluginSync(PickingPlugin) | const picking = viewer.addPluginSync(PickingPlugin) |
| const model = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf') | const model = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf') | ||||
| const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true)) | const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true)) | ||||
| ui.setupPluginUi(TransformControlsPlugin) | |||||
| ui.setupPluginUi(TransformControlsPlugin, {expanded: true}) | |||||
| ui.setupPluginUi(PickingPlugin) | ui.setupPluginUi(PickingPlugin) | ||||
| // Get the underlying transform controls (instance of TransformControls2) | // Get the underlying transform controls (instance of TransformControls2) |
| { | { | ||||
| "name": "threepipe", | "name": "threepipe", | ||||
| "version": "0.0.19", | |||||
| "version": "0.0.20-dev.1", | |||||
| "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.", | "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.", | ||||
| "main": "src/index.ts", | |||||
| "main": "dist/index.js", | |||||
| "module": "dist/index.mjs", | "module": "dist/index.mjs", | ||||
| "types": "src/index.ts", | "types": "src/index.ts", | ||||
| "sources": "src/index.ts", | "sources": "src/index.ts", | ||||
| "browser": "dist/index.js", | "browser": "dist/index.js", | ||||
| "type": "module", | "type": "module", | ||||
| "scripts": { | "scripts": { | ||||
| "compile": "rimraf lib && npm run compile:esm && npm run copy:css", | |||||
| "compile:esm": "tsc -p ./src", | |||||
| "copy:css": "copyfiles -u 1 \"src/**/*.css\" lib", | |||||
| "new:pack": "npm run prepare && clean-package && npm pack && clean-package restore", | "new:pack": "npm run prepare && clean-package && npm pack && clean-package restore", | ||||
| "new:publish": "npm run prepare && clean-package && npm publish && clean-package restore", | "new:publish": "npm run prepare && clean-package && npm publish && clean-package restore", | ||||
| "build": "rimraf dist && npm run update-version && NODE_ENV=production rollup -c", | |||||
| "dev": "rollup -c -w", | |||||
| "build:rollup": "rimraf dist && npm run update-version && NODE_ENV=production rollup -c", | |||||
| "build": "npm run update-version && vite build", | |||||
| "dev:rollup": "rollup -c -w", | |||||
| "dev": "NODE_ENV=development vite build --watch", | |||||
| "build-examples": "tsc --project examples/tsconfig.build.json", | "build-examples": "tsc --project examples/tsconfig.build.json", | ||||
| "dev-examples": "tsc --project examples/tsconfig.build.json -w", | "dev-examples": "tsc --project examples/tsconfig.build.json -w", | ||||
| "serve-docs": "ws -d docs -p 8080", | "serve-docs": "ws -d docs -p 8080", | ||||
| "serve": "ws -d . -p 9229", | "serve": "ws -d . -p 9229", | ||||
| "docs": "npx typedoc && markdown-to-html", | "docs": "npx typedoc && markdown-to-html", | ||||
| "build-plugins": "node scripts/build-plugins.mjs", | "build-plugins": "node scripts/build-plugins.mjs", | ||||
| "prepare": "npm run build && npm run build-plugins && npm run build-examples", | |||||
| "prepare": "npm run build && npm run compile && npm run build-plugins && npm run build-examples", | |||||
| "update-version": "echo \"export const VERSION = '$npm_package_version'\" > src/viewer/version.ts" | "update-version": "echo \"export const VERSION = '$npm_package_version'\" > src/viewer/version.ts" | ||||
| }, | }, | ||||
| "clean-package": { | "clean-package": { | ||||
| "@rollup/plugin-commonjs": "^25.0.0", | "@rollup/plugin-commonjs": "^25.0.0", | ||||
| "@rollup/plugin-json": "^6.0.0", | "@rollup/plugin-json": "^6.0.0", | ||||
| "@rollup/plugin-node-resolve": "^15.0.2", | "@rollup/plugin-node-resolve": "^15.0.2", | ||||
| "@rollup/plugin-replace": "^5.0.2", | |||||
| "@rollup/plugin-terser": "^0.4.3", | "@rollup/plugin-terser": "^0.4.3", | ||||
| "@rollup/plugin-typescript": "^11.1.1", | |||||
| "@rollup/plugin-typescript": "^11.1.5", | |||||
| "@types/stats.js": "^0.17.0", | "@types/stats.js": "^0.17.0", | ||||
| "@typescript-eslint/eslint-plugin": "^5.59.7", | "@typescript-eslint/eslint-plugin": "^5.59.7", | ||||
| "@typescript-eslint/parser": "^5.59.5", | "@typescript-eslint/parser": "^5.59.5", | ||||
| "clean-package": "^2.2.0", | "clean-package": "^2.2.0", | ||||
| "copyfiles": "^2.4.1", | |||||
| "eslint": "^8.40.0", | "eslint": "^8.40.0", | ||||
| "eslint-import-resolver-typescript": "^3.5.5", | "eslint-import-resolver-typescript": "^3.5.5", | ||||
| "eslint-plugin-deprecation": "^1.4.1", | "eslint-plugin-deprecation": "^1.4.1", | ||||
| "eslint-plugin-import": "^2.27.5", | "eslint-plugin-import": "^2.27.5", | ||||
| "local-web-server": "^5.3.0", | "local-web-server": "^5.3.0", | ||||
| "markdown-to-html-cli": "^3.7.0", | "markdown-to-html-cli": "^3.7.0", | ||||
| "popmotion": "^11.0.5", | |||||
| "rimraf": "^5.0.1", | "rimraf": "^5.0.1", | ||||
| "rollup": "^3.23.0", | "rollup": "^3.23.0", | ||||
| "rollup-plugin-license": "^3.0.1", | |||||
| "rollup-plugin-glsl": "^1.3.0", | "rollup-plugin-glsl": "^1.3.0", | ||||
| "rollup-plugin-license": "^3.0.1", | |||||
| "rollup-plugin-postcss": "^4.0.2", | "rollup-plugin-postcss": "^4.0.2", | ||||
| "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2018/package.tgz", | |||||
| "three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2019/package.tgz", | |||||
| "tslib": "^2.5.0", | "tslib": "^2.5.0", | ||||
| "typedoc": "^0.25.6", | "typedoc": "^0.25.6", | ||||
| "typescript": "^5.3.3", | "typescript": "^5.3.3", | ||||
| "typescript-plugin-css-modules": "^5.0.1", | "typescript-plugin-css-modules": "^5.0.1", | ||||
| "@rollup/plugin-replace": "^5.0.2", | |||||
| "popmotion": "^11.0.5" | |||||
| "vite": "^5.0.11", | |||||
| "vite-plugin-dts": "^3.7.0" | |||||
| }, | }, | ||||
| "dependencies": { | "dependencies": { | ||||
| "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1019/package.tgz", | "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1019/package.tgz", |
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | |||||
| export default content | |||||
| } | |||||
| // export {} | // export {} | ||||
| // hack for typedoc | // hack for typedoc |
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | |||||
| export default content | |||||
| } | |||||
| // export {} | // export {} | ||||
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | |||||
| export default content | |||||
| } | |||||
| // export {} | // export {} | ||||
| replace({ | replace({ | ||||
| 'from \'three\'': 'from \'threepipe\'', | 'from \'three\'': 'from \'threepipe\'', | ||||
| delimiters: ['', ''], | delimiters: ['', ''], | ||||
| preventAssignment: true, | |||||
| }), | }), | ||||
| replace({ | replace({ | ||||
| 'process.env.NODE_ENV': JSON.stringify('production'), | 'process.env.NODE_ENV': JSON.stringify('production'), |
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | |||||
| export default content | |||||
| } | |||||
| // export {} | // export {} | ||||
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | |||||
| export default content | |||||
| } | |||||
| // export {} | // export {} | ||||
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { | |||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } |
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } | ||||
| declare module '*.css?inline' { | |||||
| declare module '*.css?inline' { // for vite | |||||
| const content: string | const content: string | ||||
| export default content | export default content | ||||
| } | } |
| { | |||||
| "extends": "../tsconfig", | |||||
| "compilerOptions": { | |||||
| "outDir": "../lib", | |||||
| "declarationDir": "../lib", | |||||
| } | |||||
| } |
| import {defineConfig} from 'vite' | |||||
| import json from '@rollup/plugin-json'; | |||||
| import dts from 'vite-plugin-dts' | |||||
| import packageJson from './package.json'; | |||||
| import license from 'rollup-plugin-license'; | |||||
| import replace from '@rollup/plugin-replace'; | |||||
| import glsl from 'rollup-plugin-glsl'; | |||||
| import path from 'node:path'; | |||||
| const isProd = process.env.NODE_ENV === 'production' | |||||
| const { name, version, author } = packageJson | |||||
| const {main, module, browser} = packageJson['clean-package'].replace | |||||
| export default defineConfig({ | |||||
| optimizeDeps: { | |||||
| exclude: ['uiconfig.js', 'ts-browser-helpers'], | |||||
| }, | |||||
| // define: { | |||||
| // 'process.env': process.env | |||||
| // }, | |||||
| build: { | |||||
| sourcemap: true, | |||||
| minify: isProd, | |||||
| cssMinify: isProd, | |||||
| cssCodeSplit: false, | |||||
| watch: !isProd ? { | |||||
| buildDelay: 1000, | |||||
| } : null, | |||||
| lib: { | |||||
| entry: 'src/index.ts', | |||||
| formats: isProd ? ['es', 'umd'] : ['es'], | |||||
| name: name, | |||||
| fileName: (format) => (format === 'umd' ? browser : module).replace('dist/', ''), | |||||
| }, | |||||
| outDir: 'dist', | |||||
| emptyOutDir: isProd, | |||||
| commonjsOptions: { | |||||
| exclude: [/uiconfig.js/, /ts-browser-helpers/], | |||||
| }, | |||||
| rollupOptions: { | |||||
| output: { | |||||
| // inlineDynamicImports: false, | |||||
| }, | |||||
| }, | |||||
| }, | |||||
| plugins: [ | |||||
| isProd ? dts({tsconfigPath: './tsconfig.json'}) : null, | |||||
| replace({ | |||||
| 'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development'), | |||||
| preventAssignment: true, | |||||
| }), | |||||
| glsl({ // todo: minify glsl. | |||||
| include: 'src/**/*.glsl', | |||||
| }), | |||||
| json(), | |||||
| // postcss({ | |||||
| // modules: false, | |||||
| // autoModules: true, // todo; issues with typescript import css, because inject is false | |||||
| // inject: false, | |||||
| // minimize: isProduction, | |||||
| // // Or with custom options for `postcss-modules` | |||||
| // }), | |||||
| license({ | |||||
| banner: ` | |||||
| @license | |||||
| ${name} v${version} | |||||
| Copyright 2022<%= moment().format('YYYY') > 2022 ? '-' + moment().format('YYYY') : null %> ${author} | |||||
| ${packageJson.license} License | |||||
| `, | |||||
| thirdParty: { | |||||
| output: path.join(__dirname, 'dist', 'dependencies.txt'), | |||||
| includePrivate: true, // Default is false. | |||||
| }, | |||||
| }), | |||||
| ], | |||||
| }) |