Introduce Z-axis handling across the app
This update introduces support for a third dimension (Z-axis) in scene positioning and orientation, enhancing 3D scene rendering capabilities. Changes include parsing the Z-coordinate attribute in scene elements, updating the `loadScene` function to accommodate the new axis, and extending the models to store this additional data. This pivotal enhancement allows a more refined and immersive user experience by enabling depth control in scene navigation and interactivity. The modification paves the way for future developments in 3D scene manipulation and interaction within the application.
This commit is contained in:
parent
d6e76e8cfd
commit
304cb8f63d
6 changed files with 84 additions and 17 deletions
|
@ -8,10 +8,15 @@ class QuackscapeScene extends HTMLElement {
|
|||
connectedCallback() {
|
||||
// When one is created, automatically load the scene
|
||||
this.scene = this.getAttribute("scene");
|
||||
this.x = this.getAttribute("x");
|
||||
this.y = this.getAttribute("y");
|
||||
this.x = this.getAttribute("x") | 0;
|
||||
this.y = this.getAttribute("y") | 0;
|
||||
this.z = this.getAttribute("z") | 0;
|
||||
|
||||
loadScene(this.scene, this.x, this.y, this);
|
||||
console.log(this.x);
|
||||
console.log(this.y);
|
||||
console.log(this.z);
|
||||
|
||||
loadScene(this.scene, this.x, this.y, this.z, this);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -24,7 +29,7 @@ customElements.define("quackscape-scene", QuackscapeScene);
|
|||
// Function to load a scene into a destination object
|
||||
// x and y signify the initial looking direction, -1 for the scene's default
|
||||
|
||||
async function loadScene(scene_id, x = -1, y = -1, destination = null) {
|
||||
async function loadScene(scene_id, x = -1, y = -1, z = -1, destination = null) {
|
||||
// Get WebGL maximum texture size
|
||||
var canvas = document.createElement("canvas");
|
||||
var gl =
|
||||
|
@ -74,8 +79,8 @@ async function loadScene(scene_id, x = -1, y = -1, destination = null) {
|
|||
rig.setAttribute("id", "rig");
|
||||
|
||||
// Rotate camera if requested
|
||||
if (x != -1 && y != -1) {
|
||||
rig.setAttribute("rotation", x + " " + y + " " + "0");
|
||||
if (x != -1 && y != -1 && z != -1) {
|
||||
rig.setAttribute("rotation", x + " " + y + " " + z);
|
||||
}
|
||||
|
||||
var camera = document.createElement("a-camera");
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
# Generated by Django 5.0.3 on 2024-03-11 15:06
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('tours', '0012_scene_public_textelement_font_textelement_font_size_and_more'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='scene',
|
||||
name='default_z',
|
||||
field=models.FloatField(default=0.0),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='scene',
|
||||
name='default_x',
|
||||
field=models.FloatField(default=0.0),
|
||||
),
|
||||
migrations.AlterField(
|
||||
model_name='scene',
|
||||
name='default_y',
|
||||
field=models.FloatField(default=0.0),
|
||||
),
|
||||
]
|
|
@ -0,0 +1,18 @@
|
|||
# Generated by Django 5.0.3 on 2024-03-11 15:17
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('tours', '0013_scene_default_z_alter_scene_default_x_and_more'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='teleportelement',
|
||||
name='destination_z',
|
||||
field=models.FloatField(default=-1.0),
|
||||
),
|
||||
]
|
|
@ -171,6 +171,7 @@ class TeleportElement(ImageElement):
|
|||
)
|
||||
destination_x = models.FloatField(default=-1.0)
|
||||
destination_y = models.FloatField(default=-1.0)
|
||||
destination_z = models.FloatField(default=-1.0)
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.scene.title}: {self.label} -> {self.destination.title}"
|
||||
|
@ -179,7 +180,7 @@ class TeleportElement(ImageElement):
|
|||
data = super().data()
|
||||
data["attributes"][
|
||||
"onclick"
|
||||
] = f'window.loadScene("{self.destination.id}", {self.destination_x}, {self.destination_y})'
|
||||
] = f'window.loadScene("{self.destination.id}", {self.destination_x}, {self.destination_y}, {self.destination_z})'
|
||||
return data
|
||||
|
||||
|
||||
|
@ -239,8 +240,9 @@ class Scene(models.Model):
|
|||
base_content = models.ForeignKey(
|
||||
OriginalMedia, related_name="scenes", on_delete=models.CASCADE
|
||||
)
|
||||
default_x = models.IntegerField(default=0)
|
||||
default_y = models.IntegerField(default=0)
|
||||
default_x = models.FloatField(default=0.0)
|
||||
default_y = models.FloatField(default=0.0)
|
||||
default_z = models.FloatField(default=0.0)
|
||||
category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True)
|
||||
public = models.BooleanField(default=True)
|
||||
|
||||
|
|
|
@ -3,10 +3,23 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>{{ scene.title }} – Quackscape</title>
|
||||
<script type="text/javascript" type="module" src="{% static 'js/api.bundle.js' %}"></script>
|
||||
<script type="text/javascript" type="module" src="{% static 'js/scene.bundle.js' %}"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
type="module"
|
||||
src="{% static 'js/api.bundle.js' %}"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
type="module"
|
||||
src="{% static 'js/scene.bundle.js' %}"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<quackscape-scene scene="{{ scene.id }}" x="{{ scene.default_x }}" y="{{ scene.default_y }}"></quackscape-scene>
|
||||
<quackscape-scene
|
||||
scene="{{ scene.id }}"
|
||||
x="{{ scene.default_x }}"
|
||||
y="{{ scene.default_y }}"
|
||||
z="{{ scene.default_z }}"
|
||||
></quackscape-scene>
|
||||
</body>
|
||||
</html>
|
|
@ -29,6 +29,7 @@
|
|||
scene="{{ scene.id }}"
|
||||
x="{{ scene.default_x }}"
|
||||
y="{{ scene.default_y }}"
|
||||
z="{{ scene.default_z }}"
|
||||
></quackscape-scene>
|
||||
|
||||
<div
|
||||
|
|
Loading…
Reference in a new issue