Curious about building 2D games with web skills? In this post, we’ll explore tools and patterns to use PhaserJs and JavaScript to make engaging 2D games. We’ll cover tools to make experiences with our favorite language: TypeScript.
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!!
Related apps:
– TRNIO
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.
What can you build with Phaser 3? Check out some examples here.
– Tetris
– Robowhale
– Fun Math Game
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.
On my environment, I have unziped the files to /home/michaelprosario/phaser3-rollup-typescript-master.
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 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.
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.
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.
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.
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.
Check out Google CS First.
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.
https://www.instructables.com/howto/makey+makey/
Related Posts
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.
Make sure to check out Unity 3D’s Learning index here: https://learn.unity.com/
If you make something cool, please share a link below in the comments!
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.
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!
For detailed step-by-step Unity tutorials, check out
The Official Guide to Your First Day in Unity playlist.
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!
One week to #Christmas! Here are some fun #3dprinted ornaments you can try at home!https://t.co/pF3ZjCI5YH#holiday #decoratons #holidaydecorating #christmasornaments
— makexyz (@makexyz) December 18, 2020
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.
Christmas is coming! Wanted to make some geeky 3D printed Christmas tree ornaments. ?????
Can you find all the pop-culture reference? ?#christmastime #3Dprinting #geekystuff #greenponikiot #kickstarter pic.twitter.com/XEAd0DeZPf— GreenPonik.IoT (@greenponik) December 18, 2020
These awesome students at @BertrandVikings’ afterschool club in #Nebraska are getting into the spirit designing #3dprinted #ornaments using @morphiapp on #iPad. #Christmas turkeys,tractors+more. Great job students+thx @SheilaPhilips9! @ShaunaWilken @BertrandLibrary #vikingnation pic.twitter.com/mZboXtgUim
— morphi (@MorphiApp) December 15, 2020
Add a traditional yet modern touch to your Christmas tree? this year with our laser cut ornaments.
Shop at https://t.co/B81bjs8R8P#lasercut #laserengraving #wood #ornaments #handmade #christmasornaments #giftideas #madelocal #shoplocal #shopirish #championgreen pic.twitter.com/HYyY5R9Eic— Vinehall Displays (@VinehallDisplay) November 19, 2020
Christmas has begun! Take a look at the wonderful tea light holders cut here at Grails?? #lasercutting #lights #folding #Engineering #Christmas #decorations #tealights pic.twitter.com/S1gllrLKMp
— Grail Laser Profiles (@GrailLaser) December 5, 2017
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
— Hyderabad Times (@HydTimes) December 14, 2020
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— Delhi Times (@DelhiTimesTweet) October 3, 2020
You can find many more origami ideas here on PInterest.
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.
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.
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.
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.
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
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!
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.
Let us know if you make anything cool!!
Top Stories on InspiredToEducate.NET