Leveraging modern technologies like Vue.js and Three.js can significantly enhance user engagement through interactive and visually compelling web applications. Below, two examples that highlight the practical use of these technologies in creating dynamic web interactions.
The first example utilizes Vue.js to implement a straightforward click counter, showcasing the framework's efficient reactive data binding capabilities. This simple interaction underlines the ease with which Vue.js enables the development of responsive UI elements, demonstrating the framework's utility in tracking and displaying user interactions with minimal code.
<!DOCTYPE html>
<html>
<head>
<title>Simple Vue.js Example</title>
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">You clicked me {{ counter }} times.</button>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
In our second example, we explore the integration of Three.js with Vue.js to create a rotating 3D cube, illustrating the seamless combination of reactive data handling and sophisticated graphical rendering. This test features a user-controlled rotation speed slider, offering insights into how these combined technologies can facilitate interactive and immersive web experiences with 3D graphics.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js with Three.js Example</title>
</head>
<body>
<div id="app">
<div id="threejs-cube"></div>
<input type="range" min="0" max="0.1" step="0.001" v-model="rotationSpeed" />
<p>Rotation speed: {{ rotationSpeed }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
rotationSpeed: 0.01
},
mounted() {
this.initThreeJS();
},
methods: {
initThreeJS() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById('threejs-cube').appendChild(renderer.domElement);
// Ambient light
var ambientLight = new THREE.AmbientLight(0x404040); // soft white light
scene.add(ambientLight);
// Directional light
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
directionalLight.castShadow = true;
scene.add(directionalLight);
// Cube
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshPhongMaterial({ color: 0x808080 });
var cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
// Ground
var groundGeometry = new THREE.PlaneGeometry(10, 10);
var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xAAAAAA });
var ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -1.5;
ground.receiveShadow = true;
scene.add(ground);
camera.position.z = 5;
var animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += parseFloat(this.rotationSpeed);
cube.rotation.y += parseFloat(this.rotationSpeed);
renderer.render(scene, camera);
};
animate();
}
}
})
</script>
</body>
</html>
Whether for basic UI components or advanced 3D visualizations, this combination provides a potent toolkit for enhancing the interactivity and visual appeal of web applications.
Comments