diff --git a/examples/showcase/painter/components/brush.js b/examples/showcase/painter/components/brush.js index 6bfc35a1e06..f374d00cbb4 100644 --- a/examples/showcase/painter/components/brush.js +++ b/examples/showcase/painter/components/brush.js @@ -2,7 +2,8 @@ AFRAME.registerComponent('brush', { schema: { color: {type: 'color', default: '#ef2d5e'}, - size: {default: 0.01, min: 0.001, max: 0.3}, + size: {default: 0.01, min: 0.001, max: 1.0}, + pressureMultiplier: {default: 5.0, min: 0.01, max: 10.0}, enabled: {default: true}, hand: {default: 'left'} }, @@ -15,6 +16,7 @@ AFRAME.registerComponent('brush', { this.stroke = null; this.buttonsDown = 0; this.touches = 0; + this.sizeFactor = 1.0; this.onTouchStarted = this.onTouchStarted.bind(this); el.addEventListener('tiptouchstart', this.onTouchStarted); @@ -26,6 +28,9 @@ AFRAME.registerComponent('brush', { this.onButtonUp = this.onButtonUp.bind(this); el.addEventListener('buttonup', this.onButtonUp); + this.onButtonChanged = this.onButtonChanged.bind(this); + el.addEventListener('buttonchanged', this.onButtonChanged); + this.onControllerConnected = this.onControllerConnected.bind(this); el.addEventListener('controllerconnected', this.onControllerConnected); @@ -68,6 +73,16 @@ AFRAME.registerComponent('brush', { this.painting = false; }, + onButtonChanged: function (evt) { + if (!this.data.enabled) { return; } + if (!this.painting) { return; } + if (evt.detail.state.value === 1) { + this.sizeFactor = 1.0; + } else { + this.sizeFactor = evt.detail.state.value * this.data.pressureMultiplier; + } + }, + tick: (function () { var position = new THREE.Vector3(); var rotation = new THREE.Quaternion(); @@ -84,12 +99,13 @@ AFRAME.registerComponent('brush', { } this.el.object3D.matrixWorld.decompose(position, rotation, scale); var pointerPosition = this.getPointerPosition(position, rotation); + this.stroke.setSize(this.data.size * this.sizeFactor); this.stroke.addPoint(position, rotation, pointerPosition); }; })(), startNewStroke: function () { - this.stroke = this.system.addNewStroke(this.color, this.data.size); + this.stroke = this.system.addNewStroke(this.color, this.data.size * this.sizeFactor); }, getPointerPosition: (function () { diff --git a/examples/showcase/painter/stroke-geometry.js b/examples/showcase/painter/stroke-geometry.js index e46d619b175..719ebb54546 100644 --- a/examples/showcase/painter/stroke-geometry.js +++ b/examples/showcase/painter/stroke-geometry.js @@ -94,6 +94,15 @@ StrokeGeometry.prototype = { this.currentGeometry.attributes.normal.setXYZ(this.indices.normal++, x, y, z); }, + setSize: (function () { + return function (size) { + if (this.size === size) { + return; + } + this.size = size; + }; + })(), + addPoint: (function () { var direction = new THREE.Vector3(); var vertexA = new THREE.Vector3(); diff --git a/src/components/logitech-mx-ink-controls.js b/src/components/logitech-mx-ink-controls.js index 701b3c738f3..00922feb9e3 100644 --- a/src/components/logitech-mx-ink-controls.js +++ b/src/components/logitech-mx-ink-controls.js @@ -120,7 +120,7 @@ export var Component = registerComponent('logitech-mx-ink-controls', { var controllerObject3D = this.controllerObject3D; if (!this.data.model) { return; } if (controllerObject3D) { - controllerObject3D.visible = this.el.sceneEl.is('vr-mode'); + controllerObject3D.visible = this.el.sceneEl.is('vr-mode') || this.el.sceneEl.is('ar-mode'); this.el.setObject3D('mesh', controllerObject3D); return; } @@ -163,7 +163,7 @@ export var Component = registerComponent('logitech-mx-ink-controls', { }); this.controllerObject3D = this.el.getObject3D('mesh'); - this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode'); + this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode') || this.el.sceneEl.is('ar-mode'); }, onAxisMoved: function (evt) {