render(childId, parentId, template, object) {
this.componentWillMount()
this.childId = childId
this.parentId = parentId
if(dom.isDom(parentId)) {
this.parent = parentId
}else{
var id = this.parentId.indexOf('#') > -1 ? this.parentId.split('#')[1] : this.parentId
this.parent = document.getElementById(id)
}
if(template == undefined) {
this.element = document.createElement('div')
}else {
this.element = document.createElement('div')
var t = template(object)
this.element.innerHTML = t
}
if(this.element.getAttribute('id') == undefined) this.element.setAttribute('id', slug(childId))
dom.tree.add(this.parent, this.element)
setTimeout(this.componentDidMount, 0)
}
componentDidMount() {
this.slidePos = { y:0 }
this.lastScrollY = 0
const slideshowsEl = dom.select.all('.slideshow')
this.slidesHolder = dom.select('.all-slides-holder')
this.slideBlockEl = dom.select.all('.slide-block')
this.bottomSlide = dom.select('.bottom-slide')
this.bottomImg = dom.select('.bottom-slide .background')
this.arrowBtn = dom.select('.arrow-holder')
this.blobs = dom.select.all('#blob-container img')
this.blobsContainer = dom.select('#blob-container')
this.slideshows = []
this.slides = []
this.currentSlideIndex = Store.Detector.isMobile ? 1 : 0
this.totalSlides = Store.Detector.isMobile ? 5 : 19
this.slideshowIndex = 0
this.oldSlideshow = undefined
this.newSlideshow = undefined
this.readyToSlide = true
const dataSlideshows = Store.pageContent().slideshows
let slidesNum = 0
slideshowsEl.forEach((el, i) => {
const dataSlideshow = Store.Detector.isMobile ? dataSlideshows[i].imagesMobile : dataSlideshows[i].images
const s = slideshow(el)
s.id = i
this.slideshows[i] = s
for (var j = 0; j < dataSlideshow.length; j++) {
const dataS = dataSlideshow[j]
this.slides.push({
global: slidesNum,
local: j,
parent: i,
index: i + 1
})
slidesNum++
}
})
this.slides.unshift({
global: -1,
local: -1,
parent: -1,
index: 0
})
this.slides.push({
global: this.totalSlides - 1,
local: 0,
parent: this.slideshows.length,
index: this.slideshows.length + 1
})
$(window).on('mousewheel', this.didWheel)
inertia.addCallback(this.didInertia)
const videoEl = dom.select('.top-slide .video-holder')
const videoUrl = Store.Detector.isMobile ? Store.baseMediaPath() + 'media/Logo_III_01_1_1_mobile.mp4' : Store.baseMediaPath() + 'media/Logo_III_01_1.mp4'
this.mainLoader = dom.select('#main-loader')
if (!Store.Detector.isMobile) {
this.mVideo = miniVideo({
autoplay: Store.Detector.isMobile ? false : true,
loop: false,
volume: 1
})
this.mVideo.addTo(videoEl)
this.mVideo.load(videoUrl, ()=>{
dom.classes.add(this.mainLoader, 'remove')
dom.classes.add(this.arrowBtn, 'active')
setTimeout(() => {
this.spinnerTween.pause()
this.spinnerTween = undefined
dom.tree.remove(this.mainLoader)
}, 2000)
})
var $spinner = dom.select('.spinner-wrapper', this.mainLoader)
var $spinnerSvg = dom.select('svg', $spinner)
this.spinnerTween = TweenMax.to($spinnerSvg, 0.5, { rotation:'360deg', repeat:-1, ease:Linear.easeNone })
} else {
dom.tree.remove(this.mainLoader)
}
const hammertime = new Hammer(document)
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
hammertime.on('swipe', (ev) => {
if (ev.deltaY < 0) this.changeIndexByDirection(-1)
else this.changeIndexByDirection(1)
})
dom.event.on(this.arrowBtn, 'click', (e) => {
e.preventDefault()
this.changeIndexByDirection(-1)
})
dom.event.on(document, 'scroll', this.onScroll)
Store.on(Constants.UPDATE_SLIDESHOW, this.onUpdateSlideshow)
this.animate()
super.componentDidMount()
}
setTimeout(() => {
this.spinnerTween.pause()
this.spinnerTween = undefined
dom.tree.remove(this.mainLoader)
}, 2000)
componentDidMount() {
AppStore.on(AppConstants.WINDOW_RESIZE, this.resize)
dom.event(window, 'mousemove', this.mouseMove)
this.dot = {
el: dom.select('#mouse-dot', document),
x: -200,
y:-200
}
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
this.camera.position.z = 900;
this.renderer = new THREE.WebGLRenderer({
antialias: true
});
this.renderer.setSize( window.innerWidth, window.innerHeight );
dom.tree.add(this.element, this.renderer.domElement)
this.raycaster = new THREE.Raycaster();
this.mouse = new THREE.Vector2(500, 500);
this.intersection = undefined
this.intersectionCounter = 0
this.kebab = new THREE.Object3D()
this.scene.add(this.kebab)
this.meatParticles = MeatParticles(this.scene)
var planeGeometry = new THREE.PlaneGeometry( 1200, 400, 10, 10 );
var planeTexture = Utils.LoadTexture("gradient-sky-1172968.jpg")
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: planeTexture,
side: THREE.DoubleSide
});
this.background = new THREE.Mesh(planeGeometry, planeMaterial)
this.background.scale.set(10, 10, 10)
this.background.position.z = -600
this.scene.add(this.background)
var ambientL = new THREE.AmbientLight( 0xffffff );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
directionalLight.position.set( -40, 17, 100 )
GUI.setDirectionalLight('A ', directionalLight)
var directionalLight2 = new THREE.DirectionalLight( 0xffffff, 1.0 );
directionalLight2.position.set( -100, 72, -18 )
GUI.setDirectionalLight('B ', directionalLight2)
var directionalLight3 = new THREE.DirectionalLight( 0xffffff, 1.0 );
directionalLight3.position.set( 100, 17, -50 )
GUI.setDirectionalLight('C ', directionalLight3)
this.lights = {
ambient: ambientL,
dir1: directionalLight,
dir2: directionalLight2,
dir3: directionalLight3,
}
this.scene.add(this.lights.ambient)
this.scene.add(this.lights.dir1)
this.scene.add(this.lights.dir2)
this.scene.add(this.lights.dir3)
var manifest = [
{ id: AppConstants.KEBAB.BASE, src: "mesh/kebab_base.js" },
{ id: AppConstants.KEBAB.TOMATO, src: "mesh/tomato.js" },
{ id: AppConstants.KEBAB.SILVER, src: "mesh/silver.js" },
{ id: AppConstants.KEBAB.PARTICLE, src: "mesh/meat-particle.js" },
]
this.loadAssets(manifest)
Leap.loop((frame)=> {
var hand = frame.hands[0]
if(hand) {
let x = (window.innerWidth * 0.45) + hand.palmPosition[0]
let y = (window.innerHeight * 0.9) - hand.palmPosition[1]
this.updateMousePosition(x, y)
}
});
this.messages = Messages(dom.select('#messages', document))
this.animate()
super.componentDidMount()
}