59 lines
1.9 KiB
Vue
Executable File
59 lines
1.9 KiB
Vue
Executable File
<template>
|
||
<div class="all-characters-test">
|
||
<h1>All 3D Characters (Ages × Genders)</h1>
|
||
<div class="controls">
|
||
<label><input type="checkbox" v-model="useLightweight"> Use lightweight models</label>
|
||
<label><input type="checkbox" v-model="noBackground"> No background</label>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div v-for="(age, idx) in ages" :key="`age-${age}`" class="card">
|
||
<div class="label">Alter: {{ age }}</div>
|
||
<div class="row">
|
||
<div class="cell">
|
||
<div class="mini-shell">
|
||
<Character3D :gender="'female'" :age="age" :lightweight="useLightweight" :noBackground="noBackground" />
|
||
</div>
|
||
<div class="sub">weiblich</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="mini-shell">
|
||
<Character3D :gender="'male'" :age="age" :lightweight="useLightweight" :noBackground="noBackground" />
|
||
</div>
|
||
<div class="sub">männlich</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Character3D from '@/components/Character3D.vue';
|
||
|
||
export default {
|
||
name: 'AllCharactersTest',
|
||
components: { Character3D },
|
||
data() {
|
||
return {
|
||
// Show ages 0..17 and some representative adults
|
||
ages: [...Array(18).keys()].concat([25, 40, 70]),
|
||
useLightweight: true,
|
||
noBackground: true
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.all-characters-test { padding: 16px }
|
||
.controls { margin-bottom: 12px }
|
||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
|
||
.card { border: 1px solid var(--color-border); padding: 8px; border-radius: 6px; background: var(--color-surface) }
|
||
.label { font-weight: 600; margin-bottom: 6px }
|
||
.row { display: flex; gap: 8px }
|
||
.cell { flex: 1; text-align: center }
|
||
.mini-shell { width: 100%; height: 220px }
|
||
.sub { margin-top: 6px; font-size: 12px; color: #666 }
|
||
</style>
|