|
|
import streamlit as st |
|
|
import os, base64, shutil, random |
|
|
from pathlib import Path |
|
|
|
|
|
@st.cache_data |
|
|
def load_aframe_and_extras(): |
|
|
return """ |
|
|
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
|
|
<script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script> |
|
|
<script> |
|
|
let score = 0; |
|
|
AFRAME.registerComponent('draggable', { |
|
|
init: function () { |
|
|
this.el.setAttribute('class', 'raycastable'); |
|
|
this.el.setAttribute('cursor-listener', ''); |
|
|
this.dragHandler = this.dragMove.bind(this); |
|
|
this.el.sceneEl.addEventListener('mousemove', this.dragHandler); |
|
|
this.el.addEventListener('mousedown', this.onDragStart.bind(this)); |
|
|
this.el.addEventListener('mouseup', this.onDragEnd.bind(this)); |
|
|
this.camera = document.querySelector('[camera]'); |
|
|
}, |
|
|
remove: function () { |
|
|
this.el.removeAttribute('cursor-listener'); |
|
|
this.el.sceneEl.removeEventListener('mousemove', this.dragHandler); |
|
|
}, |
|
|
onDragStart: function (evt) { |
|
|
this.isDragging = true; |
|
|
this.el.emit('dragstart'); |
|
|
}, |
|
|
onDragEnd: function (evt) { |
|
|
this.isDragging = false; |
|
|
this.el.emit('dragend'); |
|
|
}, |
|
|
dragMove: function (evt) { |
|
|
if (!this.isDragging) return; |
|
|
var camera = this.camera; |
|
|
var vector = new THREE.Vector3(evt.clientX / window.innerWidth * 2 - 1, -(evt.clientY / window.innerHeight) * 2 + 1, 0.5); |
|
|
vector.unproject(camera); |
|
|
var dir = vector.sub(camera.position).normalize(); |
|
|
var distance = -camera.position.y / dir.y; |
|
|
var pos = camera.position.clone().add(dir.multiplyScalar(distance)); |
|
|
this.el.setAttribute('position', pos); |
|
|
} |
|
|
}); |
|
|
AFRAME.registerComponent('bouncing', { |
|
|
schema: { |
|
|
speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}}, |
|
|
dist: {type: 'vec3', default: {x: 0.5, y: 0.5, z: 0.5}} |
|
|
}, |
|
|
init: function () { |
|
|
this.originalPos = this.el.getAttribute('position'); |
|
|
this.dir = {x: 1, y: 1, z: 1}; |
|
|
}, |
|
|
tick: function (time, timeDelta) { |
|
|
var currentPos = this.el.getAttribute('position'); |
|
|
var speed = this.data.speed; |
|
|
var dist = this.data.dist; |
|
|
['x', 'y', 'z'].forEach(axis => { |
|
|
currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000); |
|
|
if (Math.abs(currentPos[axis] - this.originalPos[axis]) > dist[axis]) { |
|
|
this.dir[axis] *= -1; |
|
|
} |
|
|
}); |
|
|
this.el.setAttribute('position', currentPos); |
|
|
}, |
|
|
boost: function() { |
|
|
var speed = this.data.speed; |
|
|
['x', 'y', 'z'].forEach(axis => { |
|
|
speed[axis] *= 1.5; |
|
|
}); |
|
|
this.data.speed = speed; |
|
|
this.dir = { |
|
|
x: Math.random() > 0.5 ? 1 : -1, |
|
|
y: Math.random() > 0.5 ? 1 : -1, |
|
|
z: Math.random() > 0.5 ? 1 : -1 |
|
|
}; |
|
|
} |
|
|
}); |
|
|
AFRAME.registerComponent('moving-light', { |
|
|
schema: { |
|
|
color: {type: 'color', default: '#FFF'}, |
|
|
speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}}, |
|
|
bounds: {type: 'vec3', default: {x: 5, y: 5, z: 5}} |
|
|
}, |
|
|
init: function () { |
|
|
this.dir = {x: 1, y: 1, z: 1}; |
|
|
this.light = document.createElement('a-light'); |
|
|
this.light.setAttribute('type', 'point'); |
|
|
this.light.setAttribute('color', this.data.color); |
|
|
this.light.setAttribute('intensity', '0.75'); |
|
|
this.el.appendChild(this.light); |
|
|
}, |
|
|
tick: function (time, timeDelta) { |
|
|
var currentPos = this.el.getAttribute('position'); |
|
|
var speed = this.data.speed; |
|
|
var bounds = this.data.bounds; |
|
|
['x', 'y', 'z'].forEach(axis => { |
|
|
currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000); |
|
|
if (Math.abs(currentPos[axis]) > bounds[axis]) { |
|
|
this.dir[axis] *= -1; |
|
|
} |
|
|
}); |
|
|
this.el.setAttribute('position', currentPos); |
|
|
} |
|
|
}); |
|
|
function moveCamera(direction) { |
|
|
var camera = document.querySelector('[camera]'); |
|
|
var rig = document.querySelector('#rig'); |
|
|
var pos = rig.getAttribute('position'); |
|
|
var rot = rig.getAttribute('rotation'); |
|
|
var speed = 0.5; |
|
|
var rotationSpeed = 5; |
|
|
switch(direction) { |
|
|
case 'up': pos.y += speed; break; |
|
|
case 'down': pos.y -= speed; break; |
|
|
case 'forward': pos.z -= speed; break; |
|
|
case 'left': pos.x -= speed; break; |
|
|
case 'right': pos.x += speed; break; |
|
|
case 'rotateLeft': rot.y += rotationSpeed; break; |
|
|
case 'rotateRight': rot.y -= rotationSpeed; break; |
|
|
case 'reset': pos = {x: 0, y: 10, z: 0}; rot = {x: -90, y: 0, z: 0}; break; |
|
|
case 'ground': pos = {x: 0, y: 1.6, z: 0}; rot = {x: 0, y: 0, z: 0}; break; |
|
|
} |
|
|
rig.setAttribute('position', pos); |
|
|
rig.setAttribute('rotation', rot); |
|
|
} |
|
|
function fireRaycast() { |
|
|
var camera = document.querySelector('[camera]'); |
|
|
var direction = new THREE.Vector3(); |
|
|
camera.object3D.getWorldDirection(direction); |
|
|
var raycaster = new THREE.Raycaster(); |
|
|
raycaster.set(camera.object3D.position, direction); |
|
|
var intersects = raycaster.intersectObjects(document.querySelectorAll('.raycastable').map(el => el.object3D), true); |
|
|
if (intersects.length > 0) { |
|
|
var hitObject = intersects[0].object.el; |
|
|
if (hitObject.components.bouncing) { |
|
|
hitObject.components.bouncing.boost(); |
|
|
score += 10; |
|
|
document.getElementById('score').setAttribute('value', 'Score: ' + score); |
|
|
} |
|
|
} |
|
|
} |
|
|
document.addEventListener('keydown', function(event) { |
|
|
switch(event.key.toLowerCase()) { |
|
|
case 'w': moveCamera('up'); break; |
|
|
case 's': moveCamera('forward'); break; |
|
|
case 'x': moveCamera('down'); break; |
|
|
case 'q': moveCamera('rotateLeft'); break; |
|
|
case 'e': moveCamera('rotateRight'); break; |
|
|
case 'z': moveCamera('reset'); break; |
|
|
case 'c': moveCamera('ground'); break; |
|
|
case ' ': fireRaycast(); break; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
""" |
|
|
|
|
|
def create_aframe_entity(file_stem, file_type, position): |
|
|
rotation = f"0 {random.uniform(0, 360)} 0" |
|
|
bounce_speed = f"{random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)}" |
|
|
bounce_dist = f"0.1 0.1 0.1" |
|
|
if file_type == 'obj': |
|
|
return f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" obj-model="obj: #{file_stem}" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-entity>' |
|
|
elif file_type == 'glb': |
|
|
return f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" gltf-model="#{file_stem}" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-entity>' |
|
|
elif file_type in ['webp', 'png']: |
|
|
return f'<a-image position="{position}" rotation="-90 0 0" src="#{file_stem}" width="0.5" height="0.5" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-image>' |
|
|
elif file_type == 'mp4': |
|
|
return f'<a-video position="{position}" rotation="-90 0 0" src="#{file_stem}" width="0.5" height="0.5" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-video>' |
|
|
return '' |
|
|
|
|
|
@st.cache_data |
|
|
def encode_file(file_path): |
|
|
with open(file_path, "rb") as file: |
|
|
return base64.b64encode(file.read()).decode() |
|
|
|
|
|
@st.cache_data |
|
|
def generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5): |
|
|
assets = "<a-assets>" |
|
|
entities = "" |
|
|
tile_size = 1 |
|
|
start_x = -(grid_width * tile_size) / 2 |
|
|
start_z = -(grid_height * tile_size) / 2 |
|
|
unique_files = random.sample(files, min(len(files), max_unique_models)) |
|
|
encoded_files = {} |
|
|
for file in unique_files: |
|
|
file_path = os.path.join(directory, file) |
|
|
file_type = file.split('.')[-1] |
|
|
encoded_file = encode_file(file_path) |
|
|
encoded_files[file] = encoded_file |
|
|
if file_type in ['obj', 'glb']: |
|
|
assets += f'<a-asset-item id="{Path(file).stem}" src="data:application/octet-stream;base64,{encoded_file}"></a-asset-item>' |
|
|
elif file_type in ['webp', 'png', 'mp4']: |
|
|
mime_type = f"image/{file_type}" if file_type in ['webp', 'png'] else "video/mp4" |
|
|
assets += f'<{file_type} id="{Path(file).stem}" src="data:{mime_type};base64,{encoded_file}"></{file_type}>' |
|
|
for i in range(grid_width): |
|
|
for j in range(grid_height): |
|
|
x = start_x + (i * tile_size) |
|
|
z = start_z + (j * tile_size) |
|
|
position = f"{x} 0 {z}" |
|
|
if unique_files: |
|
|
file = random.choice(unique_files) |
|
|
file_type = file.split('.')[-1] |
|
|
entities += create_aframe_entity(Path(file).stem, file_type, position) |
|
|
assets += "</a-assets>" |
|
|
return assets, entities |
|
|
|
|
|
def main(): |
|
|
st.set_page_config(layout="wide") |
|
|
with st.sidebar: |
|
|
st.markdown("### 🤖 3D AI Using Claude 3.5 Sonnet for AI Pair Programming") |
|
|
st.markdown("[Open 3D Animation Toolkit](https://huggingface.co/spaces/awacke1/3d_animation_toolkit)", unsafe_allow_html=True) |
|
|
st.markdown("### ⬆️ Upload") |
|
|
uploaded_files = st.file_uploader("Add files:", accept_multiple_files=True, key="file_uploader") |
|
|
st.markdown("### 🎮 Camera Controls") |
|
|
col1, col2, col3 = st.columns(3) |
|
|
with col1: |
|
|
st.button("⬅️", on_click=lambda: st.session_state.update({'camera_move': 'left'})) |
|
|
st.button("🔄↺", on_click=lambda: st.session_state.update({'camera_move': 'rotateLeft'})) |
|
|
st.button("🔝", on_click=lambda: st.session_state.update({'camera_move': 'reset'})) |
|
|
with col2: |
|
|
st.button("⬆️", on_click=lambda: st.session_state.update({'camera_move': 'up'})) |
|
|
st.button("👀", on_click=lambda: st.session_state.update({'camera_move': 'ground'})) |
|
|
st.button("🔫", on_click=lambda: st.session_state.update({'camera_move': 'fire'})) |
|
|
with col3: |
|
|
st.button("➡️", on_click=lambda: st.session_state.update({'camera_move': 'right'})) |
|
|
st.button("⬇️", on_click=lambda: st.session_state.update({'camera_move': 'down'})) |
|
|
st.button("⏩", on_click=lambda: st.session_state.update({'camera_move': 'forward'})) |
|
|
st.markdown("### 🗺️ Grid Size") |
|
|
grid_width = st.slider("Grid Width", 1, 8, 8) |
|
|
grid_height = st.slider("Grid Height", 1, 5, 5) |
|
|
st.markdown("### ℹ️ Instructions") |
|
|
st.write("- W: Camera up\n- S: Move forward\n- X: Camera down\n- Q/E: Rotate camera left/right\n- Z: Reset camera to top view\n- C: Move camera to ground level\n- Spacebar: Fire raycast\n- Click and drag to move objects\n- Mouse wheel to zoom\n- Right-click and drag to rotate view") |
|
|
st.markdown("### 📁 Directory") |
|
|
directory = st.text_input("Enter path:", ".", key="directory_input") |
|
|
|
|
|
if not os.path.isdir(directory): |
|
|
st.sidebar.error("Invalid directory path") |
|
|
return |
|
|
file_types = ['obj', 'glb', 'webp', 'png', 'mp4'] |
|
|
if uploaded_files: |
|
|
for uploaded_file in uploaded_files: |
|
|
file_extension = Path(uploaded_file.name).suffix.lower()[1:] |
|
|
if file_extension in file_types: |
|
|
with open(os.path.join(directory, uploaded_file.name), "wb") as f: |
|
|
shutil.copyfileobj(uploaded_file, f) |
|
|
st.sidebar.success(f"Uploaded: {uploaded_file.name}") |
|
|
else: |
|
|
st.sidebar.warning(f"Skipped unsupported file: {uploaded_file.name}") |
|
|
files = [f for f in os.listdir(directory) if f.split('.')[-1] in file_types] |
|
|
|
|
|
aframe_scene = f""" |
|
|
<a-scene embedded style="height: 600px; width: 100%;"> |
|
|
<a-entity id="rig" position="0 {max(grid_width, grid_height)} 0" rotation="-90 0 0"> |
|
|
<a-camera fov="60" look-controls wasd-controls="enabled: false" cursor="rayOrigin: mouse" raycaster="objects: .raycastable"></a-camera> |
|
|
</a-entity> |
|
|
<a-sky color="#87CEEB"></a-sky> |
|
|
<a-entity moving-light="color: #FFD700; speed: 0.07 0.05 0.06; bounds: 4 3 4" position="2 2 -2"></a-entity> |
|
|
<a-entity moving-light="color: #FF6347; speed: 0.06 0.08 0.05; bounds: 4 3 4" position="-2 1 2"></a-entity> |
|
|
<a-entity moving-light="color: #00CED1; speed: 0.05 0.06 0.07; bounds: 4 3 4" position="0 3 0"></a-entity> |
|
|
<a-text id="score" value="Score: 0" position="-1.5 1 -2" scale="0.5 0.5 0.5" color="white"></a-text> |
|
|
""" |
|
|
|
|
|
assets, entities = generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5) |
|
|
aframe_scene += assets + entities + "</a-scene>" |
|
|
|
|
|
camera_move = st.session_state.get('camera_move', None) |
|
|
if camera_move: |
|
|
if camera_move == 'fire': |
|
|
aframe_scene += "<script>fireRaycast();</script>" |
|
|
else: |
|
|
aframe_scene += f"<script>moveCamera('{camera_move}');</script>" |
|
|
st.session_state.pop('camera_move') |
|
|
|
|
|
st.components.v1.html(load_aframe_and_extras() + aframe_scene, height=600) |
|
|
|
|
|
if __name__ == "__main__": |
|
|
main() |
