| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/3dweb/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXCLAND</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/nav.css">
<link rel="stylesheet" type="text/css" href="./css/animsition.css">
</head>
<body>
<div id="preloader">
<div id="ctn-preloader" class="ctn-preloader">
<div class="animation-preloader">
<div class="pulse">
</div>
<div class="txt-loading">
<span data-text-preloader="L" class="letters-loading">
L
</span>
<span data-text-preloader="O" class="letters-loading">
O
</span>
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="D" class="letters-loading">
D
</span>
<span data-text-preloader="I" class="letters-loading">
I
</span>
<span data-text-preloader="N" class="letters-loading">
N
</span>
<span data-text-preloader="G" class="letters-loading">
G
</span>
</div>
</div>
<div class="loader-section section-bg"></div>
</div>
</div>
<?php include 'inc/nav.html'; ?>
<div class="wordWrap">
<div class="world">
<div class="annotation">
</div>
</div>
</div>
<!--<a class="toggle toggle-night"></a><a class="toggle-music"></a>
<audio class="world-music"
src="https://res.cloudinary.com/liza/video/upload/v1492853426/sheep_qr3tus.m4a"></audio>-->
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="js/three.js"></script>
<script src="js/GLTFLoader.js" type="module"></script>
<script src="js/orbitcontrols.js"></script>
<script src="js/simplex_noise.min.js"></script>
<script>
/*
$(function() {
setTimeout(function() {
$('#ctn-preloader').addClass('loaded');
$('body').removeClass('no-scroll-y');
if ($('#ctn-preloader').hasClass('loaded')) {
$('#preloader').delay(1000).queue(function() {
$(this).remove();
});
}
}, 3000);
});*/
</script>
<script type="module">
import TWEEN from './js/tween.js';
import {
GLTFLoader
} from './js/GLTFLoader.js';
'use strict';
var raycaster = new THREE.Raycaster(); // Needed for object intersection
var mouse = new THREE.Vector2();
const annotation = document.querySelector(".annotation");
let objects = [];
let mainobj, sprite, skybox;
//let spriteBehindObject;
let scene,
light,
directLight1,
directLight2,
directLight3,
pointlight,
pointlight2,
camera,
cubes,
cubes1,
cube,
cube1,
group,
renderer,
controls,
mouseDown,
world,
night = false;
let sheep,
cloud,
sphere,
sky;
let width = window.innerWidth,
height = window.innerHeight;
let mouseX = 0;
let mouseY = 0;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.lookAt(scene.position);
camera.position.set(3, 2, 10);
camera.zoom = 1;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = false;
controls.target.set(0, 0, 0);
controls.autoRotateSpeed = 4;
controls.maxDistance = 10;
controls.minDistance = 7;
controls.enablePan = false;
controls.update();
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const labelContainerElem = document.querySelector('.annotation');
const manager = new THREE.LoadingManager();
group = new THREE.Group();
var loader = new GLTFLoader(manager);
function makeInstance(geometry, color, x, y, z, html) {
const material = new THREE.MeshPhongMaterial({
color,
opacity: 0,
transparent: true
});
const cube = new THREE.Mesh(geometry, material);
group.add(cube);
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
const elem = document.createElement('div');
elem.innerHTML = html;
labelContainerElem.appendChild(elem);
return {
cube,
elem
};
}
cubes = [
makeInstance(geometry, "", 0, 5, -1, ' <button class="pointBtn zoomIn point01" ></button>'),
makeInstance(geometry, "", 4, 2, 0, ' <button class="pointBtn zoomIn point02" ></button>'),
makeInstance(geometry, "", -2, 2, 3, ' <button class="pointBtn zoomIn point03"></button>'),
//makeInstance(geometry, "", 1, 5, 1, ' <button class="pointBtn zoomIn"></button>'),
];
function makeInstance1(geometry, color, x, y, z, html) {
const material = new THREE.MeshPhongMaterial({
color,
opacity: 0,
transparent: true
});
const cube1 = new THREE.Mesh(geometry, material);
group.add(cube1);
cube1.name = html;
cube1.position.x = x;
cube1.position.y = y;
cube1.position.z = z;
const elem = document.createElement('div');
elem.innerHTML = html;
labelContainerElem.appendChild(elem);
return {
cube1,
elem
};
}
cubes1 = [
makeInstance1(geometry, "", 0, 4, -2, ''),
makeInstance1(geometry, "", 4.5, 2, -1, ''),
makeInstance1(geometry, "", -3, 1, 1, ''),
//makeInstance(geometry, "", 1, 5, 1, ' <button class="pointBtn zoomIn"></button>'),
];
loader.load("./modal/DStore/DStore.gltf", function(gltf) {
mainobj = gltf.scene;
mainobj.scale.x = 0.06;
mainobj.scale.y = 0.06;
mainobj.scale.z = 0.06;
mainobj.rotation.y = 0;
mainobj.rotation.x = 0;
mainobj.rotation.z = 0;
mainobj.position.z = 5;
mainobj.position.x = -1;
mainobj.position.y = -1;
group.add(mainobj);
});
manager.onProgress = function(url, itemsLoaded, itemsTotal) {
// console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
if (itemsLoaded == itemsTotal) {
$('#ctn-preloader').fadeOut(1000);
}
};
scene.add(group);
// controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.enableZoom = false;
drawbackground();
addLights();
// drawstar();
drawSky();
world = document.querySelector('.world');
world.appendChild(renderer.domElement);
document.addEventListener('mousedown', onMouseDown);
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('touchstart', onTouchStart);
document.addEventListener('touchend', onTouchEnd);
window.addEventListener('resize', onResize);
// document.addEventListener('mousemove', animateParticles);
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('click', onDocumentMouseDown, false);
}
function drawstar() {
const loader01 = new THREE.TextureLoader();
const cross = loader01.load('img/star.png')
const geometry = new THREE.TorusGeometry(.7, .2, 16, 100); // width, height, depth
const particleGeometry = new THREE.BufferGeometry;
const particleesCnt = 1000;
const posArray = new Float32Array(particleesCnt * 3);
for (let i = 0; i < particleesCnt * 3; i++) {
posArray[i] = (Math.random() - 0.5) * (Math.random() * 100)
}
particleGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3))
const material = new THREE.PointsMaterial({
size: 0.005
});
const particlesMaterial = new THREE.PointsMaterial({
size: 0.1,
map: cross,
transparent: true,
});
// const sphere = new THREE.Points(geometry, material);
// const particlesMesh = new THREE.Points(particleGeometry, particlesMaterial)
// sphere.position.set(0, 0, 0); // Optional, 0,0,0 is the default
// sphere.position.y = 4;
// scene.add(sphere, particlesMesh);
// objects.push(sphere);
//partical mouse event
// const clock = new THREE.Clock()
// const tick = () => {
// const elapsedTime = clock.getElapsedTime()
// sphere.rotation.y = .5 * elapsedTime
// particlesMesh.rotation.x = mouseY * (elapsedTime * 0.00002)
// particlesMesh.rotation.y = mouseX * (elapsedTime * 0.00002)
// renderer.render(scene, camera)
// window.requestAnimationFrame(tick)
// }
// tick();
}
function animateParticles(event) {
mouseX = event.clientX
mouseY = event.clientY
}
//light
function addLights() {
light = new THREE.DirectionalLight(0x4f4f4f, 12);
light.position.set(4, 4, 4);
scene.add(light);
light = new THREE.DirectionalLight(0x4f4f4f, 5);
light.position.set(-4, -4, -4);
scene.add(light);
pointlight = new THREE.PointLight(0xffffff, 1, 200);
pointlight2 = new THREE.PointLight(0xffffff, 0.5, 400);
pointlight.castShadow = false;
pointlight.position.set(5, 2, -3);
pointlight2.castShadow = false;
pointlight2.position.set(-4, 2, -3);
scene.add(pointlight);
scene.add(pointlight2);
/*
const pointLightHelper = new THREE.PointLightHelper(pointlight);
scene.add(pointLightHelper);
const pointLightHelper2 = new THREE.PointLightHelper(pointlight2);
scene.add(pointLightHelper2);
const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
scene.add(light);
directLight1 = new THREE.DirectionalLight(0xffd798, 2);
directLight1.castShadow = false;
directLight1.position.set(9.5, 8.2, 8.3);
scene.add(directLight1);
pointlight = new THREE.PointLight(0xffffff, 2, 200);
pointlight2 = new THREE.PointLight(0xd70000, 2, 400);
pointlight.castShadow = false;
pointlight.position.set(10, 10, 10);
pointlight2.castShadow = false;
pointlight2.position.set(50, 0, 200);
scene.add(pointlight);
directLight2 = new THREE.DirectionalLight(0xc9ceff, 2);
directLight2.castShadow = false;
directLight2.position.set(-15.8, 5.2, 8);
scene.add(directLight2);*/
/*
var directionalLightHelper = new THREE.DirectionalLightHelper(directLight2, 5);
scene.add(directionalLightHelper)*/
}
//sky box
function drawbackground() {
let materialArray = [];
let texture_ft = new THREE.TextureLoader().load('img/skybox/sky_ft.jpg');
let texture_bk = new THREE.TextureLoader().load('img/skybox/sky_bk.jpg');
let texture_up = new THREE.TextureLoader().load('img/skybox/sky_up.jpg');
let texture_dn = new THREE.TextureLoader().load('img/skybox/sky_dn.jpg');
let texture_rt = new THREE.TextureLoader().load('img/skybox/sky_rt.jpg');
let texture_lt = new THREE.TextureLoader().load('img/skybox/sky_lt.jpg');
materialArray.push(new THREE.MeshBasicMaterial({
map: texture_ft
}));
materialArray.push(new THREE.MeshBasicMaterial({
map: texture_bk
}));
materialArray.push(new THREE.MeshBasicMaterial({
map: texture_up
}));
materialArray.push(new THREE.MeshBasicMaterial({
map: texture_dn
}));
materialArray.push(new THREE.MeshBasicMaterial({
map: texture_rt
}));
materialArray.push(new THREE.MeshBasicMaterial({
map: texture_lt
}));
for (let i = 0; i < 6; i++)
materialArray[i].side = THREE.BackSide;
let skyboxGeo = new THREE.BoxGeometry(1000, 1000, 1000);
skybox = new THREE.Mesh(skyboxGeo, materialArray);
scene.add(skybox);
}
//mouse Move
function onMouseMove(event) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
//point button position
function onDocumentMouseDown(event) {
// Welcome to the exciting world of raycasting !
// First let's get some mouse coordinates:
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// This is basically converting 2d coordinates to 3d Space:
raycaster.setFromCamera(mouse, camera);
// And checking if it intersects with an array object
var intersects = raycaster.intersectObjects(objects);
// does your cursor intersect the object on click ?
//console.log(intersects.length > 0 ? "yes" : "no");
// And finally change the color:
if (intersects.length > 0) {
let obj = intersects[0].object;
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
}
}
function drawCloud() {
cloud = new Cloud();
scene.add(cloud.group);
}
function drawSky() {
sky = new Sky();
sky.showNightSky(night);
scene.add(sky.group);
}
function onResize() {
width = window.innerWidth;
height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function onMouseDown(event) {
mouseDown = true;
}
function onTouchStart(event) {
// const targetClass = event.target.classList[0];
// if (targetClass === 'toggle' || targetClass === 'toggle-music') return;
event.preventDefault();
mouseDown = true;
}
function onMouseUp() {
mouseDown = false;
}
function onTouchEnd(event) {
// const targetClass = event.target.classList[0];
//if (targetClass === 'toggle' || targetClass === 'toggle-music') return;
event.preventDefault();
mouseDown = false;
}
function rad(degrees) {
return degrees * (Math.PI / 180);
}
function animate() {
requestAnimationFrame(animate);
camera.updateProjectionMatrix();
TWEEN.update();
render();
}
function render() {
updateScreenPosition();
// console.log(directLight3, camera.position);
// directLight3.position.copy(camera.position);
// updateAnnotationOpacity();
// console.log(group);
group.rotation.y += 0.0005;
skybox.rotation.y += 0.001;
sky.moveSky();
renderer.render(scene, camera);
}
$(document).on("touchstart click", ".point01", function() {
window.location.href = "http://www.hkosl.com/excland/view/index.php";
});
$(document).on("touchstart click", ".navigation__button", function() {
$(".navigation__nav").toggleClass("active");
$(this).toggleClass("active");
});
// call this to make the model larger/ zoom in
/* $(document).on("click", ".point01", function() {
var zoom = {
value: camera.zoom
};
var zoomEnd = {
value: 2
};
var tween = new TWEEN.Tween(zoom).to(zoomEnd, 600);
tween.onUpdate(function() {
camera.zoom = zoom.value;
});
tween.start();
setTimeout(function() {
$("body").fadeOut();
window.location.href = "http://www.hkosl.com/excland/view/index.php";
}, 1000);
});*/
class Cloud {
constructor() {
this.group = new THREE.Group();
this.group.position.y = -2;
this.group.scale.set(1.5, 1.5, 1.5);
this.material = new THREE.MeshStandardMaterial({
color: 0xacb3fb,
roughness: 1,
shading: THREE.FlatShading
});
this.vAngle = 0;
this.drawParts();
this.group.traverse((part) => {
part.castShadow = true;
part.receiveShadow = true;
});
}
drawParts() {
const partGeometry = new THREE.IcosahedronGeometry(1, 1, 1);
this.upperPart = new THREE.Mesh(partGeometry, this.material);
this.group.add(this.upperPart);
this.leftPart = this.upperPart.clone();
this.leftPart.position.set(-1.2, -0.3, 0);
this.leftPart.scale.set(1, 1, 1);
this.group.add(this.leftPart);
this.rightPart = this.leftPart.clone();
this.rightPart.position.x = -this.leftPart.position.x;
this.group.add(this.rightPart);
this.frontPart = this.leftPart.clone();
this.frontPart.position.set(0, -0.4, 0.9);
this.frontPart.scale.set(0.02, 0.02, 0.02);
this.group.add(this.frontPart);
this.backPart = this.frontPart.clone();
this.backPart.position.z = -this.frontPart.position.z;
this.group.add(this.backPart);
}
bend() {
this.vAngle += 1;
this.upperPart.position.y = -Math.cos(this.vAngle) * 0.12;
this.leftPart.position.y = -Math.cos(this.vAngle) * 0.1 - 0.3;
this.rightPart.position.y = -Math.cos(this.vAngle) * 0.1 - 0.3;
this.frontPart.position.y = -Math.cos(this.vAngle) * 0.08 - 0.3;
this.backPart.position.y = -Math.cos(this.vAngle) * 0.08 - 0.3;
}
}
class Sky {
constructor() {
this.group = new THREE.Group();
this.daySky = new THREE.Group();
this.nightSky = new THREE.Group();
this.group.add(this.daySky);
this.group.add(this.nightSky);
this.colors = {
day: [0xFFFFFF, 0xEFD2DA, 0xC1EDED, 0xCCC9DE],
night: [0x5DC7B5, 0xF8007E, 0xFFC363, 0xCDAAFD, 0xDDD7FE],
};
// this.drawSky('day');
// this.drawSky('night');
// this.drawNightLights();
}
drawSky(phase) {
for (let i = 0; i < 20; i++) {
const geometry = new THREE.SphereGeometry(0.1, 20, 20);
const material = new THREE.MeshStandardMaterial({
color: this.colors[phase][Math.floor(Math.random() * this.colors[phase].length)],
roughness: 1000,
shading: THREE.FlatShading
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set((Math.random() - 0.5) * 30,
(Math.random() - 0.5) * 30,
(Math.random() - 0.5) * 30);
if (phase === 'day') {
this.daySky.add(mesh);
} else {
this.nightSky.add(mesh);
}
}
}
drawNightLights() {
const geometry = new THREE.SphereGeometry(0.1, 5, 5);
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 1,
shading: THREE.FlatShading
});
for (let i = 0; i < 3; i++) {
const light = new THREE.PointLight(0xffffff, 2, 30);
const mesh = new THREE.Mesh(geometry, material);
light.add(mesh);
light.position.set((Math.random() - 2) * 6,
(Math.random() - 2) * 6,
(Math.random() - 2) * 6);
light.updateMatrix();
light.matrixAutoUpdate = false;
this.nightSky.add(light);
}
}
showNightSky(condition) {
if (condition) {
this.daySky.position.set(100, 100, 100);
this.nightSky.position.set(0, 0, 0);
} else {
this.daySky.position.set(0, 0, 0);
this.nightSky.position.set(100, 100, 100);
}
}
moveSky() {
this.group.rotation.x += 0.001;
this.group.rotation.y -= 0.004;
}
}
/*
const toggleBtn = document.querySelector('.toggle');
toggleBtn.addEventListener('click', toggleNight);
const worldMusic = document.querySelector('.world-music');
const btnMusic = document.querySelector('.toggle-music');
let playMusic = false;
btnMusic.addEventListener('click', toggleMusic);
worldMusic.volume = 0.3;
worldMusic.loop = true;
function toggleNight() {
night = !night;
toggleBtn.classList.toggle('toggle-night');
world.classList.toggle('world-night');
sky.showNightSky(night);
}
function toggleMusic() {
playMusic = !playMusic;
btnMusic.classList.toggle('music-off');
playMusic ? worldMusic.play() : worldMusic.pause();
}*/
function updateScreenPosition() {
const vector = new THREE.Vector3(1, 1, 1);
const canvas = renderer.domElement;
vector.project(camera);
cubes.forEach((cubeInfo, ndx) => {
const {
cube,
elem
} = cubeInfo;
const speed = 1 + ndx * .1;
// cube.position.x = 10;
// cube.position.y += 0.001;
// get the position of the center of the cube
cube.updateWorldMatrix(true, false);
cube.getWorldPosition(vector);
// get the normalized screen coordinate of that position
// x and y will be in the -1 to +1 range with x = -1 being
// on the left and y = -1 being on the bottom
vector.project(camera);
// convert the normalized position to CSS coordinates
const x = (vector.x * .5 + .5) * canvas.clientWidth;
const y = (vector.y * -.5 + .5) * canvas.clientHeight;
// move the elem to that position
elem.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
const cube1 = cubes1[ndx].cube1;
const meshDistance = camera.position.distanceTo(cube.position);
const spriteDistance = camera.position.distanceTo(cube1.position);
const spriteBehindObject = spriteDistance < meshDistance;
//cube.material.opacity = spriteBehindObject ? 0 : 1;
switch (cube1.name) {
case '1':
document.querySelector('.point01').style.opacity = spriteBehindObject ? 0.25 : 1;
break;
case '2':
document.querySelector('.point02').style.opacity = spriteBehindObject ? 0.25 : 1;
break;
case '3':
document.querySelector('.point03').style.opacity = spriteBehindObject ? 0.25 : 1;
break;
}
// annotation.style.opacity = 0;
// cube.material.opacity = 0;
// console.log("sprit" + spriteDistance + ",mesh" + meshDistance + ",cube" +cube1);
// console.log(cube1);
// console.log(spriteBehindObject);
});
// vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio));
// vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));
// annotation.style.transform = `translate(-20%, -20%) translate(${vector.x}px,${vector.y}px)`;
// annotation.style.transform = `translate(-20%, -20%) translate(${mainobj.position.x}px,${mainobj.position.y}px)`;
}
init();
animate();
</script>
</body>
</html>