Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A-Painter on AFrame 1.5 - Various fixes #278

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

A-Painter on AFrame 1.5 - Various fixes #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
0ab5c81
Replace THREE.Math with THREE.MathUtils
Elettrotecnica Mar 22, 2024
eeaa83e
Replace local blink-control component with better working one from CDN
Elettrotecnica Mar 22, 2024
121134f
Use latest A-Frame build from CDN
Elettrotecnica Mar 22, 2024
7cd47ed
Replace PlaneBufferGeometry with PlaneGeometry
Elettrotecnica Mar 22, 2024
ed878c4
Replace non-existing THREE.VertexColors with "true", as we want to co…
Elettrotecnica Mar 22, 2024
0ebbfeb
Address THREE reform of update ranges in r159
Elettrotecnica Mar 22, 2024
1d48368
Use existing primitives instead of generic entities, where applicable
Elettrotecnica Mar 22, 2024
076e0b0
Add crossorigin attribute to assets from CDN
Elettrotecnica Mar 22, 2024
21bcb84
Use aframe version including https://github.com/aframevr/aframe/pull/…
Elettrotecnica Mar 24, 2024
d367344
Add quest-touch-plus offset to brush-tip
Elettrotecnica Mar 24, 2024
352f1ff
Implement an approach to compute the stroke pointer position that doe…
Elettrotecnica Mar 25, 2024
6a6599a
Implement an approach to ensure tooltips are dynamically pointed to t…
Elettrotecnica Mar 25, 2024
d34b903
Replace THREE.XHRLoader with THREE.FileLoader
Elettrotecnica Mar 25, 2024
745fbb3
Update aframe-orbit-controls CDN URL
Elettrotecnica Mar 25, 2024
94464c9
Move tooltip logics into the system, fix tooltip lines not disappeari…
Elettrotecnica Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 61 additions & 38 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
<title>A-Painter</title>
<link rel="icon" href="img/icon-256.png">
<meta name="description" content="Paint in VR in your browser. Powered by A-Frame.">
<script src="vendor/aframe-master.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@a14dc2a266218c65a869f4e8cbafe3c855be0cb4/dist/aframe-master.min.js"></script>
<script src="vendor/aframe-input-mapping-component.js"></script>
<script src="build.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1.5.12/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-gltf-exporter-component@0.1.0/dist/aframe-gltf-exporter-component.min.js"></script>
<script src="vendor/aframe-blink-controls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls@0.4.3/dist/aframe-blink-controls.min.js"></script>
<script src="vendor/aframe-tooltip-component.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-orbit-controls@1.3.0/dist/aframe-orbit-controls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-orbit-controls@1.3.2/dist/aframe-orbit-controls.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
Expand All @@ -29,34 +29,47 @@
<a-asset-item id="uiobj" src="assets/models/ui.obj"></a-asset-item>
<a-asset-item id="hitEntityObj" src="assets/models/teleportHitEntity.obj"></a-asset-item>
<a-asset-item id="tipObj" src="assets/models/controller-tip.glb"></a-asset-item>
<audio id="ui_click0" src="https://cdn.aframe.io/a-painter/sounds/ui_click0.ogg">
<audio id="ui_click1" src="https://cdn.aframe.io/a-painter/sounds/ui_click1.ogg">
<audio id="ui_menu" src="https://cdn.aframe.io/a-painter/sounds/ui_menu.ogg">
<audio id="ui_undo" src="https://cdn.aframe.io/a-painter/sounds/ui_undo.ogg">
<audio id="ui_tick" src="https://cdn.aframe.io/a-painter/sounds/ui_tick.ogg">
<audio id="ui_paint" src="https://cdn.aframe.io/a-painter/sounds/ui_paint.ogg">
<audio crossorigin id="ui_click0" src="https://cdn.aframe.io/a-painter/sounds/ui_click0.ogg">
<audio crossorigin id="ui_click1" src="https://cdn.aframe.io/a-painter/sounds/ui_click1.ogg">
<audio crossorigin id="ui_menu" src="https://cdn.aframe.io/a-painter/sounds/ui_menu.ogg">
<audio crossorigin id="ui_undo" src="https://cdn.aframe.io/a-painter/sounds/ui_undo.ogg">
<audio crossorigin id="ui_tick" src="https://cdn.aframe.io/a-painter/sounds/ui_tick.ogg">
<audio crossorigin id="ui_paint" src="https://cdn.aframe.io/a-painter/sounds/ui_paint.ogg">
</a-assets>
<a-light type="point" light="color: #fff; intensity:0.6" position="3 10 1"></a-light>
<a-light type="point" light="color: #fff; intensity:0.2" position="-3 -10 0"></a-light>
<a-light type="hemisphere" groundColor="#888" intensity="0.8"></a-light>
<a-entity id="logo" logo-model
animation="dur: 4000; property: logo-model.opacity; from: 1; to: 0; startEvents: painting-started"></a-entity>
<a-entity id="ground"
geometry="primitive: box; width: 12; height: 0.01; depth: 12"
material="shader: flat; src: #floor">
</a-entity>
<a-entity id="sky" geometry="primitive:sphere; radius:30; phiLength:360; phiStart:0; thetaLength:90" material="shader:flat; side:back; height:2048; src:#skymap; width:2048"></a-entity>
<a-box id="ground"
width="12"
height="0.01"
depth="12"
material="shader:flat"
src="#floor">
</a-box>
<a-sky id="sky"
radius="30"
theta-length="90"
src="#skymap">
</a-sky>

<a-entity id="hitEntityLeft" material="shader:flat; color: #ff3468" obj-model="obj: #hitEntityObj"></a-entity>
<a-entity id="hitEntityRight" material="shader:flat; color: #ff3468" obj-model="obj: #hitEntityObj"></a-entity>
<a-obj-model id="hitEntityLeft"
material="shader:flat; color: #ff3468"
src="#hitEntityObj">
</a-obj-model>
<a-obj-model id="hitEntityRight"
material="shader:flat; color: #ff3468"
src="#hitEntityObj">
</a-obj-model>
<a-entity id="cameraRig">
<!-- camera -->
<a-entity id="acamera" camera></a-entity>
<!-- hand controls -->
<a-entity id="left-hand"
brush
paint-controls="hand: left"
blink-controls="cameraRig: #cameraRig; startEvents: aim; endEvents: teleport; hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; hitEntity: #hitEntityLeft"
blink-controls="teleportOrigin: #acamera; cameraRig: #cameraRig; startEvents: aim; endEvents: teleport; hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; hitEntity: #hitEntityLeft"
ui>
<a-entity class="vive-tooltips" visible="false">
<a-entity tooltip="text: Brush size\n(slide up/down); width: 0.1; height: 0.04; targetPosition: 0 0.016 0.0073; src: assets/images/tooltip.png"
Expand All @@ -77,20 +90,25 @@
</a-entity>
</a-entity>
<a-entity class="oculus-tooltips" visible="false">
<a-entity tooltip="text: Main Menu; width: 0.07; height: 0.03; targetPosition: 0.011 0.005 0.045; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.12 0.016 0.06">
<a-entity data-tooltip="menu"
tooltip="text: Main Menu; width: 0.07; height: 0.03; targetPosition: 0.011 0.005 0.045; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.12 0.016 0.06">
</a-entity>
<a-entity tooltip="text: Teleport; width: 0.06; height: 0.03; targetPosition: 0.015 0 0.035; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.08 0.035 -0.02">
<a-entity data-tooltip="teleport"
tooltip="text: Teleport; width: 0.06; height: 0.03; targetPosition: 0.015 0 0.035; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.08 0.035 -0.02">
</a-entity>
<a-entity tooltip="text: Brush size\n(slide up/down); width: 0.09; height: 0.04; targetPosition: 0 0.01 0.03; lineHorizontalAlign: center; lineVerticalAlign: top; rotation: -90 0 0; src: assets/images/tooltip.png"
position="-0.07 0.01 0.093">
<a-entity data-tooltip="brush-size"
tooltip="text: Brush size\n(slide up/down); width: 0.09; height: 0.04; targetPosition: 0 0.01 0.03; lineHorizontalAlign: center; lineVerticalAlign: top; rotation: -90 0 0; src: assets/images/tooltip.png"
position="-0.07 0.01 0.093">
</a-entity>
<a-entity tooltip="text: Press to paint!\n(pressure sensitive); width: 0.11; height: 0.04; targetPosition: 0.022 -0.023 0.02; lineHorizontalAlign: right; rotation: -90 0 0; src: assets/images/tooltip.png"
position="-0.09 0.020 -0.067">
<a-entity data-tooltip="paint"
tooltip="text: Press to paint!\n(pressure sensitive); width: 0.11; height: 0.04; targetPosition: 0.022 -0.023 0.02; lineHorizontalAlign: right; rotation: -90 0 0; src: assets/images/tooltip.png"
position="-0.09 0.020 -0.067">
</a-entity>
<a-entity tooltip="text: Undo; width: 0.05; height: 0.03; targetPosition: 0.01 -0.03 0.047; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.07 -0.01 0.088">
<a-entity data-tooltip="undo"
tooltip="text: Undo; width: 0.05; height: 0.03; targetPosition: 0.01 -0.03 0.047; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.07 -0.01 0.088">
</a-entity>
</a-entity>
<a-entity class="windows-motion-samsung-tooltips" visible="false">
Expand Down Expand Up @@ -133,7 +151,7 @@
<a-entity id="right-hand"
brush
paint-controls="hand: right"
blink-controls="cameraRig: #cameraRig; startEvents: aim; endEvents: teleport; hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; hitEntity: #hitEntityRight"
blink-controls="teleportOrigin: #acamera; cameraRig: #cameraRig; startEvents: aim; endEvents: teleport; hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; hitEntity: #hitEntityRight"
ui>
<a-entity class="vive-tooltips" visible="false">
<a-entity tooltip="text: Brush size\n(slide up/down); width: 0.1; height: 0.04; targetPosition: 0 0.016 0.0073; src: assets/images/tooltip.png"
Expand All @@ -154,20 +172,25 @@
</a-entity>
</a-entity>
<a-entity class="oculus-tooltips" visible="false">
<a-entity tooltip="text: Main Menu; width: 0.07; height: 0.03; targetPosition: -0.011 0.005 0.045; rotation: -90 0 0; lineHorizontalAlign: right; src: assets/images/tooltip.png"
position="-0.12 0.016 0.06">
<a-entity data-tooltip="menu"
tooltip="text: Main Menu; width: 0.07; height: 0.03; targetPosition: -0.011 0.005 0.045; rotation: -90 0 0; lineHorizontalAlign: right; src: assets/images/tooltip.png"
position="-0.12 0.016 0.06">
</a-entity>
<a-entity tooltip="text: Teleport; width: 0.06; height: 0.03; targetPosition: -0.015 0 0.035; rotation: -90 0 0; lineHorizontalAlign: right; src: assets/images/tooltip.png"
position="-0.08 0.035 -0.02">
<a-entity data-tooltip="teleport"
tooltip="text: Teleport; width: 0.06; height: 0.03; targetPosition: -0.015 0 0.035; rotation: -90 0 0; lineHorizontalAlign: right; src: assets/images/tooltip.png"
position="-0.08 0.035 -0.02">
</a-entity>
<a-entity tooltip="text: Brush size\n(slide up/down); width: 0.09; height: 0.04; targetPosition: 0 0.01 0.03; lineHorizontalAlign: center; lineVerticalAlign: top; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.07 0.01 0.093">
<a-entity data-tooltip="brush-size"
tooltip="text: Brush size\n(slide up/down); width: 0.09; height: 0.04; targetPosition: 0 0.01 0.03; lineHorizontalAlign: center; lineVerticalAlign: top; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.07 0.01 0.093">
</a-entity>
<a-entity tooltip="text: Press to paint!\n(pressure sensitive); width: 0.11; height: 0.04; targetPosition: -0.022 -0.023 0.02; lineHorizontalAlign: left; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.09 0.020 -0.067">
<a-entity data-tooltip="paint"
tooltip="text: Press to paint!\n(pressure sensitive); width: 0.11; height: 0.04; targetPosition: -0.022 -0.023 0.02; lineHorizontalAlign: left; rotation: -90 0 0; src: assets/images/tooltip.png"
position="0.09 0.020 -0.067">
</a-entity>
<a-entity tooltip="text: Undo; width: 0.05; height: 0.03; targetPosition: -0.01 -0.03 0.047; rotation: -90 0 0; lineHorizontalAlign: right; src: assets/images/tooltip.png"
position="-0.07 -0.01 0.088">
<a-entity data-tooltip="undo"
tooltip="text: Undo; width: 0.05; height: 0.03; targetPosition: -0.01 -0.03 0.047; rotation: -90 0 0; lineHorizontalAlign: right; src: assets/images/tooltip.png"
position="-0.07 -0.01 0.088">
</a-entity>
</a-entity>
<a-entity class="windows-motion-samsung-tooltips" visible="false">
Expand Down
6 changes: 3 additions & 3 deletions src/brushes/line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,22 @@ var onLoaded = require('../onloaded.js');

onLoaded(function () {
var optionsBasic = {
vertexColors: THREE.VertexColors,
vertexColors: true,
side: THREE.DoubleSide
};

var optionsStandard = {
roughness: 0.75,
metalness: 0.25,
vertexColors: THREE.VertexColors,
vertexColors: true,
map: window.atlas.map,
side: THREE.DoubleSide
};

var optionTextured = {
roughness: 0.75,
metalness: 0.25,
vertexColors: THREE.VertexColors,
vertexColors: true,
side: THREE.DoubleSide,
map: window.atlas.map,
transparent: true,
Expand Down
4 changes: 2 additions & 2 deletions src/brushes/stamp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ var onLoaded = require('../onloaded.js');
var shaded = new THREE.MeshStandardMaterial({
side: THREE.DoubleSide,
map: window.atlas.map,
vertexColors: THREE.VertexColors,
vertexColors: true,
transparent: true,
alphaTest: 0.5,
roughness: 0.75,
Expand All @@ -17,7 +17,7 @@ var onLoaded = require('../onloaded.js');
var flat = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
map: window.atlas.map,
vertexColors: THREE.VertexColors,
vertexColors: true,
transparent: true,
alphaTest: 0.5
});
Expand Down
11 changes: 10 additions & 1 deletion src/components/brush-tip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ AFRAME.registerComponent('brush-tip', {

init: function () {
var toRad = degrees => THREE.MathUtils.degToRad(degrees);

this.controllers = {
'oculus-touch-controller-v3': {
left: {
Expand All @@ -20,6 +19,16 @@ AFRAME.registerComponent('brush-tip', {
positionOffset: { x: 0, y: -0.025, z: -0.042 },
rotationOffset: { x: toRad(-45), y: toRad(-7), z: toRad(7) }
}
},
'quest-touch-plus': {
left: {
positionOffset: { x: 0, y: -0.025, z: -0.042 },
rotationOffset: { x: toRad(-45), y: toRad(7), z: toRad(-7) }
},
right: {
positionOffset: { x: 0, y: -0.025, z: -0.042 },
rotationOffset: { x: toRad(-45), y: toRad(-7), z: toRad(7) }
}
}
};

Expand Down
67 changes: 45 additions & 22 deletions src/components/paint-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,44 @@
AFRAME.registerSystem('paint-controls', {
numberStrokes: 0
numberStrokes: 0,
tooltipFadeEvent: new Event('tooltip-fade'),
tooltipsDisplayed: false,

showTooltips: function (controllerName) {
if (this.tooltipsDisplayed) { return; }

for (const tooltipGroup of Utils.getTooltips(controllerName)) {
tooltipGroup.setAttribute('visible', true);
for (const tooltip of tooltipGroup.querySelectorAll('[tooltip]')) {
tooltip.setAttribute('animation', {
dur: 1000,
delay: 2000,
property: 'tooltip.opacity',
from: 1.0,
to: 0.0,
startEvents: 'tooltip-fade'
});
tooltip.addEventListener('animationcomplete', this.hideTooltipLine, {once: true});
}
}

this.tooltipsDisplayed = true;
},

hideTooltips: function () {
this.numberStrokes++;

// 3 Strokes to hide
if (this.numberStrokes === 3) {
for (const tooltip of document.querySelectorAll('[tooltip]')) {
tooltip.dispatchEvent(this.tooltipFadeEvent);
}
}
},

hideTooltipLine: function (evt) {
const line = evt.target.getObject3D('line');
if (line) { line.visible = false; }
}
});

/* globals AFRAME THREE */
Expand Down Expand Up @@ -31,7 +70,7 @@ AFRAME.registerComponent('paint-controls', {
var magnitude = evt.detail.axis[1] || evt.detail.axis[3];
var delta = magnitude / 300;
var size = el.components.brush.schema.size;
var value = THREE.Math.clamp(self.el.getAttribute('brush').size - delta, size.min, size.max);
var value = THREE.MathUtils.clamp(self.el.getAttribute('brush').size - delta, size.min, size.max);

self.el.setAttribute('brush', 'size', value);
});
Expand All @@ -53,7 +92,7 @@ AFRAME.registerComponent('paint-controls', {

var startValue = self.el.getAttribute('brush').size;
var size = el.components.brush.schema.size;
var value = THREE.Math.clamp(startValue - delta, size.min, size.max);
var value = THREE.MathUtils.clamp(startValue - delta, size.min, size.max);

self.el.setAttribute('brush', 'size', value);
});
Expand Down Expand Up @@ -91,7 +130,6 @@ AFRAME.registerComponent('paint-controls', {
}
}

tooltipGroups = Utils.getTooltips(controllerName);
if (controllerName.indexOf('windows-motion') >= 0) {
// el.setAttribute('teleport-controls', {button: 'trackpad'});
} else if (controllerName === 'oculus-touch-controls') {
Expand All @@ -103,15 +141,7 @@ AFRAME.registerComponent('paint-controls', {
el.setAttribute('gltf-model', 'url(assets/models/vive-controller.glb)');
} else { return; }

if (!!tooltipGroups) {
tooltipGroups.forEach(function (tooltipGroup) {
tooltipGroup.setAttribute('visible', true);
const tooltips = Array.prototype.slice.call(tooltipGroup.querySelectorAll('[tooltip]'));
tooltips.forEach(function (tooltip) {
tooltip.setAttribute('animation', { dur: 1000, delay: 2000, property: 'tooltip.opacity', from: 1.0, to: 0.0, startEvents: 'tooltip-fade' });
});
});
}
self.system.showTooltips(controllerName);

this.controller = controllerName;
});
Expand All @@ -134,15 +164,8 @@ AFRAME.registerComponent('paint-controls', {
if (event.detail.entity.components['paint-controls'] !== self) { return; }

self.numberStrokes++;
self.system.numberStrokes++;

// 3 Strokes to hide
if (self.system.numberStrokes === 3) {
const tooltips = Array.prototype.slice.call(document.querySelectorAll('[tooltip]'));
tooltips.forEach(function (tooltip) {
tooltip.emit('tooltip-fade');
});
}

self.system.hideTooltips();
});
},

Expand Down
Loading