File: /var/www/html/www.winghung.com/demo_v4/box.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once('../wp-load.php');
session_start();
date_default_timezone_set("Asia/Hong_Kong");
global $wpdb, $sitepress;
$result = $wpdb->get_results("SELECT * FROM `custom_upload_files` WHERE hash = '".$_GET['hash']."' LIMIT 1");
$file = $result[0]->file;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Box</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$cubeSetting = {
'dimension': {
'length':<?php echo $_GET['length'];?>,
'width':<?php echo $_GET['height'];?>,
'height':<?php echo $_GET['width'];?>
},
'position': {
'posX':0,
'posY':0,
'posZ':0
},
'background':{
'color':0x000000,
'opacity':0.00
},
'camera':{
'posX':0,
'posY':<?php echo sqrt(pow($_GET['length'],2) + pow($_GET['width'],2) + pow($_GET['height'],2))*2/3;?>,
'posZ':-20
},
'light':{
'color':0xffffff,
'posX':0,
'posY':10,
'posZ':-20
},
'material':[
{'color':0xE1F8DC, 'opacity':'1.0', 'transparent':false},
{'color':0xCAF1DE, 'opacity':'1.0', 'transparent':false},
{'color':0xFEF8DD, 'opacity':'1.0', 'transparent':false},
{'color':0xFEF8DD, 'opacity':'1.0', 'transparent':false},
{'color':0xFFE7C7, 'opacity':'1.0', 'transparent':false},
{'color':0xF7D8BA, 'opacity':'1.0', 'transparent':false}
]
}
createCube($cubeSetting);
function createCube(obj){
// 建立場景
var scene = new THREE.Scene();
// 建立渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //場景大小
renderer.setClearColor(obj.background.color, obj.background.opacity); //預設背景顏色
renderer.shadowMap.enable = true; //陰影效果
document.body.appendChild(renderer.domElement); //將渲染器的 DOM 綁到網頁上
// 建立相機
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); //視角, 畫面寬高比, 近面距離, 遠面距離
camera.position.set(obj.camera.posX, obj.camera.posY, obj.camera.posZ); // 相機位置
camera.lookAt(scene.position); // 相機焦點
// 建立光源
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(obj.light.posX, obj.light.posY, obj.light.posZ);
scene.add(pointLight);
// 建立物體
var geometry = new THREE.BoxGeometry(obj.dimension.length, obj.dimension.width, obj.dimension.height); // 幾何體
const headMap = new THREE.TextureLoader().load(
'upload/<?php echo $file;?>'
)
// 材質
var material = [];
var material = [
new THREE.MeshPhongMaterial({
color: obj.material[0].color,
opacity: obj.material[0].opacity,
transparent: obj.material[0].transparent,
map: headMap, // main //
side: THREE.DoubleSide
}),
new THREE.MeshPhongMaterial({
color: obj.material[0].color,
opacity: obj.material[0].opacity,
transparent: obj.material[0].transparent,
map: headMap,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial( { transparent: true, opacity: 0, wireframe: true, side: THREE.DoubleSide} ),
new THREE.MeshPhongMaterial({
color: obj.material[0].color,
opacity: obj.material[0].opacity,
transparent: obj.material[0].transparent,
map: headMap,
side: THREE.DoubleSide
}),
new THREE.MeshPhongMaterial({
color: obj.material[0].color,
opacity: obj.material[0].opacity,
transparent: obj.material[0].transparent,
map: headMap,
side: THREE.DoubleSide
}),
new THREE.MeshPhongMaterial({
color: obj.material[0].color,
opacity: obj.material[0].opacity,
transparent: obj.material[0].transparent,
map: headMap,
side: THREE.DoubleSide
}),
];
// 建立網格物件
var cube = new THREE.Mesh(geometry, material);
cube.position.set(obj.position.posX, obj.position.posY, obj.position.posZ);
cube.rotation.x = Math.PI/14;
//cube.rotation.y = Math.PI/14;
scene.add(cube);
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
$(renderer.domElement).on('mousedown touchstart', function(e) { // action: 當mouse按下圖形
isDragging = true; // 設定為可拉動
}).on('mousemove', function(e) { // action: 當mouse移動圖形
//alert("start");
var deltaMove = {
x: e.offsetX-previousMousePosition.x,
y: e.offsetY-previousMousePosition.y
};
if(isDragging) { // 旋轉
var deltaRotationQuaternion = new THREE.Quaternion()
.setFromEuler(new THREE.Euler(
toRadians(deltaMove.y * 1),
toRadians(deltaMove.x * 1),
0,
'XYZ'
));
cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
}
previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
}).on('touchmove', function(e) {
if (e.touches.length === 1) {
var touch2 = e.touches[0];
var deltaMove = {
x: touch2.pageX-previousMousePosition.x,
y: touch2.pageY-previousMousePosition.y
};
if(isDragging) { // 旋轉
var deltaRotationQuaternion = new THREE.Quaternion()
.setFromEuler(new THREE.Euler(
toRadians(deltaMove.y * 1),
toRadians(deltaMove.x * 1),
0,
'XYZ'
));
cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
}
previousMousePosition = {
x: touch2.pageX,
y: touch2.pageY
};
}
});
$(document).on('mouseup touchend', function(e) { // action: 當mouse放開按鍵時
isDragging = false;
});
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 100);
};
})();
var lastFrameTime = new Date().getTime() / 1000;
var totalGameTime = 0;
function update(dt, t) {
setTimeout(function() {
var currTime = new Date().getTime() / 1000;
var dt = currTime - (lastFrameTime || currTime);
totalGameTime += dt;
update(dt, totalGameTime);
lastFrameTime = currTime;
}, 0);
}
// 建立動畫
function animate() {
//requestAnimationFrame( animate );
/** cube.rotation.x += 0.005;
cube.rotation.y += 0.005;
**/
//render();
}
// 渲染場景
function render() {
animate();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
update(0, totalGameTime);
function toRadians(angle) {
return angle * (Math.PI / 180);
}
function toDegrees(angle) {
return angle * (180 / Math.PI);
}
// 監聽螢幕寬高來做簡單 RWD 設定
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
})
render();
}
</script>
</body>
</html>