Skip to content

Commit

Permalink
Deployed 4e3fe8e with MkDocs version: 1.2.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@alemart
alemart committed Oct 9, 2024
1 parent 8c993ef commit cb78773
Show file tree
Hide file tree
Showing 12 changed files with 207 additions and 108 deletions.
Empty file removed demos/hello-aframe/demo.js
View file
Empty file.
2 changes: 1 addition & 1 deletion demos/hello-aframe/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
<!-- Magic circle -->
<a-plane width="4" height="4"
material="src: #magic-circle; color: #beefff; side: double; shader: flat; transparent: true; opacity: 1"
animation="property: object3D.rotation.z; from: 360; to: 0; dur: 4000; loop: true; easing: linear">
animation="property: object3D.rotation.z; from: 360; to: 0; dur: 8000; loop: true; easing: linear">
</a-plane>

</a-entity>
Expand Down
2 changes: 1 addition & 1 deletion demos/hello-aframe/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
<!-- Magic circle -->
<a-plane width="4" height="4"
material="src: #magic-circle; color: #beefff; side: double; shader: flat; transparent: true; opacity: 1"
animation="property: object3D.rotation.z; from: 360; to: 0; dur: 4000; loop: true; easing: linear">
animation="property: object3D.rotation.z; from: 360; to: 0; dur: 8000; loop: true; easing: linear">
</a-plane>

</a-entity>
Expand Down
2 changes: 1 addition & 1 deletion demos/hello-three/NOTICE.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h1>Attribution Notices</h1>
<a href="https://threejs.org" target="_blank" rel="external">https://threejs.org</a>
</li>
</ol>
<p>This application also contains a 3D model of a mage by <a href="https://kaylousberg.com" target="_blank" rel="external">Kay Lousberg</a>, released under the <a href="#cc0">Creative Commons Zero 1.0 Universal</a>.</p>
<p>This application also contains a 3D model of a mage by <a href="https://kaylousberg.com" target="_blank" rel="external">Kay Lousberg</a> and a 3D model of a cat by <a href="https://opengameart.org/content/cat-pilot-rigged-animated" target="_blank" rel="external">Tomcat94</a>, both released under the <a href="#cc0">Creative Commons Zero 1.0 Universal</a>.</p>
<hr>

<h2 id="lgpl">GNU Lesser General Public License</h2>
Expand Down
2 changes: 1 addition & 1 deletion demos/hello-three/README.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
</head>
<body>
<h1>encantAR.js with three.js</h1>
<p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
<p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/mage.webp" target="_blank">this cartoon</a> or <a href="../assets/cat.webp" target="_blank">this picture</a>.</p>

<h2>Menu</h2>
<ul>
Expand Down
191 changes: 144 additions & 47 deletions demos/hello-three/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class DemoUtils
return gltf;
}

createAnimationAction(gltf, name = null)
createAnimationAction(gltf, name = null, loop = THREE.LoopRepeat)
{
const mixer = new THREE.AnimationMixer(gltf.scene);
const clips = gltf.animations;
Expand All @@ -43,6 +43,7 @@ class DemoUtils

const clip = THREE.AnimationClip.findByName(clips, name);
const action = mixer.clipAction(clip);
action.loop = loop;

return action;
}
Expand All @@ -66,7 +67,7 @@ class DemoUtils
ar.root.rotation.set(-Math.PI / 2, 0, 0);
}

referenceImage(ar)
referenceImageName(ar)
{
if(ar.frame === null)
return null;
Expand All @@ -75,23 +76,13 @@ class DemoUtils
if(result.tracker.type == 'image-tracker') {
if(result.trackables.length > 0) {
const trackable = result.trackables[0];
return trackable.referenceImage;
return trackable.referenceImage.name;
}
}
}

return null;
}

referenceImageName(ar)
{
const referenceImage = this.referenceImage(ar);

if(referenceImage === null)
return null;

return referenceImage.name;
}
}


Expand Down Expand Up @@ -126,10 +117,16 @@ class DemoScene extends ARScene
}

const tracker = AR.Tracker.ImageTracker();
await tracker.database.add([{
name: 'my-reference-image',
image: document.getElementById('my-reference-image')
}]);
await tracker.database.add([
{
name: 'mage',
image: document.getElementById('mage')
},
{
name: 'cat',
image: document.getElementById('cat')
}
]);

