92 docs tagged with "tutorial"

Sample showing how to move the camera with mouse and touch to look around

Project sample showing how to use project image assets in the loading screen

Sample showing use of curves to do basic animation with curves.

Example project on how to add and play animations without using a state graph

Tutorial demonstrating basic touch input in PlayCanvas. Touch the box and move it around the screen!

Simple example of planes that always face the camera. i.e. billboards. Click on the box and fly around the scene with WASD

Sample of a camera following points on a spline path.

Sample showing to use render masking on the lights and models to enable lighting to only affect certain models and cameras to render certain models.

A sample showing how capture a screenshot from a camera and download as a PNG

A sample showing how to change a materials texture through a script

Create QR codes at runtime with https://github.com/davidshimjs/qrcodejs

Open Project ↗

Double click on the screen to move the camera

Sample showing how to detect a double tap on a touch screen.

Sample showing how to detect a long press/touch to perform an action.

An example of adding and removing elements from the scroll view in the UI

A sample showing how to use the physics raycast to pick entities

Sample showing how to pick at objects without using the physics system (extra 1MB to published project) or the frame buffer.

Sample project showing a multi layered particle effect with screen shake.

Sample showing how to fade a model in and out using on a per model basis.

Example project that extends the First Person Camera tutorial to move and jump around a 3D level

Sample with a fireball that moves with the mouse

Flappy's Back! Guide Flappy Bird through as many pipes as you can. Made with @playcanvas

Sample with self contained FPS counter that can be used in other projects.

Example of how to use live HTML and CSS editing.

Example of how to use HTML and CSS to create UI

Sample showing information hotspots on a scene.

Sample showing how to load multiple assets at runtime with a progress bar.

Sample showing how to load multiple assets at runtime.

Sample showing how to load an asset at runtime so you don't have to preload it at the start if it is not used.

An example of a radial loading circle

How to load a Draco compressed GLB.

How to load a GLB as a binary asset.

A sample showing how to lock the mouse upon clicking.

Example project to handle safe areas on the UI - https://developer.playcanvas.com/user-manual/user-interface/safe-area/

Demonstration project that shows how to use multiple cameras and layers to render a mixed user interface of UI elements and world-space objects.

A sample showing how to render multiple viewports by modifying the viewport properties on the cameras

Sample that draws lines between all the current touches on the screen.

Interactive interior visualisation with dynamic reflections and HDR lightmaps.

Sample with an orbit camera around an entity with both mouse and touch. Scroll wheel and 'pinch to zoom' is used to zoom in and out.

An example shows how to focus a camera on target location

A sample showing how to pause and resume an app by modifying the timeScale property. Click to pause/play the app

Sample showing how to pick an entity by tag using raycastAll

A sample with a script to setup and enable CCD for very fast moving physics objects

A sample showing how to place objects in the world by using physics. Click on ground to place a box.

A sample showing how to place objects in the world without using physics. Click on the ground to place boxes.

Credit//playcanvas.com/user/lexxik

Open Project ↗

Sample showing a simple point and click system to move an object where you user has clicked

Example of creating a procedural texture with a gradient effect by LeXXik

A rainbow trail using the pc.Mesh API

Raycasting with multiple camera viewports. Click on the shapes in each view

Render 3D objects as part of the UI

Example project on rendering the world at different resolutions without the UI being affected

Scripts to use for RTL language support such Arabic

Sample showing how to rotate an object using the mouse in screen space

Shockwave ripple post effect

Sample showing how to pick at an entity

Open Project ↗

Sample with a smooth transition of a camera from one position and rotation to another using the Lerp and Slerp functions.

Sample showing how to control the volume of a sound slot using curve data. Click on the scene to start the audio.

Get started making your own space shooter game by forking this template Asteroids shooter! Aim with your mouse and fire with your left button. Survive as long as you can!

Open Project ↗

Example project that uses the stencil buffer to create a magic window like effect on a card.

Sample switching on a model materials at runtime.

A simple third person controller.

The classic game Tic Tac Toe

Example of extending the PlayCanvas engine to create one shot timers. Press P to pause time.

Use the Layout Group component to build a user interface.

Dynamically generate normal maps and parallax maps for text

A demonstration of a GLSL effect from Shadertoy being used in a shader chunk on a PlayCanvas material

Build a Shop User Interface screen using UI Elements, Layout Groups, Button components, Sprites and Texture Atlases

Sample showing how to communicate between scripts using events.

An implementation of vehicle physics in PlayCanvas, using the RaycastVehicle API in ammo.js. Supports desktop, mobile and VR.

Basic fullscreen effect simulating a bad video screen like an old CRT.

Open Project ↗

Open Project ↗

360 Image with WebXR support | Image Credit//www.flickr.com/photos/54144402@N03/

360 Video with WebXR support

Example of how to raycast in the PlayCanvas scene when using WebXR AR.

Example of how to use DOM (HTML + CSS) with WebXR AR session.

Example of how to use WebXR Hit Test API. That allows to hit test real world geometry.

Sample application with WebXR controller/hand models loaded based on input source profile. Models sourced from//github.com/immersive-web/webxr-input-profiles

Sample application with WebXR Hands Tracking.

Basic scene with support for VR camera

Realistic hands in VR!

A sample application with boilerplate code for WebXR support with tracked controllers using PlayCanvas.

A living project built by the PlayCanvas team to help developers learn about creating scalable and responsive WebXR VR applications for all devices

Example of how to use WebXR Augmented Reality: Image Tracking API. That allows to actively track real world images based on provided sample.

Example of how to use WebXR Augmented Reality: Plane Detection API. That allows to actively track real world surface estimations.

Learn how to render world space UI over the top of the world

Sample in which a UI Element is positioned over a world space point.