257 lines
8.9 KiB
PHP
257 lines
8.9 KiB
PHP
|
|
<script class="footer" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
|
|
<script class="footer" type="text/javascript" src="//github.com/mrdoob/three.js/blob/master/src/constants.js"></script>
|
|
<script class="footer" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
|
|
<script class="footer" type="text/javascript">
|
|
$(document).ready(function () {
|
|
// Three JS Template
|
|
// ----------------------------------------------------------------- BASIC parameters
|
|
|
|
var layoutWidth = $(".box-header-1").width();
|
|
var layoutHeight = $(".box-header-1").height();
|
|
|
|
|
|
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('hero_anim_bg'), antialias: true, alpha: true });
|
|
renderer.setSize(layoutWidth, layoutHeight);
|
|
|
|
if (layoutWidth > 800) {
|
|
renderer.shadowMap.enabled = false;
|
|
renderer.shadowMap.type = THREE.sRGBEncoding;
|
|
renderer.shadowMap.needsUpdate = true;
|
|
};
|
|
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
function onWindowResize() {
|
|
camera.aspect = layoutWidth / layoutHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(layoutWidth, layoutHeight);
|
|
};
|
|
|
|
// camera
|
|
var camera = new THREE.PerspectiveCamera(30, layoutWidth / layoutHeight, 1, 500);
|
|
camera.position.set(0, 2, 14);
|
|
|
|
|
|
var scene = new THREE.Scene();
|
|
var city = new THREE.Object3D();
|
|
var smoke = new THREE.Object3D();
|
|
var town = new THREE.Object3D();
|
|
|
|
var createCarPos = true;
|
|
var uSpeed = 0.001;
|
|
|
|
//----------------------------------------------------------------- FOG background
|
|
|
|
var setcolor = 0x01a49b;
|
|
// var setcolor = 0xF02050;
|
|
//var setcolor = 0xF2F111;
|
|
//var setcolor = 0xFF6347;
|
|
|
|
scene.background = new THREE.Color(setcolor);
|
|
scene.fog = new THREE.Fog(setcolor, 10, 16);
|
|
// scene.fog = new THREE.FogExp2(setcolor, 0.05);
|
|
//----------------------------------------------------------------- RANDOM Function
|
|
function mathRandom(num = 9) {
|
|
var numValue = - Math.random() * num + Math.random() * num;
|
|
return numValue;
|
|
};
|
|
//----------------------------------------------------------------- CHANGE bluilding colors
|
|
var setTintNum = true;
|
|
function setTintColor() {
|
|
if (setTintNum) {
|
|
setTintNum = false;
|
|
var setColor = 0x000000;
|
|
} else {
|
|
setTintNum = true;
|
|
var setColor = 0x000000;
|
|
};
|
|
// setColor = 0x222222;
|
|
return setColor;
|
|
};
|
|
|
|
//----------------------------------------------------------------- CREATE City
|
|
|
|
|
|
function init() {
|
|
var segments = 2;
|
|
for (var i = 1; i < 100; i++) {
|
|
var geometry = new THREE.CubeGeometry(1, 0, 0, segments, segments, segments);
|
|
var material = new THREE.MeshStandardMaterial({
|
|
color: setTintColor(),
|
|
wireframe: false,
|
|
shading: THREE.SmoothShading,
|
|
side: THREE.DoubleSide
|
|
});
|
|
var wmaterial = new THREE.MeshLambertMaterial({
|
|
color: 0xFFFFFF,
|
|
wireframe: true,
|
|
transparent: true,
|
|
opacity: 0.03,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
var cube = new THREE.Mesh(geometry, material);
|
|
var wire = new THREE.Mesh(geometry, wmaterial);
|
|
var floor = new THREE.Mesh(geometry, material);
|
|
var wfloor = new THREE.Mesh(geometry, wmaterial);
|
|
|
|
cube.add(wfloor);
|
|
cube.castShadow = true;
|
|
cube.receiveShadow = true;
|
|
cube.rotationValue = 0.1 + Math.abs(mathRandom(8));
|
|
|
|
floor.scale.y = 0.05;//+mathRandom(0.5);
|
|
cube.scale.y = 0.1 + Math.abs(mathRandom(8));
|
|
|
|
var cubeWidth = 0.9;
|
|
cube.scale.x = cube.scale.z = cubeWidth + mathRandom(1 - cubeWidth);
|
|
cube.position.x = Math.round(mathRandom());
|
|
cube.position.z = Math.round(mathRandom());
|
|
|
|
floor.position.set(cube.position.x, 0, cube.position.z)
|
|
|
|
town.add(floor);
|
|
town.add(cube);
|
|
};
|
|
//----------------------------------------------------------------- Particular
|
|
|
|
var gmaterial = new THREE.MeshToonMaterial({ color: 0xFFFF00, side: THREE.DoubleSide });
|
|
var gparticular = new THREE.CircleGeometry(0.01, 3);
|
|
var aparticular = 5;
|
|
|
|
var pmaterial = new THREE.MeshPhongMaterial({
|
|
color: 0x000000,
|
|
side: THREE.DoubleSide,
|
|
roughness: 10,
|
|
metalness: 0.6,
|
|
opacity: 0.9,
|
|
transparent: true
|
|
});
|
|
var pgeometry = new THREE.PlaneGeometry(30, 30);
|
|
var pelement = new THREE.Mesh(pgeometry, pmaterial);
|
|
pelement.rotation.x = -90 * Math.PI / 180;
|
|
pelement.position.y = -0.001;
|
|
pelement.receiveShadow = true;
|
|
|
|
city.add(pelement);
|
|
};
|
|
|
|
//----------------------------------------------------------------- MOUSE function
|
|
var raycaster = new THREE.Raycaster();
|
|
var mouse = new THREE.Vector2(), INTERSECTED;
|
|
var intersected;
|
|
|
|
function onMouseMove(event) {
|
|
event.preventDefault();
|
|
mouse.x = (event.clientX / layoutWidth) * 2 - 1;
|
|
mouse.y = -(event.clientY / layoutHeight) * 2 + 1;
|
|
};
|
|
function onDocumentTouchStart(event) {
|
|
if (event.touches.length == 1) {
|
|
event.preventDefault();
|
|
mouse.x = event.touches[0].pageX - layoutWidth / 2;
|
|
mouse.y = event.touches[0].pageY - layoutHeight / 2;
|
|
};
|
|
};
|
|
function onDocumentTouchMove(event) {
|
|
if (event.touches.length == 1) {
|
|
event.preventDefault();
|
|
mouse.x = event.touches[0].pageX - layoutWidth / 2;
|
|
mouse.y = event.touches[0].pageY - layoutHeight / 2;
|
|
}
|
|
}
|
|
window.addEventListener('mousemove', onMouseMove, false);
|
|
// window.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
// window.addEventListener('touchmove', onDocumentTouchMove, false);
|
|
|
|
//----------------------------------------------------------------- Lights
|
|
var ambientLight = new THREE.AmbientLight(0xFFFFFF, 4);
|
|
var lightFront = new THREE.SpotLight(0xFFFFFF, 20, 10);
|
|
var lightBack = new THREE.PointLight(0xFFFFFF, 0.5);
|
|
|
|
var spotLightHelper = new THREE.SpotLightHelper(lightFront);
|
|
// scene.add(spotLightHelper);
|
|
|
|
lightFront.rotation.x = 45 * Math.PI / 180;
|
|
lightFront.rotation.z = -45 * Math.PI / 180;
|
|
lightFront.position.set(5, 5, 5);
|
|
lightFront.castShadow = true;
|
|
lightFront.shadow.mapSize.width = 6000;
|
|
lightFront.shadow.mapSize.height = lightFront.shadow.mapSize.width;
|
|
lightFront.penumbra = 0.1;
|
|
lightBack.position.set(0, 6, 0);
|
|
|
|
smoke.position.y = 2;
|
|
|
|
scene.add(ambientLight);
|
|
city.add(lightFront);
|
|
scene.add(lightBack);
|
|
scene.add(city);
|
|
city.add(smoke);
|
|
city.add(town);
|
|
|
|
var createCars = function (cScale = 2, cPos = 20, cColor = 0xFFFF00) {
|
|
var cMat = new THREE.MeshToonMaterial({ color: cColor, side: THREE.DoubleSide });
|
|
var cGeo = new THREE.CubeGeometry(1, cScale / 40, cScale / 40);
|
|
var cElem = new THREE.Mesh(cGeo, cMat);
|
|
var cAmp = 3;
|
|
|
|
if (createCarPos) {
|
|
createCarPos = false;
|
|
cElem.position.x = -cPos;
|
|
cElem.position.z = (mathRandom(cAmp));
|
|
|
|
TweenMax.to(cElem.position, 3, { x: cPos, repeat: -1, yoyo: true, delay: mathRandom(3) });
|
|
} else {
|
|
createCarPos = true;
|
|
cElem.position.x = (mathRandom(cAmp));
|
|
cElem.position.z = -cPos;
|
|
cElem.rotation.y = 90 * Math.PI / 180;
|
|
|
|
TweenMax.to(cElem.position, 5, { z: cPos, repeat: -1, yoyo: true, delay: mathRandom(3), ease: Power1.easeInOut });
|
|
};
|
|
cElem.receiveShadow = true;
|
|
cElem.castShadow = true;
|
|
cElem.position.y = Math.abs(mathRandom(5));
|
|
city.add(cElem);
|
|
};
|
|
|
|
var generateLines = function () {
|
|
for (var i = 0; i < 60; i++) {
|
|
createCars(0.1, 20);
|
|
};
|
|
};
|
|
|
|
//----------------------------------------------------------------- CAMERA position
|
|
|
|
var cameraSet = function () {
|
|
createCars(0.1, 20, 0xFFFFFF);
|
|
// TweenMax.to(camera.position, 1, { y: 1 + Math.random() * 4, ease: Expo.easeInOut })
|
|
};
|
|
|
|
//----------------------------------------------------------------- ANIMATE
|
|
|
|
var animate = function () {
|
|
var time = Date.now() * 0.00005;
|
|
requestAnimationFrame(animate);
|
|
|
|
city.rotation.y -= ((mouse.x * 8) - camera.rotation.y) * uSpeed;
|
|
city.rotation.x -= (-(mouse.y * 4) - camera.rotation.x) * uSpeed;
|
|
if (city.rotation.x < -0.05) city.rotation.x = -0.05;
|
|
else if (city.rotation.x > 1) city.rotation.x = 1;
|
|
var cityRotation = Math.sin(Date.now() / 5000) * 13;
|
|
|
|
for (let i = 0, l = town.children.length; i < l; i++) {
|
|
var object = town.children[i];
|
|
}
|
|
smoke.rotation.y += 0.01;
|
|
smoke.rotation.x += 0.01;
|
|
camera.lookAt(city.position);
|
|
renderer.render(scene, camera);
|
|
}
|
|
//----------------------------------------------------------------- START functions
|
|
generateLines();
|
|
init();
|
|
animate();
|
|
});
|
|
</script> |