Zpět

Vue.js & Babylon.js

Ukázka #1 - Data-binding do 3D scény

  • 
<form>
	<div>
		<label>Text</label>
		<input type="text" v-model="text" />
	</div>
	<div class="grid">
		<div>
			<label>Základní barva</label>
			<div>
				<input type="color" v-model="diffuseColor" />
				<span :style="'color: ' + diffuseColor"> {{ diffuseColor }} </span>
			</div>
		</div>
		<div>
			<label>Barva lesku</label>
			<div>
				<input type="color" v-model="specularColor" />
				<span :style="'color: ' + specularColor"> {{ specularColor }} </span>
			</div>
		</div>
	</div>
</form>
{{ diffuseColor }}
{{ outlineColor }}

Ukázka #2 - Práce s polem

  • 
<form>
    <ul>
        <li v-for="(item, index) in items">
            <div class="grid">
                <div>
                    <label>Objekt #{{index + 1}}</label>
                    <div>
                        <input type="color" v-model="item.color" />
                        <span :style="'color: ' + item.color"> {{ item.color }} </span>
                    </div>
                </div>
                <div>
                    <label>Šířka {{ Math.floor(item.size.x * 100) }}%</label>
                    <input type="range" v-model="item.size.x" min="0.1" max="2" step="0.1" />
                </div>
                <div>
                    <label>Výška {{ Math.floor(item.size.y * 100) }}%</label>
                    <input type="range" v-model="item.size.y" min="0.1" max="2" step="0.1" />
                </div>
                <div>
                    <label>Délka {{ Math.floor(item.size.z * 100) }}%</label>
                    <input type="range" v-model="item.size.z" min="0.1" max="2" step="0.1" />
                </div>
                <div>
                    <label>X {{ item.position.x }}</label>
                    <input type="range" v-model="item.position.x" min="-1" max="1" step="0.1" />
                </div>
                <div>
                    <label>Y {{ item.position.y }}</label>
                    <input type="range" v-model="item.position.y" min="-1" max="1" step="0.1" />
                </div>
                <div>
                    <label>Z {{ item.position.z }}</label>
                    <input type="range" v-model="item.position.z" min="-1" max="1" step="0.1" />
                </div>
                <div>
                    <a v-on:click="remove(index)">Smazat</a>
                </div>
            </div>
        </li>
    </ul>
    <a v-on:click="add()" > Přidat nový objekt</a>
</form>
  • {{ item.color }}
Přidat nový objekt

Ukázka #3 - Pokročilejší scéna

  • 
<form>
	<div>
		<label>
			<span class="left">0</span>
			<span class="right">255</span>
		</label>
		<div>
			<input type="range" v-model="int" min="0" max="255" step="1" />
		</div>
	</div>
	<div>
		<div class="grid">
			<div>
				<label>Číslo</label>
				<input type="text" v-model="int" />
			</div>
			<div>
				<label>Binární zápis</label>
				<input type="text" v-model="bin" />
			</div>
			<div>
				<label>Hexadecimální zápis</label>
				<input type="text" v-model="hex" />
			</div>
			<div>
				<label>Barva světla</label>
				<input type="color" v-model="color" />
				<span :style="'color: ' + color"> {{ color }} </span>
			</div>
		</div>
	</div>
</form>
{{ color }}