Vue OpenJscad

This is a Vue component wrapping an OpenJSCAD viewer. The component will respond to container resizes and generate the parameters table and export utilities.

This is intended as a way to embed a 3D viewer in a Vue application.

Caution: You can have only one element of open-jscad!

Currently, you can only have one element on a page. There is an issue where OpenJSCAD only renders to the last element.

OpenJscad example:

<open-jscad
    design="gearset.jscad"
    :panel="{ size: 223 }"
    :camera="{
    position: { x: 0, y: 0, z: 150 },
    clip: { min: 1, max: 500 }
    }"
></open-jscad>

Installation

To add vue-openjscad to a project, follow these steps.

First, install the package.

npm install @jwc/vue-OpenJscad

Import the package into your page and add it to the components list.

<script>
  import OpenJscad from '@jwc/vue-openjscad'

  export default {
    name: 'app',
    components: {
      OpenJscad,
    },
  }
</script>

Add an open-jscad element to your template.

<open-jscad
  design="gearset.jscad"
  :panel="{ size: 223 }"
  :camera="{
    position: { x: 0, y: 0, z: 150 },
    clip: { min: 1, max: 500 }
    }"
></open-jscad>

design is a url where a .jscad file is located. The component uses the fetch api to retrieve the desing and load it into the OpenJsCAD processor.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint