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

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit