Fabians/stackblitz sdk test3 (#242)
* testing stackblitz as an sdk * minor lceanup * stackblitz component * Added basic and advanced sandboxes * fixxxxes * Updated all examples with StackBlitz sandboxes * Removed test embed * build fix * another id method * Added back original embed * Added the headers thing * Removed the .toml file * Added a custom tooltip plugin. Each example now has a link the the sandbox alongside the embedded verion along with a tooltip that mentions that embedding only works on chromium based browsers --------- Co-authored-by: AlexandruPopovici <alexandrupopoviciioan@gmail.com>
This commit is contained in:
Kristaps Fabians Geikins
GitHub
Родитель
9b334e931a
Коммит
909e253266
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div :id="id" />
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
projectId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
embedOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
id() {
|
||||
return JSON.stringify({ projectId: this.projectId, embedOptions: this.embedOptions });
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
StackBlitzSDK.embedProjectId(this.id, this.projectId, this.embedOptions);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -36,6 +36,12 @@ module.exports = {
|
|||
src: 'https://identity.netlify.com/v1/netlify-identity-widget.js',
|
||||
},
|
||||
],
|
||||
[
|
||||
"script",
|
||||
{
|
||||
src: "https://unpkg.com/@stackblitz/sdk@1/bundles/sdk.umd.js"
|
||||
}
|
||||
]
|
||||
],
|
||||
/**
|
||||
* Theme configuration, here is the default theme configuration for VuePress.
|
||||
|
|
@ -373,9 +379,10 @@ module.exports = {
|
|||
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
|
||||
*/
|
||||
plugins: [
|
||||
'@vuepress/plugin-back-to-top',
|
||||
'@vuepress/plugin-medium-zoom',
|
||||
'@vuepress/html-redirect',
|
||||
"@adamdehaven/vuepress-plugin-custom-tooltip",
|
||||
"@vuepress/plugin-back-to-top",
|
||||
"@vuepress/plugin-medium-zoom",
|
||||
"@vuepress/html-redirect",
|
||||
[
|
||||
'vuepress-plugin-matomo',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -11,4 +11,6 @@ For the brave, there's an example application in the [viewer package right here]
|
|||
Our end goals are:
|
||||
- easy to load and unload speckle data
|
||||
- easy to embed in your own react/vue/vanilla web apps
|
||||
- easy to customise with your own tree views, etc.
|
||||
- easy to customise with your own tree views, etc.
|
||||
|
||||
<Stackblitz projectId="css-custom-prop-color-values" :embedOptions="{height: 1000}"/>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@adamdehaven/vuepress-plugin-custom-tooltip": "^1.4.3",
|
||||
"markdown-it-html5-embed": "^1.0.0",
|
||||
"vuepress-plugin-matomo": "^1.0.2"
|
||||
},
|
||||
|
|
@ -18,6 +19,23 @@
|
|||
"vuepress": "^1.9.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@adamdehaven/vue-custom-tooltip": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.4.4.tgz",
|
||||
"integrity": "sha512-74kfeaw56bGhz96KXSbsg4XLnfaR+l+Mt11umK57+kk/T66QDHjjcpwJGEfjrF/+vvk7RIj71hAj4cbgXN7rpA==",
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^2.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@adamdehaven/vuepress-plugin-custom-tooltip": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@adamdehaven/vuepress-plugin-custom-tooltip/-/vuepress-plugin-custom-tooltip-1.4.3.tgz",
|
||||
"integrity": "sha512-6psTUHwuEsyYQu+p1bdl/q5E/K+8PFKharO7tF8kkPiM/Noo6dYM7H7Tv8H9GCTU70lcj8iseMSdAixQqN59fA==",
|
||||
"dependencies": {
|
||||
"@adamdehaven/vue-custom-tooltip": "^1.4.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
|
||||
|
|
@ -435,7 +453,6 @@
|
|||
"version": "7.23.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
|
||||
"integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
},
|
||||
|
|
@ -2333,7 +2350,6 @@
|
|||
"version": "2.7.16",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
|
||||
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.23.5",
|
||||
"postcss": "^8.4.14",
|
||||
|
|
@ -2343,17 +2359,32 @@
|
|||
"prettier": "^1.18.2 || ^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc/node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc/node_modules/picocolors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc/node_modules/postcss": {
|
||||
"version": "8.4.32",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
|
||||
"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -5114,7 +5145,6 @@
|
|||
"version": "3.35.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.0.tgz",
|
||||
"integrity": "sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
|
|
@ -5542,8 +5572,7 @@
|
|||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/cyclist": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -9785,24 +9814,6 @@
|
|||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/nanomatch": {
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||
|
|
@ -11318,7 +11329,6 @@
|
|||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
|
|
@ -12743,7 +12753,6 @@
|
|||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -12752,7 +12761,6 @@
|
|||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -14397,7 +14405,6 @@
|
|||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
|
||||
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
|
||||
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-sfc": "2.7.16",
|
||||
"csstype": "^3.1.0"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@
|
|||
"vuepress": "^1.9.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@adamdehaven/vuepress-plugin-custom-tooltip": "^1.4.3",
|
||||
"markdown-it-html5-embed": "^1.0.0",
|
||||
"vuepress-plugin-matomo": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,13 +48,17 @@ async function main() {
|
|||
main();
|
||||
|
||||
```
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-measurement-tool) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<Stackblitz projectId='speckle-measurement-tool' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/frmffj?view=preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Measurement Tool"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
|
||||
Adding more extensions is easy, and all you need to do is call the viewer's `createExtension` function with the extension type you want to add.
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ Finally, let's load in some data from a Speckle model. It's easier to use the pr
|
|||
```ts
|
||||
/** Create a loader for the speckle stream */
|
||||
const urls = await UrlHelper.getResourceUrls(
|
||||
"https://app.speckle.systems/projects/7591c56179/models/32213f5381"
|
||||
"https://app.speckle.systems/projects/24c98619ac/models/38639656b8"
|
||||
);
|
||||
for (const url of urls) {
|
||||
const loader = new SpeckleLoader(viewer.getWorldTree(), url, "");
|
||||
|
|
@ -52,11 +52,11 @@ for (const url of urls) {
|
|||
}
|
||||
```
|
||||
|
||||
Here is the end result:
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-basic-setup?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/jf4ccn?view=preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Basic Setup"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<Stackblitz projectId="speckle-basic-setup" :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }" />
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ We'll create a simple HTML and a simple typescript file
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="renderer" style="width:100%;height:100%;left:0px;top:0px;position:absolute" </div>
|
||||
<div id="renderer" style="width:100%;height:100%;left:0px;top:0px;position:absolute" />
|
||||
|
||||
<script src="src/index.ts"></script>
|
||||
</body>
|
||||
|
|
@ -67,11 +67,15 @@ main();
|
|||
```
|
||||
Now save this typescript snippet as`index.ts`
|
||||
|
||||
The result:
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-basic-setup?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<Stackblitz projectId="speckle-basic-setup" :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }" />
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/jf4ccn?view=preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Basic Setup"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
# Box Selection
|
||||
Making your own extension is a powerful feature of the viewer. In this example we've made a box selection feature by implementing our own extension.
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/qjnfjr?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Box Selection"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-box-selection?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
|
||||
<Stackblitz projectId='speckle-box-selection' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
|
|
@ -2,9 +2,12 @@
|
|||
|
||||
This examples provides the previous [move gizmo](/viewer/object-manipulation-example.md) working together with the [box selection](/viewer/box-selection-example.md) extension from before and an additional extension that animates and categorizes objects based on their properties.
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/8vpdpr?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Categorize"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-animation-text?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<Stackblitz projectId='speckle-animation-text' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -64,11 +64,12 @@ const filteringState = filtering.setColorFilter(propertyInfo);
|
|||
|
||||
Filters can be combined to a certain extent, but as a general rule of thumb, any particular object in the scene will always look how its last filter (if any) told it to look.
|
||||
|
||||
Here's a code sandbox with all of the above combined in a simple app:
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-filtering?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/hz88rs?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Filtering"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<Stackblitz projectId='speckle-filtering' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@ For examples of using our loading system and concrete implementations of `Loader
|
|||
- [Speckle loader and converter](https://github.com/specklesystems/speckle-server/tree/alex/API2.0/packages/viewer/src/modules/loaders/Speckle)
|
||||
- [OBJ loader and converter (geometry only)](https://github.com/specklesystems/speckle-server/tree/alex/API2.0/packages/viewer/src/modules/loaders/OBJ)
|
||||
|
||||
Additionally, here is a live sandbox with the OBJLoader in use:
|
||||
Additionally, [here](https://stackblitz.com/edit/speckle-obj-loader?file=index.html) is a live sandbox with the OBJLoader in use or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/pydvhz?view=Editor+%2B+Preview&module=%2Fpackage.json&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Obj Loader"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<Stackblitz projectId="speckle-obj-loader" :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }" />
|
||||
|
|
|
|||
|
|
@ -16,11 +16,28 @@ for (const url of urls) {
|
|||
```
|
||||
|
||||
## Other Data Sources
|
||||
By creating your own loaders you can load data from various input sources. The viewer library only come with a barebones OBJ loader in addition to the speckle loader. Here's a code sandbox:
|
||||
By creating your own loaders you can load data from various input sources. The viewer library only come with a barebones OBJ loader in addition to the speckle loader.
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/q39l8w?view=preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Obj Loader - binary"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
```ts
|
||||
const objUrl: string = '<your OBJ resource URL>'
|
||||
/** Create a loader for the .obj data */
|
||||
const loader = new ObjLoader(viewer.getWorldTree(), objUrl);
|
||||
/** Load the obj data */
|
||||
await viewer.loadObject(loader, true);
|
||||
```
|
||||
Alternatively, you can load the OBJ from an OBJ file contents as `string` or `ArrayBuffer`
|
||||
```ts
|
||||
const objData:string | ArrayBuffer = '<your OBJ resource data>'
|
||||
/** Create a loader for the .obj data */
|
||||
const loader = new ObjLoader(viewer.getWorldTree(), '<user defined id>', objData);
|
||||
/** Load the obj data */
|
||||
await viewer.loadObject(loader, true);
|
||||
```
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-obj-loader?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<Stackblitz projectId="speckle-obj-loader" :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }" />
|
||||
|
|
@ -19,18 +19,18 @@ sections.toggle();
|
|||
|
||||
/** Programatically apply a section box */
|
||||
const box = new Box3().copy(viewer.getRenderer().sceneBox);
|
||||
box.max.z *= 0.35;
|
||||
box.max.z *= 0.6;
|
||||
sections.setBox(box);
|
||||
```
|
||||
|
||||
Here's a running code sandbox with this use case:
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-section-planes?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/r8fsk3?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Section Planes"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<Stackblitz projectId="speckle-section-planes" :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }" />
|
||||
|
||||
## Measurements Tool
|
||||
|
||||
|
|
@ -40,24 +40,26 @@ The default measurement tool provides basic functionality for most measuring nee
|
|||
- **Perpendicular**: This measuremente mode allows you to measure the distance along one point on a surface along it's normal to another chosen point.
|
||||
- **AutoLazer™**: Double clicking when in perpendicular mode, automatically measures from the current point to the nearest surface along the current point's surface normal
|
||||
|
||||
Here's a sandbox example with a small integrated UI for playing around with the measurement tool:
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-measurement-tool?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/frmffj?view=Editor+%2B+Preview&module=%2Fsrc%2FMeasurementsUI.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Measurement Tool"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<Stackblitz projectId='speckle-measurement-tool' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
|
||||
## Differ
|
||||
|
||||
The differ provides diffing functionality between models. It can provide a diff data-wise as well as visually. Diffing works by taking a _current_ model and comparing it against an _incoming_ model. The result will contain added/removed/modified/unchanged objects which are colored accordingly (if visual diff is enabled). Diff results are based on object `id`s and `applicationId`s.
|
||||
|
||||
Here's an example of the differ running:
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-differ?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/rpnjs5?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Differ"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<Stackblitz projectId='speckle-differ' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
# Object Manipulation
|
||||
The viewer allows individual object transformation manipulation. In the example below, we've extended the stock `SelectionExtension` to allow us to move objects around.
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/yydx4q?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.ts&hidenavigation=1"
|
||||
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="Manipulating Objects"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
You can run the example live [here](https://stackblitz.com/edit/speckle-extended-selection?file=index.html) or <VueCustomTooltip label="Embedding works only on chromium based browsers"><ins>embedded</ins></VueCustomTooltip> below
|
||||
|
||||
<Stackblitz projectId='speckle-extended-selection' :embedOptions="{
|
||||
height: 500,
|
||||
openFile: 'src/main.ts',
|
||||
view: 'preview',
|
||||
hideExplorer: true,
|
||||
hideNavigation: true }"
|
||||
/>
|
||||
Загрузка…
Ссылка в новой задаче