The task of making 3d models for games can feel daunting. In 2022, we have many tools to rapidly creating 3d models using scanning methods. I’m amazed how this robust computer science and computer vision technology has become accessible to makers and creatives. Let’s say you need to create a 3d model of a statue and 3d print a copy. In our post today, I wanted to connect our readers to a wonderful app called Trnio and a few others. For IPhone and Ipad users that have ARKit, maker can create impressive 3d models by recording a scan of their target objects or capturing pictures. The following video outlines the process for Trnio.
Under the hood, 3d scanning works by exploring each frame and computing the estimated camera position of the device. Using the camera position and feature points extracted from the frame, the system can do analysis of the movement of feature points over time. Using algorithms that extract 3d structure from motion, the app can estimate a model of the 3d object. Really cool stuff.
When testing this application with my kitchen table and few other car parts, I found the app easy to use with notable results. You can inspect some of the results of scans on SketchFab.
In the more recent editions of iOS devices, users have access to LIDAR scanners on these devices. The LIDAR sensor provides depth information more robustly to algorithms increasing 3d model quality. Fernado Herrera does a nice review of a few other scanning options that leverage LIDAR. He mentioned that the LIDAR scans worked best on large structures. I appreciated his comments on Qlone which focuses on scanning smaller items using a QR code template. The reviews looked a bit mixed on the app stores though.
We love to hear from our readers. If there’s another tool that you love for 3d scanning, please share in the comments. If you make something cool, please share that with us too!!
As I have time for small project experiments for myself, I decided to explore new developments with Phaser JS. In general, Phaser JS seems like a fun framework to enable novice game makers to build fun 2D games. The javascript language has become a popular choice since the language exists in every web browser.
In this blog post, we walk through building a small space shooter game.
As you start Phaser JS development, many tutorials walk you through some process to setup a web server to serve html and javascript content. Unfortunately, plain JavaScript alone does not guide makers to create well formed code. In plain Javascript, coders need to create stuff in baby steps. In this process, you should test stuff at each step. If you use a tool like Visual Studio code, the tool provides awesome guidance and autocomplete for devs. It would be nice if tools could improve to help you find more code faults and common syntax mistakes.
The TypeScript language invented by Anders Hejlsberg comes to the rescue. The TypeScript language and related coding tools provides robust feedback to the coder while constructing code. The JavaScript language does not support ideas like class structures or interfaces. Classes enable makers to describe a consistent template for making objects, their related methods, and properties. In a similar way, interfaces enable coders to describe the properties and methods connected to an object, but does not define implementations of methods. It turns out these ideas provide an increased structure and guidance to professional developers to create large applications using JavaScript. When your tools help you find mistakes faster, you feel like you move faster. This provides great support for early stage devs. TypeScript borrows patterns and ideas from C#, another popular language for game developers and business developers.
I found a pretty nice starter kit that integrates TypeScript, a working web server, and Phaser 3 JS together. Here’s the general steps for setting up your Phaser 3 development environment.
Install Visual Studio Code
This is my favorite code editor for web development.
NodeJs enables coders to create JavaScript tools outside of the browser.
npm – When you build software in modern times, tools that you build will depend upon other lego blocks. Those lego blocks may depend upon others. The node package manager makes it easy to install NodeJs tools and their related dependences.
Use the following blog post to install NodeJs and NPM
Your web browser should download the phaser3-rollup-typescript starter kit.
When the download is finished, unzip the master.zip file to a working folder.
On my environment, I have unziped the files to /home/michaelprosario/phaser3-rollup-typescript-master.
Finish the setup and run
cd /home/michaelprosario/phaser3-rollup-typescript-master
yarn install
yarn dev
At this point, you should see that the system has started a web server using vite. Open your browser to http://localhost:3000. You should see a bouncing Phaser logo.
Open up Visual Studio Code and start hacking
Type CTRL+C in the terminal to stop the web server.
In the terminal, type ‘code .’ to load Visual Studio Code for the current folder.
Once Visual Studio Code loads, select “Terminal > New Terminal”
In the terminal, execute ‘yarn dev’
This will run your development web server and provide feedback to the coder on syntax errors every time a file gets saved.
If everything compiles, the web server serves your game at http://localhost:3000
TypeScript Sample Code
Open src/scenes/Game.ts using Visual Studio Code. If you’ve done Java or some C#, the code style should feel more familiar.
import Phaser from 'phaser';
// Creates a scene called demo as a class
export default class Demo extends Phaser.Scene {
constructor() {
super('GameScene');
}
preload() {
// preload image asset into memory
this.load.image('logo', 'assets/phaser3-logo.png');
}
create() {
// add image to scene
const logo = this.add.image(400, 70, 'logo');
// bounce the logo using a tween
this.tweens.add({
targets: logo,
y: 350,
duration: 1500,
ease: 'Sine.inOut',
yoyo: true,
repeat: -1
});
}
}
Happy New Year friends! On this beautiful New Year’s day, I wanted to reflect upon some lessons from 2021 and learning opportunities for 2022. In 2022, we will continue to focus on ideas that help students love learning through exploration, making, and tinkering. As parents, we dream about helping our kids become the best version of themselves. It’s been fun to see how “maker education” and project based learning at home has encouraged growth in families.
Lessons from 2021 and learning at home
At this point, I would like to give a huge shout out to our teachers and professors who have served through this pandemic. We are so very thankful for the ways that you’ve invested in our kids and helped them to grow. They have helped our family adapt to learning from home for a significant portion of the year. Our kids did return to a traditional public school setting in the fall. We’re thankful for all the efforts of the staff and teachers to mitigate the concerns of COVID while fostering a positive learning environment.
At the Rosario home, I have tried to pay attention to hot spots of motivation and curiosity. If the kids start tinkering on the piano trying to figure out the Avenger’s theme, I’ve tried to make myself more available to encourage their musical exploration. My kids still enjoy creating their own music with Bandlab. We’ve also encouraged a good amount of traditional art with the kids. With the kid’s interest in Pokemon and Anime, they’ve become curious about drawing in this style. It’s been amazing to see the lessons they’ve learned through various drawing teachers on YouTube. Given that dad works as a software developer, it’s wonderful to see the kids engage in coding and building software. In future blog posts, we look forward to unpacking some of our more fruitful Scratch and Unity 3d tools. If your middle schooler or teen shows interest in video game development, the team at Unity 3D have continued to evolve their learning platform to be relevant to student creators. As a big kid myself, I’m still glad that our family enjoys Lego building together.
Space and wonder: I personally believe our SpaceX and NASA programs give our kids a sense of vision and potential. Over the Christmas break, the kids and I took in documentaries from NOVA on the Mars Perseverance rover and related missions. It’s so amazing the progress of our space programs in the past year. I do feel that the exploration of our universe and space travel helps keep a sense of awe and wonder about our world. It’s good the meditate upon how wonderfully complex and beautiful creation is.
Virtual Reality & Augmented Reality: In 2022, I look forward to exploring apps, trends, and tools that empower students to create XR experiences. I still continue to love the XR platform used for teaching and learning. It’s been fun to see the kids explore the International Space station in VR. In yet another experience, the Obama family unpacks the history of the white house in VR. I love that platforms like CoSpaces have started to empower young makers to build VR experiences with block coding. ( cospaces.io/edu/ )
Robots: My oldest son has expressed tons of interest in deep sea exploration. I have a feeling I’m going to start learning about playful games and simulation experiences to help him explore this. He’s found a very cool game called Subnautica that explores some of these ideas. In Subnautica, you are trying to survive an alien deep sea world using your resourcefulness and exploration skills. I do think that sea exploration using robots is really interesting. We look forward to explore trends and tools related to DIY IoT and robotics.
We are very thankful for our readers. Please know we pray for the very best for you and your family in 2022! If you have some cool projects that you’re doing with your kids, please drop us a line. We’d love to hear from you.
Hello! Hope that you and your family are having a great summer! Like many families, we’ve tried to find fun and constructive ways to engage the kids through the summer while they’re out of school. One of my friends asked me if I had any fun maker activities that involved coding. In this post, I wanted to give a shout out to a few things that have engaged my family.
Dance Pary 2019 from Code.org
One of my kids has become very motivated through the art of dance. With that in mind, I introduced her to this fun “hour of code” lesson from Code.org. In this lesson, makers become connected to block based programming while directing cartoon dancers. In the early lessons, students learn to trigger dance moves based on keyboard events. I find that students become very engaged with good music. These lessons enable students to design their own dance party to various popular songs. Check out Dance Party 2019 from Code.org. Please know that you can find many more engaging hour of code lessons from Code.org with your kid’s favorite characters. They’ve currated lessons that involve Minecraft, Frozen, Lego, and more.
CSFirst from Google – Digital Story Telling
In the maker education community, Scratch has become a cornerstone tool for teaching students to code. The gallery of Scratch.mit.edu enables you to review a broad range of stories and games built by the community. Scratch offers students a general purpose platform for creating games and interactive experiences. Google has put together a pretty cool set of lessons to guide students through their initial interactions with Scratch. Lessons involve experiences with art, digital story telling, and game design. My kids have enjoyed some of the game design lessons.
As artists and makers, we enjoy the process of creating something new from something old or familiar. The Makey Makey makes this possible. Makey makey is a USB device for your Mac or PC enabling makers of all ages to experiment with human computer interaction and inventing. The Makey makey interface enables you to design playful circuits and switches. The following videos describes the Makey makey in great detail with example experiments.
In our family, we’ve enjoyed playing with musical instrument building, controlling Minecraft with fruit, and constructing novel Nerf gun targets.
If you’re looking for project ideas with step by step instructions, you can check out the following link from Instructibles.
Hello makers! Like many in the computer industry, I had the dream of learning how to build video games. When the math class seemed difficult, I found inspiration to move forward since I had strong motivation to learn how to build video games someday! Unity 3D and their amazing community of game creators have created powerful opportunities for curious makers to build games that amaze your friends. From my first encounters with Unity 3D, I felt that they have done a good job of educating their users. In the past few years, I greatly admire the new strategies they have created to engage learners in their tools.
The idea of “modding” has engaged generations of gamers. (Thank you Minecraft and Roblox!). We’ve become used to the idea that games setup a robust environment where you can build big and crazy things. In lots of games, you’re placed into a position of saving the world. (i.e. you’ve been given a motivation to do something bigger than yourself that’s fun). The Unity 3D “microgame” tutorials provide students with the basic shell of well crafted game experiences. In this context, the Unity 3D team have created tutorial experience to gently guide learners through the Unity 3D environment, programming concepts, and their system for building Unity “lego” blocks. In this experience, you get to select your adventure. Do you want to build your own Lego game? Do you want to make your own version of Super Mario brothers? You can challenge yourself by building a cool kart racing game. In the videos below, I wanted to give a shout out to the Lego action “game jam” and the Kart Racing tutorials.
I always enjoy learning new Unity tricks from other developers. It has been fun to pick apart aspects of these games. In the newest Kart racing tutorials, you can also learn about the newer machine learning capabilities of Unity 3D. ( ML Agents ) It kind of blows my mind that these ideas can now appear in tutorials for early stage coders. As I’ve tested these experiences with my kids, they have enjoyed creating novel kart racing experiences and environments. My older son has enjoyed customizing his own shooter game.
If you make something cool, please share a link below in the comments!
Your First Game Jam: LEGO Ideas Edition
In this edition, you will discover how to build a quest in your LEGO® Microgame using the newly released “Speak” and “Counter” LEGO® Behaviour Bricks. Learn step-by-step with a special guest from the LEGO® Games division and our Unity team to create your own unique, shareable game.
Build Your Own Karting Microgame
It’s never been easier to start creating with Unity. From download to Microgame selection, to modding, playing, and sharing your first playable game, this video shows you what you can accomplish in as little as 30 minutes!
Like many other families, we really enjoy creating DIY Christmas ornaments. We collected a few inspirations for ornaments made with 3D printing, laser cutting, and origami. Hope you find something that inspires you!
Interested in Building Your Own Christmas Ornament using a 3D printer? Check out my getting started video here. In this video, we’ll help you build simple objects in just 5 minutes. TinkerCAD.com is crazy fun for makers of all ages. Keep in mind that your local library sometimes offers free 3D printing services.
This week we learn to fold a tropical bird, the very vibrant flamingo. Go all out with your creativity and make this #OrigamiFlamingo your own. Don’t forget to share your creations with us using #TimesPaperShaper and tag us for a chance to get featured. https://t.co/TD7I0LZaFo
Love organizing your little knick-knacks? Then choose the size and colour of your folding sheet & join us to fold your very own #Origami Star Box and remember to use #TimesPaperShaper & tag us while sharing your creations for a chance to get featured. https://t.co/yO8wBT8k4Z
Hello, family. In my post today, I wanted to reflect upon how our mom has loved and inspired her family through her life. I hope these stories of my mother, Belen Rosario, might offer motivation to other families. At InspiredToEducate.NET, our mission is to help students love learning through creative projects and exploration. Writing this post helped me understand my root system and personal curiosity for the power of learning and how a learning mindset can grow communities.
In my own way, I hope this post helps me and my family meditate on the life of my mother Belen. On Nov 20th, 2020, my mother celebrated her birthday into heaven after a challenging battle with cancer. I’m so excited that she’s finally at peace. I praise God that she enjoys the light and comfort of our heavenly Father and the amazing jam session of praise with all the saints and angels.
For my brother and I, we have been so blessed to have a loving mom and dad. Let’s be real. In the Rosario home, we’re not unlike any other family. We have our imperfections and vices. I, however, feel that my mom, Belen, lived out some of the best qualities of a Catholic momma. I hope I can foster her legacy of being a good Catholic parent.
My mom encouraged a spirit of generosity: Belen was born on Christmas day in 1945 to a loving family of teachers in the Philippines. Belen actually means Bethlehem in Spanish. My grandfather Pedro taught her family about the enabling power of learning. Grandpa Pedro had the vision of enabling his daughters and son to live a thriving life, but lacked the financial means to provide university education to all of his children. According to the family stories, Momma worked very hard in her schooling to explore the sciences and eventually earned a B.S. degree at University of Santo Tomas in Manilla in the Philippines. As she grew as a professional, she would live a modest life and send money back to her family. As a young adult, she earned an opportunity to immigrate to the United States which strongly needed medical technologists skilled in chemistry. She knew that making a transition to the US would take her away from her family in the Philippines, but knew that it would create greater opportunities for her and her larger family. My mom and my wonderful father Moses met while they both worked in a medical lab in New York. As I recall my mom’s words, she says “I’m not sure why this young guy kept following me around.” They, however, fell in love and started their family together. My mom and dad have always encouraged a spirit of generosity. They sent money back to the Philippines to help fund the education of her siblings. We’re proud of our momma who helped her family members earn degrees in engineering, medicine and finance. Mom’s story captures the best of the American dream. She came to the US with a spunky drive and educational opportunities. She converted those assets into a beautiful life for herself and opportunities for her family. I have loved hearing stories of how mom and dad helped Tita Gloria and Tito Ernie jumpstart their marriage and life in the US. While we didn’t have a lot, my mom and dad have lived out the “go giver” attitude to help friends in need. #ProudOfMom #ProudOfDad
Keeping the faith: One of the most precious gifts that mom and dad gave to us was the gift of faith. My mom and dad made great financial sacrifices to make sure Francis and I had the best in Catholic education. I also had the opportunity to attend Jesuit High school in Tampa, one of the finest Catholic schools in town. Given that we grew up in Florida, we grew up with the legends and stories of watching the space program. (from Apollo and to the Shuttle program) I can recall fun stories of my dad leading us through fun slide shows of exploring space. From my mom’s side, she did a great job of encouraging our curiosity in science. If we wanted to learn about something, we had a cool encyclopedia and tons of other educational materials so that we could explore our curiosity. Many people put science and faith into different boxes. We were blessed with a family that encouraged the wonder of science and understood that God’s hand orchestrated every detail. While we weren’t a perfect family, we learned the value of our faith, the habits of prayer, and the beautiful rituals of our Catholic faith. These habits have helped us shape our hearts for the Lord. As the family faced the trials of cancer for my mother and brother, I kept seeing my mom turn to Jesus and calling upon the mercy of Momma Mary through the rosary.
Fostering creativity and music: Great art and technical work requires the discipline of incremental practice, trial, failing, and persistence. I feel like Francis and I learned these lessons through our family culture of tinkering, art and music. My dad created opportunities to get early exposure to computers and their creative power. My first experiences with a computer gave us exposure to creating art on a computer or simple code experiments. My brother and I had robust opportunities to learn and explore music. We enjoyed our opportunities to learn violin, piano, and sing. ( And mom loved to sing!) To be honest, when we started playing violin it sounded like we were killing cats. Not sure how we progressed beyond that. At some later point, we gained enough skills to join our music ministry at Christ the King. Some of my favorite memories involve me and my brother getting to serve at 5:30 pm contemporary choirs, sharing music at the carnival and serving in youth ministry. My mom and dad largely supported the strengths of my brother in performing and visual art. It’s been cool to see his passions lean toward creative digital fabrication and digital media. On a personal level, I didn’t realize it at the time, but these became pivot points for preparing me for future work in music ministry later in college. I know these experiences helped us gain a growth mindset for our respective careers.
Toward the end, I helped my mom reflect upon the influence of her life. I talked about Pam and Wilson who met while serving in my campus ministry choir at UCF. Like many beautiful stories, Pam and Wilson fell in love through their shared passion for Christ and music. They have a beautiful Catholic family that I cherish. Since those precious years of being a founding member of Ccmknights.com and OviedoCatholic.org, hundreds of students have changed their lives because of their deep encounter with Jesus in these ministries. Holy men and women have decided to give their lives to Jesus as priests and nuns. Generations of Catholic families will continue to be born. My mom has beautiful spiritual grand-children because she planted the love of God and music in my heart. To return to the simple teaching of Mother Teresa, can loving your family truly change the world? It’s a great hypothesis for families to consider. It’s a hypothesis that we consider testing with our loved ones. I know our family will always be proud of our dearest Belen.
While we’re sad to lose momma on Earth, we’re excited for momma for her birthday in heaven. Can’t wait to hear the stories of her meeting Jesus, her mom, dad, and other dear ones in heaven. We’re so glad that she now enjoys a glorified body, the love of Christ, and no more pain. Excited to seek Lola Belen’s intersession. Saint Belen Rosario … Pray for us!!
Hello, friends. As our family tries to adapt to the new normal and the COVID pandemic, I wanted to start reflecting on how our family plans to promote a learning culture. Over the years, InspiredToEducate.NET has taken on the mission of helping students love learning through making, tinkering, and engineering. As working professionals, Sarah and I want to make sure we’re still providing the best learning environment for our kids. Like many other families, we have decided to home school/virtual school our kids due to health risks. To serve other parents struggling with these transitions, I wanted to share some the ideas we’ve researched. Make sure to check out the blog posts at the end of this article.
PRO’s of virtual school + home school approach
Personalized learning: In general, Sarah and I find the concept of personalized learning attractive. Every student has different strengths and weaknesses. The asynchronous nature of online learning can provide the student to learn at their own pace. In many cases, lectures will be assigned in recorded in video format. If you don’t understand something, you can always hit the pause button and rewind. Does your student need more context on a topic? Students can jump on YouTube and find a Khan academy video that probably complements the class material.
Gaining key career skills: It’s interesting to consider the 21st century career skills our kids will explore with online virtual school. In the spring, I greatly enjoyed seeing my son prepare a pretty awesome history presentation that he shared with his class. He was very intentional about the visual look of the slides. I also admired how he practiced his presentation for clarity. I know he aspires to run his own YouTube channel some day. So, he’s getting some pretty cool practice through this online learning experience. It’s important to reflect upon the long term benefits of the “online” learning modality.
Exploring game based learning, simulations and project based learning: Some online teachers have started leaning into the benefits of a flipped classroom model. Under this model, students take in videos/lectures as homework assignments. When the student and teacher have “face to face” time, they can leverage their interactions to clarify knowledge and explore. Some teachers have exploited learning games or hands-on learning projects to deepen knowledge.
Our honest pain points with home schooling/virtual schooling
As our family has moved to online learning out of necessity, I have gained a great respect for families who have decided to home school their kids outside the scope of the pandemic. The self discipline and habits required to make a great learning environment at home do not come naturally. It takes a lot of work.
In our family in the Spring, if we didn’t create a good plan for the week, we could easily miss assignments or support time for our kids. Like many families, Sarah and I both work full time jobs with busy calendars. It’s not trivial to keep a mode of “focused” work in a professional context while supporting our kids. I do want to thank my niece Rosemary for helping us in the Spring. While living with us during the virus outbreak, she has been very helpful supporting our kids in school work and helping them stay focused and organized. Our appreciation for her can not be understated.
As we reflect on our Spring adventures with home schooling/online learning, Sarah and I know we have to up our game plan for the fall. Here’s our plan in progress.
Themes of our learning culture plan
Becoming a better Peacher(Parent/Teacher/Project manager): As we think through the fall, I know that Sarah and I will need to schedule regular time to answer questions and times for regular teacher communication. In some of our previous explorations of maker mindset in teaching, we found many good themes that will become helpful. Teaching isn’t always about being the fountain of knowledge and sharing it. Teaching sometimes looks a bit more like project management where we’re teaching students how to break big problems into small problems. We teach students how to ask better questions. We connect students with the key search tools they need to discover their own knowledge. We meet students where they’re at.
Family weekly planning: From looking at blogs on virtual schools, it’s common for these schools to provide assignment tracking and organization tools. I think it will be important to find these tools and organize them into a system. I hope that we can take this a step forward though. At my work, we chunk our work into two week cycles or plans. We start each cycle with a meeting called “sprint planning.” This enables us to find the most valuable and easy work we can be doing to help the project move forward and meet deadlines. I think Sarah and I will come up with a family version of this meeting us. We’ll probably use some tools like MindMeister, Google Documents, or Trello to help us stay organized and monitor work.
Here’s a cool video exploring the idea of family weekly planning using Agile ideas …
If you need an agenda for this kind of meeting, check out our post here.
Inspect and adapt: We know that we will not make a perfect plan. With that in mind, we plan to have a meeting weekly to see how we’re doing as a family. What’s working well? What are common road blocks? How can we get better? What resources can we leverage outside our family to promote a peaceful, prayerful, healthy and a happy family?
Creating zones of focus: Sarah and I have a good degree of schedule flexibility. We’re very fortunate to have this situation. We’re thinking through how we can rigorously leverage our calendars to weave school support into lives while meeting the requirements of our jobs. In brutal honesty, this will be crazy hard.
Elements of a good weekly schedule
Schedule prayer time
Schedule breaks and play time
Try to keep a normal work schedule
Schedule time for music practice
Keep a good backlog of projects/hobby projects
Schedule time for socially distance sports or outdoor time
Experiment with time management patterns: Adding Pomodoro to my day: I’m thinking about trying out Pomodoro in my professional work. ( https://en.wikipedia.org/wiki/Pomodoro_Technique ) In this work pattern, you try to enter a zone of focused work for 25 minutes. After the 25 minutes, you take a break for 5 minutes. In those 5 minutes, it may be possible to do a check-in on kids. We’ll let you know if this works or not.
Interested in project based learning for families? Interested in sharing ideas for helping your kids love learning by making cool stuff? We want to welcome you to our new InspiredToEducate.NET facebook group. In this community, we hope learn and support each other as we promote learning cultures in our families.
Hey web developers! Looking for a fun way to build VR experiences on the Oculus Quest? This tutorial will provide a brief guide to drafting an AFrame.IO VR experience that includes GLTF model loading and teleportation controls. As web developers, we have the unique opportunity to link data, models, and services to WebXR experiences. We really love seeing AFrame.IO work well on the Oculus platform. These are exciting times and trends!
AFrame.IO Script for Oculus WebXR
Fork the script at https://aframeexamples.glitch.me. In 2023, I feel that @ProfStemkoski has created one of the best collections of AFrame.IO templates. I like how he keeps his examples relatively small. It makes it easier to find a starting point for your project. Under the “quest-extras.html”, you’ll find an approachable example for starting with a “player movement” component that works with Oculus Quest. This example also shows an example for object interactivity via raycasting.
<!DOCTYPE html>
<html>
<head>
<title>A-Frame: Quest movement and interaction</title>
<meta name="description" content="Moving around an A-Frame scene with Quest touch controllers.">
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="js/aframe-environment-component.js"></script>
<script src="js/controller-listener.js"></script>
<script src="js/player-move.js"></script>
<script src="js/raycaster-extras.js"></script>
</head>
<body>
<script>
// if raycaster is pointing at this object, press trigger to change color
AFRAME.registerComponent("raycaster-color-change", {
init: function ()
{
this.colors = ["red", "orange", "yellow", "green", "blue", "violet"];
this.controllerData = document.querySelector("#controller-data").components["controller-listener"];
this.hoverData = this.el.components["raycaster-target"];
},
tick: function()
{
if (this.hoverData.hasFocus && this.controllerData.rightTrigger.pressed )
{
let index = Math.floor( this.colors.length * Math.random() );
let color = this.colors[index];
this.el.setAttribute("color", color);
}
if (!this.hoverData.hasFocus || this.controllerData.rightTrigger.released)
{
this.el.setAttribute("color", "#CCCCCC");
}
}
});
</script>
<a-scene environment="preset: default;" renderer="antialias: true;">
<a-assets>
<img id="gradient" src="images/gradient-fade.png" />
</a-assets>
<a-sky
color = "#000337">
</a-sky>
<!-- use a simple mesh for raycasting/navigation -->
<a-plane
width="100" height="100"
rotation="-90 0 0"
position="0 0.01 0"
visible="false"
class="groundPlane"
raycaster-target>
</a-plane>
<a-entity
id="player"
position="0 0 0"
player-move="controllerListenerId: #controller-data;
navigationMeshClass: groundPlane;">
<a-camera></a-camera>
<a-entity
id="controller-data"
controller-listener="leftControllerId: #left-controller;
rightControllerId: #right-controller;">
</a-entity>
<a-entity
id="left-controller"
oculus-touch-controls="hand: left">
</a-entity>
<!-- experiment with raycasting interval; slight performance improvement but jittery appearance in world -->
<a-entity
id="right-controller"
oculus-touch-controls="hand: right"
raycaster="objects: .raycaster-target; interval: 0;"
raycaster-extras="controllerListenerId: #controller-data;
beamImageSrc: #gradient; beamLength: 0.5;">
</a-entity>
</a-entity>
<a-torus-knot
p="2" q="3" radius="0.5" radius-tubular="0.1"
position = "-2.5 1.5 -4"
color="#CC3333"
raycaster-target>
</a-torus-knot>
<a-box
width = "2" height = "1" depth = "1"
position = "-1 0.5 -3"
rotation = "0 45 0"
color = "#FF8800"
class = ""
raycaster-target>
</a-box>
<a-sphere
radius = "1.25"
position = "0 1.25 -5"
color = "#DDBB00"
raycaster-target>
</a-sphere>
<a-cylinder
radius = "0.5" height = "1.5"
position = " 1 0.75 -3"
color = "#008800"
raycaster-target>
</a-cylinder>
<a-cone
radius-bottom = "1" radius-top = "0" height = "2"
position = "3 1 -4"
color = "#4444CC"
raycaster-target>
</a-cone>
<a-torus
radius="0.5" radius-tubular="0.1"
position = "2 3 -4"
rotation = "30 -20 0"
color="#8800FF"
raycaster-target>
</a-torus>
<!-- demo interaction boxes -->
<a-dodecahedron
radius = "0.5"
position = "-0.8 1 -2"
color = "#EEEEEE"
raycaster-target="canGrab: true;"
raycaster-color-change>
</a-dodecahedron>
<a-icosahedron
radius = "0.5"
position = "0.8 1 -2"
color = "#EEEEEE"
raycaster-target="canGrab: true;"
raycaster-color-change>
</a-icosahedron>
</a-scene>
</body>
</html>
I also admire the work of Ada Rose Canon too. You can find a very complete starter kit for AFrame.IO here: https://aframe-xr-starterkit.glitch.me/. This example shows features like collision detection, AR integration, and more.
I’m a big fan of the work of the AFrame.IO community. Thank you to Mozilla, Diego Marcos, Kevin Ngo, and Don McCurdy for their influence and effort to build a fun and productive platform for building WebVR experiences. In this post, I’ve collected a few Github repositories and resources to support you in building AFrame experiences.
Talk Abstract: In the next few years, augmented reality and virtual reality will continue to provide innovations in gaming, education, and training. Other applications might include helping you tour your next vacation resort or explore a future architecture design. Thanks to open web standards like WebXR, web developers can leverage their existing skills in JavaScript and HTML to create delightful VR experiences. During this session, we will explore A-Frame.io, an open source project supported by Mozilla enabling you to craft VR experiences using JavaScript and a growing ecosystem of web components.
Experiment with AR and A-Frame
AFrame now has support for ARCore. Paint the real world with your XR content! Using FireFox Reality for iOS, you can leverage ARKit on your favorite IPad or IPhone.
AFrame Layout Component
Automatically positions child entities in 3D space, with several layouts to choose from.
Animation
An animation component for A-Frame using anime.js. Also check out the animation-timeline component for defining and orchestrating timelines of animations.
Super Hands
All-in-one natural hand controller, pointer, and gaze interaction library for A-Frame. Seems to work well with Oculus Quest.
Thanks to the amazing work from Mozilla, WebXR usability has improved leveraging specialized FireFox browsers
– FireFox Reality
– FireFox Reality for HoloLens 2 – For raw ThreeJs scripts, it works well. I’m still doing testing on AFrame scenes.
If you live in Central Florida or Orlando, consider checking out our local chapter of Google developer Group. We enjoy building a fun creative community of developers, sharing ideas, code, and supporting each other in the craft of software. Learn more about our community here:
