add simple HandleStore example to handle-vanilla

Author: bbohlender

examples/handle-vanilla/index.ts

@@ -11,7 +11,15 @@ import {
   WebGLRenderer,
 } from 'three'
 import { PointerEventsMap, forwardHtmlEvents } from '@pmndrs/pointer-events'
-import { OrbitHandles, PivotHandles, RotateHandles, TransformHandles, TranslateHandles } from '@pmndrs/handle'
+import {
+  OrbitHandles,
+  PivotHandles,
+  RotateHandles,
+  TransformHandles,
+  TranslateHandles,
+  HandleStore,
+} from '@pmndrs/handle'
+import { createXRStore } from '@pmndrs/xr'
 
 const camera = new PerspectiveCamera(70, 1, 0.01, 100)
 camera.position.set(0, 0, 2)
@@ -28,13 +36,10 @@ const box1 = new Mesh<BoxGeometry, MeshBasicMaterial, Object3DEventMap & Pointer
 )
 pivot.add(box1)
 
-const x = new Group()
-scene.add(x)
-
 const transform = new TransformHandles()
 transform.rotation.y = Math.PI / 4
 transform.position.z = -2
-x.add(transform)
+scene.add(transform)
 transform.bind('translate')
 transform.space = 'local'
 
@@ -44,6 +49,17 @@ const box2 = new Mesh<BoxGeometry, MeshBasicMaterial, Object3DEventMap & Pointer
 )
 transform.add(box2)
 
+const box3 = new Mesh<BoxGeometry, MeshBasicMaterial, Object3DEventMap & PointerEventsMap>(
+  new BoxGeometry(),
+  new MeshBasicMaterial({ color: 'blue' }),
+)
+box3.position.set(1, 1, 1)
+//providing the target object
+const handleStore = new HandleStore(box3)
+//binding to the handle object
+handleStore.bind(box3)
+scene.add(box3)
+
 const canvas = document.getElementById('root') as HTMLCanvasElement
 
 //orbit (controls)
@@ -53,15 +69,23 @@ orbit.bind(scene, true)
 const { update: updateForwardHtmlEvents } = forwardHtmlEvents(canvas, () => camera, scene)
 
 const renderer = new WebGLRenderer({ antialias: true, canvas })
+renderer.xr.enabled = true
+
+const store = createXRStore(canvas, scene, () => camera, renderer.xr, {
+  emulate: false,
+  /*since we already set it up seperately for demonstration purposes*/ htmlInput: false,
+})
 
 let prevTime: number | undefined
-renderer.setAnimationLoop((time) => {
+renderer.setAnimationLoop((time, frame) => {
   const deltaTime = prevTime == null ? 0 : time - prevTime
   prevTime = time
   updateForwardHtmlEvents()
   orbit.update(deltaTime)
   pivot.update(time, camera)
   transform.update(time, camera)
+  handleStore.update(deltaTime)
+  store.update(frame, deltaTime)
   renderer.render(scene, camera)
 })
 

examples/handle-vanilla/package.json

@@ -1,9 +1,10 @@
 {
   "dependencies": {
     "@pmndrs/pointer-events": "workspace:~",
-    "@pmndrs/handle": "workspace:~"
+    "@pmndrs/handle": "workspace:~",
+    "@pmndrs/xr": "workspace:~"
   },
   "scripts": {
-    "dev": "vite"
+    "dev": "vite --host"
   }
 }

examples/handle-vanilla/vite.config.ts

@@ -1,12 +1,14 @@
 import path from 'path'
 import { defineConfig } from 'vite'
+import basicSsl from '@vitejs/plugin-basic-ssl'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  plugins: [basicSsl()],
   build: {
     outDir: './dist',
   },
-  base: '/pointer-events/',
+  base: '/handle-vanilla/',
   resolve: {
     alias: [
       {

examples/vanilla/index.ts

@@ -10,8 +10,7 @@ import {
   Scene,
   WebGLRenderer,
 } from 'three'
-import { reversePainterSortStable, Container, Fullscreen, Image, Text, Svg, Content, Root } from '@pmndrs/uikit'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { reversePainterSortStable, Container, Image, Text, Svg, Root } from '@pmndrs/uikit'
 import { Delete } from '@pmndrs/uikit-lucide'
 
 const camera = new PerspectiveCamera(70, 1, 0.01, 100)
@@ -125,9 +124,9 @@ renderer.setAnimationLoop((time, frame) => {
   const delta = prevTime == null ? 0 : time - prevTime
   prevTime = time
   box.rotation.y = time * 0.0001
+  root.update(delta / 1000)
   store.update(frame, delta)
   renderer.render(scene, camera)
-  root.update(0.016)
 })
 renderer.localClippingEnabled = true
 renderer.setTransparentSort(reversePainterSortStable)