Simple headless

If you are fimilar with the Javascript eco system, all you need to do is to set up the backend service and install buerli.

In order to consume npm modules you must have Node installed on your computer, we recommend LTS (Node 16.x). The next step is to set up a development environment. Any of the usual build systems and bundlers are fine: Webpack, Vite, Parcel, Create-react-app, etc. If you want to get up and running quickly, try vite.

⚠️ You must have the ClassCAD Server running in order to use buerli

Installing Vite#

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience.

You install it like so

npm create vite

Pick a template (for instance "javascript") and follow the instructions.

Installing Buerli and Threejs#

npm install @buerli.io/headless three

Start the dev environment#

npm run dev

The CLI should output an URL, click it and you are live! Any change made to the source files will be reflected in the browser immediately!

Setting up main.js using Solid API#

import * as THREE from 'three'
import { init, SocketIOClient } from '@buerli.io/classcad'
import { solid } from '@buerli.io/headless'

// Set up threejs
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 10

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// Set up buerli, the URL is specific to how you configure the ClassCAD Server
init((id) => new SocketIOClient('ws://localhost:9091', id))
const cad = new solid()

cad.init(async api => {
  const box = api.box(1, 1, 1)
  const geom = await api.createBufferGeometry(box)
  const mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial())
  scene.add(mesh)
  renderer.render(scene, camera)
})

Setting up main.js using History API#

import * as THREE from 'three'
import { init, SocketIOClient } from '@buerli.io/classcad'
import { history } from '@buerli.io/headless'

// Set up threejs
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 10

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// Set up buerli, the URL is specific to how you configure the ClassCAD Server
init((id) => new SocketIOClient('ws://localhost:9091', id))
const cad = new history()

cad.init(async api => {
  const part = await api.createPart('part')
  await api.box(part, [], 1, 1, 1)
  const geoms = await api.createBufferGeometry(part)
  const meshes = geoms.map(
    geom =>
      new THREE.Mesh(
        geom,
        new THREE.MeshNormalMaterial()),
      )
  scene.add(...meshes)
  renderer.render(scene, camera)
})