const viewport = AR.Viewport({
container: document.getElementById('ar-viewport'),
Expand All @@ -138,9 +135,7 @@ class DemoScene extends ARScene

const video = document.getElementById('my-video');
const useWebcam = (video === null);
const source = useWebcam ?
AR.Source.Camera({ resolution: 'md' }) :
AR.Source.Video(video);
const source = useWebcam ? AR.Source.Camera() : AR.Source.Video(video);

const session = await AR.startSession({
mode: 'immersive',
Expand All @@ -157,12 +152,16 @@ class DemoScene extends ARScene
session.gizmos.visible = false;
if(scan)
scan.hidden = true;

this._onTargetFound(event.referenceImage);
});

tracker.addEventListener('targetlost', event => {
session.gizmos.visible = true;
if(scan)
scan.hidden = false;

this._onTargetLost(event.referenceImage);
});

return session;
Expand All @@ -180,56 +179,154 @@ class DemoScene extends ARScene
// Adjusting ar.root will adjust all virtual objects.
this._utils.switchToFrontView(ar);
ar.root.position.set(0, -0.5, 0);
ar.root.scale.set(0.7, 0.7, 0.7);

// add light
// initialize objects
this._initLight(ar);
this._initText(ar);
this._initMagicCircle(ar);

await Promise.all([
this._initMage(ar),
this._initCat(ar),
]);
}

/**
* Update / animate the augmented scene
* @param {ARSystem} ar
* @returns {void}
*/
update(ar)
{
const delta = ar.session.time.delta; // given in seconds

// animate the objects of the scene
this._animateMagicCircle(delta);
this._animateMage(delta);
this._animateCat(delta);
}


// ------------------------------------------------------------------------


_initLight(ar)
{
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.intensity = 1.5;

ar.scene.add(ambientLight);
}

// create the magic circle
_initMagicCircle(ar)
{
// load the object
const magicCircle = this._utils.createImagePlane('../assets/magic-circle.png');
magicCircle.material.color = new THREE.Color(0xbeefff);
magicCircle.material.transparent = true;
magicCircle.material.opacity = 1;
magicCircle.scale.set(6, 6, 1);
magicCircle.scale.set(4, 4, 1);

// add the object to the scene
ar.root.add(magicCircle);

// save a reference
this._objects.magicCircle = magicCircle;
}

_initText(ar)
{
const text = this._utils.createImagePlane('../assets/it-works.png');
text.material.transparent = true;
text.material.opacity = 1;
text.position.set(0, -0.5, 2);
text.scale.set(3, 1.5, 1);
text.rotateX(Math.PI / 2);

ar.root.add(text);

this._objects.text = text;
}

async _initMage(ar)
{
// load the mage
const gltf = await this._utils.loadGLTF('../assets/mage.glb');
const mage = gltf.scene;
ar.root.add(mage);
mage.scale.set(0.7, 0.7, 0.7);

// prepare the animation of the mage
const animationAction = this._utils.createAnimationAction(gltf, 'Idle');
animationAction.loop = THREE.LoopRepeat;
animationAction.play();
const mageAction = this._utils.createAnimationAction(gltf, 'Idle');
mageAction.play();

// save objects
// add the mage to the scene
ar.root.add(mage);

// save references
this._objects.mage = mage;
this._objects.magicCircle = magicCircle;
this._objects.animationAction = animationAction;
this._objects.mageAction = mageAction;
}

/**
* Update / animate the augmented scene
* @param {ARSystem} ar
* @returns {void}
*/
update(ar)
async _initCat(ar)
{
const TWO_PI = 2.0 * Math.PI;
const ROTATIONS_PER_SECOND = 0.25;
const delta = ar.session.time.delta; // given in seconds
const gltf = await this._utils.loadGLTF('../assets/cat.glb');
const cat = gltf.scene;
cat.scale.set(0.7, 0.7, 0.7);

const catAction = this._utils.createAnimationAction(gltf, 'Cheer');
catAction.play();

ar.root.add(cat);

this._objects.cat = cat;
this._objects.catAction = catAction;
}

// animate the mage
const animationAction = this._objects.animationAction;
const mixer = animationAction.getMixer();
_animate(action, delta)
{
const mixer = action.getMixer();
mixer.update(delta);
}

_animateMage(delta)
{
this._animate(this._objects.mageAction, delta);
}

// animate the magic circle
const magicCircle = this._objects.magicCircle;
magicCircle.rotateZ(-TWO_PI * ROTATIONS_PER_SECOND * delta);
_animateCat(delta)
{
this._animate(this._objects.catAction, delta);
}

_animateMagicCircle(delta)
{
const TWO_PI = 2.0 * Math.PI;
const ROTATIONS_PER_SECOND = 1.0 / 8.0;

this._objects.magicCircle.rotateZ(-TWO_PI * ROTATIONS_PER_SECOND * delta);
}

_onTargetFound(referenceImage)
{
// change the scene based on the scanned image
switch(referenceImage.name) {
case 'mage':
this._objects.mage.visible = true;
this._objects.cat.visible = false;
this._objects.text.visible = false;
this._objects.magicCircle.material.color.set(0xbeefff);
break;

case 'cat':
this._objects.mage.visible = false;
this._objects.cat.visible = true;
this._objects.text.visible = true;
this._objects.magicCircle.material.color.set(0xffffaa);
break;
}
}

_onTargetLost(referenceImage)
{
}
}

