Skip to content

Commit

Permalink
feat: add framework packages
Browse files Browse the repository at this point in the history 
* feat: add react-view3d

* fix: controlbar not disappearing

* feat: add vue-view3d

* feat: add vue3-view3d

* feat: add ngx-view3d

* feat: add svelte-view3d

* docs: update cfc demo

* chore: rm unused packages

* fix: render event called after animation finish

* fix: add missing interface for ngx-view3d

* fix: beforeDestroy to beforeUnmount

* chore: fix lerna script paths
  • Loading branch information
@WoodNeck
WoodNeck committed Aug 4, 2022
1 parent 3b6f756 commit bedca34
Show file tree
Hide file tree
Showing 355 changed files with 277,588 additions and 18,354 deletions.
21 changes: 0 additions & 21 deletions .travis.yml
View file

This file was deleted.

7 changes: 7 additions & 0 deletions demo/docs/events/Registering.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ id: register
slug: /events
---

import FrameworkEvents from "@site/src/components/tutorial/FrameworkEvents.mdx";

## Basics

Event handlers can be added in two ways.

1. Add event handlers before initialization with the option [on](/docs/options/miscellaneous/on)
Expand Down Expand Up @@ -48,3 +52,6 @@ view3D.on("render", handler);
// Detach handler
view3D.off("render", handler);
```

## Frameworks
<FrameworkEvents />
75 changes: 30 additions & 45 deletions demo/docs/tutorials/Annotation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_position: 6

import View3D from "@site/src/components/View3D";
import License from "@site/src/components/License";

import ElementExample from "@site/src/components/ElementExample";

To use Annotations, you should include CSS/SASS file for them.

Expand All @@ -24,16 +24,11 @@ You can place the annotations above the 3D model by adding elements inside `".vi
You should also add `data-position="x y z"`, which will place annotations in the given position.
(Optional) By adding `data-focus="yaw pitch zoom"`, you can set where the camera should be when annotation is clicked.

```html
<div class="view3d-wrapper">
<canvas class="view3d-canvas"></canvas>
<div class="view3d-annotation-wrapper">
<div class="view3d-annotation default" data-position="0.13 0.5 -0.05" data-focus="-90 0 30"></div>
<div class="view3d-annotation default" data-position="-0.22 0.5 0.05" data-focus="90 0 30" data-duration="500"></div>
<div class="view3d-annotation default" data-position="-0.05 0.4 0.18" data-focus="0 20 35" data-duration="0"></div>
</div>
</div>
```
<ElementExample el={`<div class="view3d-annotation-wrapper">
<div class="view3d-annotation default" data-position="0.13 0.5 -0.05" data-focus="-90 0 30"></div>
<div class="view3d-annotation default" data-position="-0.22 0.5 0.05" data-focus="90 0 30" data-duration="500"></div>
<div class="view3d-annotation default" data-position="-0.05 0.4 0.18" data-focus="0 20 35" data-duration="0"></div>
</div>`} />

Adding `default` class will render annotations in a default style, which renders white circles with index in it.

Expand All @@ -57,19 +52,14 @@ In that case, you have to add correct CSS for each elements yourself.

## Annotation for animated models

```html
<div class="view3d-wrapper">
<canvas class="view3d-canvas"></canvas>
<div class="view3d-annotation-wrapper">
<div class="view3d-annotation default" data-mesh-index="10" data-face-index="5" data-focus="0 0 15" data-duration="500">
<div class="view3d-annotation-tooltip default">A thick eyebrow</div>
</div>
<div class="view3d-annotation default" data-mesh-index="6" data-face-index="5" data-focus="30 15 30" data-duration="200">
<div class="view3d-annotation-tooltip default">An animated robot arm</div>
</div>
<ElementExample el={`<div class="view3d-annotation-wrapper">
<div class="view3d-annotation default" data-mesh-index="10" data-face-index="5" data-focus="0 0 15" data-duration="500">
<div class="view3d-annotation-tooltip default">A thick eyebrow</div>
</div>
</div>
```
<div class="view3d-annotation default" data-mesh-index="6" data-face-index="5" data-focus="30 15 30" data-duration="200">
<div class="view3d-annotation-tooltip default">An animated robot arm</div>
</div>
</div>`} />

