This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
//! This example demonstrates how to use the `Camera::viewport_to_world` method.
use bevy::prelude::*;
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_systems(Startup, setup)
.add_systems(Update, draw_cursor)
.run();
}
fn draw_cursor(
camera_query: Single<(&Camera, &GlobalTransform)>,
ground: Single<&GlobalTransform, With<Ground>>,
windows: Single<&Window>,
mut gizmos: Gizmos,
) {
let (camera, camera_transform) = *camera_query;
let Some(cursor_position) = windows.cursor_position() else {
return;
};
// Calculate a ray pointing from the camera into the world based on the cursor's position.
let Ok(ray) = camera.viewport_to_world(camera_transform, cursor_position) else {
return;
};
// Calculate if and where the ray is hitting the ground plane.
let Some(distance) =
ray.intersect_plane(ground.translation(), InfinitePlane3d::new(ground.up()))
else {
return;
};
let point = ray.get_point(distance);
// Draw a circle just above the ground plane at that position.
gizmos.circle(
Isometry3d::new(
point + ground.up() * 0.01,
Quat::from_rotation_arc(Vec3::Z, ground.up().as_vec3()),
),
0.2,
Color::WHITE,
);
}
#[derive(Component)]
struct Ground;
fn setup(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<StandardMaterial>>,
) {
// plane
commands.spawn((
Mesh3d(meshes.add(Plane3d::default().mesh().size(20., 20.))),
MeshMaterial3d(materials.add(Color::srgb(0.3, 0.5, 0.3))),
Ground,
));
// light
commands.spawn((
DirectionalLight::default(),
Transform::from_translation(Vec3::ONE).looking_at(Vec3::ZERO, Vec3::Y),
));
// camera
commands.spawn((
Camera3d::default(),
Transform::from_xyz(15.0, 5.0, 15.0).looking_at(Vec3::ZERO, Vec3::Y),
));
}