<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<template>
<div class="hero__canvas" id="hero__canvas"></div>
</template>
</div>
<script src="script.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data() {
return {
target3D: '',
camera: '',
scene: '',
renderer: '',
angle: 0,
radius: 100,
controls: '',
rotateActive: true,
}
},
//props: ['scrollPosition'],
//created() {
//},
mounted() {
this.initHero();
},
methods: {
addCubes: function() {
let cubeSize = 0.3;
let geometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
let nCubes = 50;
let line;
let edges;
for (let i = 0; i < nCubes; i++)
{
edges = new THREE.EdgesGeometry(geometry);
line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
color: 0xFFFFFF
}));
line.position.x = (Math.random() - 0.5) * 5;
line.position.y = (Math.random() - 0.5) * 5;
line.position.z = (Math.random() - 0.5) * 5;
line.rotation.x = (Math.random() - 0.5) * 5;
line.rotation.y = (Math.random() - 0.5) * 5;
line.rotation.z = (Math.random() - 0.5) * 5;
this.scene.add( line );
}
},
init: function() {
this.renderer = new THREE.WebGLRenderer({
alpha: true
});
this.target3D = document.getElementById('hero__canvas');
this.renderer.setSize(this.winW, this.winH);
this.target3D.append(this.renderer.domElement);
this.camera = new THREE.PerspectiveCamera(1, this.winW / this.winH, 1, 1000);
this.camera.position.z = 100;
this.controls = new THREE.TrackballControls(this.camera , this.renderer.domElement);
this.controls.addEventListener('change', this.render);
this.scene = new THREE.Scene();
this.target3D.addEventListener('resize', this.onWindowResize, false);
this.target3D.addEventListener('touchstart', this.activateClick, false);
this.target3D.addEventListener('touchend', this.unActivateClick, false);
this.target3D.addEventListener('mousedown', this.activateClick, false);
this.target3D.addEventListener('mouseup', this.unActivateClick, false);
this.target3D.addEventListener('mousewheel', null, false);
},
animate: function() {
requestAnimationFrame(this.animate);
this.controls.update();
if (this.rotateActive)
{
this.camera.position.x = this.radius * Math.cos(this.angle);
this.camera.position.z = this.radius * Math.sin(this.angle);
this.angle += 0.005;
}
},
render: function() {
this.renderer.render(this.scene, this.camera);
},
onWindowResize: function() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.controls.handleResize();
},
activateClick: function() {
this.rotateActive = false;
},
unActivateClick: function() {
this.rotateActive = true;
},
initHero: function() {
this.winW = document.body.clientWidth;
this.winH = document.body.clientHeight;
this.init();
this.animate();
this.addCubes();
//this.render();
}
}
})
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(left top, #42f4ad, #3e71d1);
background: -o-linear-gradient(bottom right, #42f4ad, #3e71d1);
background: -moz-linear-gradient(bottom right, #42f4ad, #3e71d1);
background: linear-gradient(to bottom right, #42f4ad, #3e71d1);
}
.hero__canvas {
width: 100%;
height: 100vh;
}