<>{(() => {
const view3D = React.useRef();
Expand Down Expand Up @@ -107,33 +97,28 @@ You can add an element with class `.view3d-annotation-tooltip` inside annotation

Adding `default` class will render tooltips in a default style, which has translucent black background and some paddings applied.

```html
<div class="view3d-wrapper">
<canvas class="view3d-canvas"></canvas>
<div class="view3d-annotation-wrapper">
<div class="view3d-annotation default" data-position="0.1 0 0">
<div class="view3d-annotation-tooltip default">
<div class="card">
<div class="card-image">
<figure class="image is-4by3 m-0">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
</figure>
</div>
<div class="card-content is-size-7">
<div class="content">
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
</div>
<ElementExample el={`<div class="view3d-annotation-wrapper">
<div class="view3d-annotation default" data-position="0.1 0 0">
<div class="view3d-annotation-tooltip default">
<div class="card">
<div class="card-image">
<figure class="image is-4by3 m-0">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
</figure>
</div>
<div class="card-content is-size-7">
<div class="content">
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
</div>
</div>
</div>
</div>
<div class="view3d-annotation default" data-position="0 0.1 0">
<div class="view3d-annotation-tooltip default">Plane text description</div>
</div>
<div class="view3d-annotation default" data-position="0.3 0.3 0.3"></div>
</div>
</div>
```
<div class="view3d-annotation default" data-position="0 0.1 0">
<div class="view3d-annotation-tooltip default">Plane text description</div>
</div>
<div class="view3d-annotation default" data-position="0.3 0.3 0.3"></div>
</div>`} />

<View3D
src="/egjs-view3d/model/draco/alarm.glb"
Expand Down
7 changes: 7 additions & 0 deletions demo/docs/tutorials/Handling Events.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
sidebar_position: 7
---

import FrameworkEvents from "@site/src/components/tutorial/FrameworkEvents.mdx";

## Basics

You can handle the events that View3D triggers with 3 methods: `on`, `once`, `off`

```js
Expand Down Expand Up @@ -48,4 +52,7 @@ const view3D = new View3D("#el-id", {
});
```

## Frameworks
<FrameworkEvents />

See all available events in the [Events](/docs/events/ready) page.
27 changes: 26 additions & 1 deletion demo/docs/tutorials/Installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,45 @@ import CodeBlock from "@theme/CodeBlock";
## 📦 Package managers (recommended)
You can easily install Flicking with package managers like [npm](https://www.npmjs.com/) or [yarn](https://classic.yarnpkg.com/en/)

:::caution
View3D offers different packages for each framework.
For example, you have to install `@egjs/react-view3d` if you're using React.
:::

<Tabs
groupId="pm"
defaultValue="npm"
lazy={true}
values={[
{ label: "npm", value: "npm" },
{ label: "yarn", value: "yarn" }
{ label: "yarn", value: "yarn" },
{ label: "React", value: "react" },
{ label: "Angular", value: "ng" },
{ label: "Vue@2", value: "vue2" },
{ label: "Vue@3", value: "vue3" },
{ label: "Svelte", value: "svelte" }
]}>
<TabItem value="npm">
<CodeBlock className="language-shell">npm install @egjs/view3d</CodeBlock>
</TabItem>
<TabItem value="yarn">
<CodeBlock className="language-shell">yarn add @egjs/view3d</CodeBlock>
</TabItem>
<TabItem value="react">
<CodeBlock className="language-shell">npm install @egjs/react-view3d</CodeBlock>
</TabItem>
<TabItem value="ng">
<CodeBlock className="language-shell">npm install @egjs/ngx-view3d</CodeBlock>
</TabItem>
<TabItem value="vue2">
<CodeBlock className="language-shell">npm install @egjs/vue-view3d</CodeBlock>
</TabItem>
<TabItem value="vue3">
<CodeBlock className="language-shell">npm install @egjs/vue3-view3d</CodeBlock>
</TabItem>
<TabItem value="svelte">
<CodeBlock className="language-shell">npm install @egjs/svelte-view3d</CodeBlock>
</TabItem>
</Tabs>

## 🔗 CDN Links
Expand Down
89 changes: 37 additions & 52 deletions demo/docs/tutorials/Quick Start.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,44 @@ import View3D from "@site/src/components/View3D";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import License from "@site/src/components/License";
import VanillaQuickStart from "@site/src/components/tutorial/vanilla/QuickStart.mdx";
import ReactQuickStart from "@site/src/components/tutorial/react/QuickStart.mdx";
import NgxQuickStart from "@site/src/components/tutorial/angular/QuickStart.mdx";
import Vue2QuickStart from "@site/src/components/tutorial/vue2/QuickStart.mdx";
import Vue3QuickStart from "@site/src/components/tutorial/vue3/QuickStart.mdx";
import SvelteQuickStart from "@site/src/components/tutorial/svelte/QuickStart.mdx";

## DOM Structure
View3D requires appropriate DOM structure for initialization.
There should be one `canvas` element inside the wrapper element.

```html
<div id="wrapper-el" class="view3d-wrapper view3d-square">
<canvas class="view3d-canvas"></canvas>
</div>
```
```js
new View3D("#wrapper-el");
```

All class names are optional, but it's needed when you're using our CSS files.
<Tabs
groupId="framework"
defaultValue="js"
lazy={true}
values={[
{ label: "Javascript", value: "js" },
{ label: "React", value: "react" },
{ label: "Angular", value: "ng" },
{ label: "Vue@2", value: "vue2" },
{ label: "Vue@3", value: "vue3" },
{ label: "Svelte", value: "svelte" }
]}>
<TabItem value="js">
<VanillaQuickStart />
</TabItem>
<TabItem value="react">
<ReactQuickStart />
</TabItem>
<TabItem value="ng">
<NgxQuickStart />
</TabItem>
<TabItem value="vue2">
<Vue2QuickStart />
</TabItem>
<TabItem value="vue3">
<Vue3QuickStart />
</TabItem>
<TabItem value="svelte">
<SvelteQuickStart />
</TabItem>
</Tabs>

### Ratio helper classes
The class `view3d-square`(or `view3d-1by1`) will set the height of canvas element same to its width.
Expand Down Expand Up @@ -56,44 +79,6 @@ You can also can set canvas width/height without ratio class but with CSS like t
}
```

## Setup Script & Styles
<Tabs
groupId="quick-start"
defaultValue="bundler"
lazy={true}
values={[
{ label: "With bundlers", value: "bundler" },
{ label: "Without bundlers", value: "non-bundler" }
]}>
<TabItem value="bundler">

```js
import View3D from "@egjs/view3d";
import "@egjs/view3d/css/view3d-bundle.min.css";
// or import "@egjs/view3d/css/view3d.min.css"; if you don't use any plugins

const view3D = new View3D("#view3d", {
// Options
})
```

</TabItem>
<TabItem value="non-bundler">

```html
<script src="https://unpkg.com/@egjs/view3d@latest/dist/view3d.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@egjs/view3d@latest/css/view3d-bundle.min.css">
```

```js
const view3D = new View3D("#view3d", {
// Options
})
```

</TabItem>
</Tabs>

## Displaying a model
3D model will be displayed on the canvas if you set the option `src`.

Expand Down
9 changes: 3 additions & 6 deletions demo/docs/tutorials/Reset Camera.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,11 @@
sidebar_position: 5
---

import ElementExample from "@site/src/components/ElementExample";

You can reset the camera to default [Pose](/docs/api/Pose) by calling [camera.reset](/docs/api/Camera#reset)

```html
<div class="view3d-wrapper">
<canvas class="view3d-canvas"></canvas>
<button id="reset">Reset Camera</button>
</div>
```
<ElementExample el={`<button id="reset">Reset Camera</button>`} />

Add a click handler to button that calls `camera.reset`.

Expand Down
2 changes: 1 addition & 1 deletion demo/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const config = {
customCss: [
require.resolve("./src/css/custom.css"),
require.resolve("./src/css/global.css"),
require.resolve("../sass/view3d-bundle.sass"),
require.resolve("../packages/view3d/sass/view3d-bundle.sass"),
require.resolve("./src/css/bulma-override.sass"),
require.resolve("rc-slider/assets/index.css")
]
Expand Down
Loading

0 comments on commit bedca34

Please sign in to comment.