Expand Down
3 changes: 2 additions & 1 deletion demos/hello-three/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<a id="about" href="NOTICE.html"></a>
</div>
</div>
<img id="my-reference-image" src="../assets/mage.webp" hidden>
<img id="mage" src="../assets/mage.webp" hidden>
<img id="cat" src="../assets/cat.webp" hidden>
</body>
</html>
3 changes: 2 additions & 1 deletion demos/hello-three/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
<a id="about" href="NOTICE.html"></a>
</div>
</div>
<img id="my-reference-image" src="../assets/mage.webp" hidden>
<img id="mage" src="../assets/mage.webp" hidden>
<img id="cat" src="../assets/cat.webp" hidden>
<video id="my-video" hidden muted loop playsinline autoplay>
<source src="../assets/my-video.webm" type="video/webm" />
<source src="../assets/my-video.mp4" type="video/mp4" />
Expand Down
4 changes: 2 additions & 2 deletions getting-started/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1565,10 +1565,10 @@
<h1 id="welcome-to-encantarjs">Welcome to encantAR.js!</h1>
<p><a href="https://github.com/alemart/encantar-js/releases/"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/alemart/encantar-js" /></a> <img alt="GitHub file size in bytes on a specified ref (branch/commit/tag)" src="https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&amp;label=minified%20js" /> <a href="https://github.com/alemart/encantar-js/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/alemart/encantar-js?logo=github" /></a> <a href="https://github.com/sponsors/alemart/"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?logo=github" /></a></p>
<p>Enchant your users with <strong>encantAR.js</strong>, a GPU-accelerated Augmented Reality engine for the web.</p>
<p><a class="md-button md-button--primary" href="introduction/">Learn now</a> <a class="md-button md-button" href="../demo/">Try a demo</a> <a class="md-button" href="../support-my-work/"><img alt="❤️" class="gemoji heart" src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png" title=":heart:" /> Support my work</a></p>
<p><a class="md-button md-button" href="../demos/"><img alt="✨" class="gemoji" src="https://github.githubassets.com/images/icons/emoji/unicode/2728.png" title=":sparkles:" /> Demos</a> <a class="md-button" href="introduction/"><img alt="📚" class="gemoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f4da.png" title=":books:" /> Learn</a> <a class="md-button" href="../support-my-work/"><img alt="❤️" class="gemoji heart" src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png" title=":heart:" /> Sponsor</a></p>
<h2 id="features">Features</h2>
<ul>
<li><strong>Runs everywhere</strong>: on Android, on iOS, and even on Desktop computers.</li>
<li><strong>Runs everywhere</strong>: on Android, on iOS, and even on Desktop computers!</li>
<li><strong>Image tracking</strong>: track detailed images such as book covers, cartoons and photos.</li>
</ul>
<h2 id="why-use-encantarjs">Why use encantAR.js?</h2>
Expand Down
2 changes: 1 addition & 1 deletion search/search_index.json
View file

Large diffs are not rendered by default.

Loading

0 comments on commit cb78773

Please sign in to comment.