File: /var/www/html/www.winghung.com/demo/canvas.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;
if(isset($_GET['hash']) && $_GET['hash']!=""){
$result = $wpdb->get_results("SELECT * FROM `custom_upload_files` WHERE hash = '".$_GET['hash']."' LIMIT 1");
$file = $result[0]->file;
} else {
$file = "test.jpg";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.module.js"
}
}
</script>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three@0.130.0';
import {
OrbitControls
} from 'https://unpkg.com/three@0.130.0/examples/jsm/controls/OrbitControls.js';
var setting = {
'type': '<?php echo $_GET['type'];?>',
'dimension': {
'length': <?php echo $_GET['length'];?>,
'width': <?php echo $_GET['width'];?>,
'height': 0
},
'iphone': {
'length': 7.2,
'width': 0.7,
'height': 14.7
},
'position': {
'posX': 15,
'posY': 40,
'posZ': 0
},
'background': {
'color': 0x000000,
'opacity': 0.1
},
'camera': {
'posX': 0,
'posY': 0,
'posZ': 100
},
'light': {
'color': 0xffffff,
'posX': 0,
'posY': 10,
'posZ': -20
},
'material': [{
'color': 0xe3fefe,
'opacity': '1.0',
'transparent': false
},
{
'color': 0x000000,
'opacity': '1.0',
'transparent': false
},
],
'outline': {
'color': 0xcccccc,
'opacity': 1.0
}
}
const scene = new THREE.Scene();
//scene.background = new THREE.Color( 0xff0000 );
const loader = new THREE.TextureLoader();
//const bgTexture = loader.load('asset/spotlight-wall.jpg');
const bgTexture = loader.load('asset/canvas-background.jpg');
scene.background = bgTexture;
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(setting.camera.posX, setting.camera.posY, setting.camera.posZ); // 相機位置
camera.lookAt(scene.position); // 相機焦點
// 建立光源
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(setting.position.posX, setting.position.posY,
<?php echo max($_GET['length'], $_GET['width']);?>);
pointLight.castShadow = true;
scene.add(pointLight);
/*
pointLight.shadow.mapSize.width = 512; // default
pointLight.shadow.mapSize.height = 512; // default
pointLight.shadow.camera.near = 0.5; // default
pointLight.shadow.camera.far = 500; // default
const helper = new THREE.CameraHelper( pointLight.shadow.camera );
scene.add( helper );
*/
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 0, 200);
//scene.add( spotLight );
const ambientLight = new THREE.AmbientLight('#ffffff');
//scene.add(ambientLight);
// const renderer = new THREE.WebGLRenderer({alpha: true});
var renderer = new THREE.WebGLRenderer();
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 12, 0);
light.castShadow = true; // default false
light.shadow.mapSize.width = 2000; // default 512
light.shadow.mapSize.height = 2000; // default 512
light.shadow.camera.near = 2; // default 0.5
light.shadow.camera.far = 100; // default 500
light.shadow.camera.left = 500 // Not sure about this one +
// right, top and bottom, Do they still do anything?
scene.add(light);
renderer.shadowMap.enable = true; //陰影效果
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(setting.background.color, setting.background.opacity); //預設背景顏色
document.body.appendChild(renderer.domElement);
//const controls = new OrbitControls(camera, renderer.domElement);
const textureLoader = new THREE.TextureLoader();
const image = 'upload/<?php echo $file;?>';
const group = new THREE.Group();
const phoneGroup = new THREE.Group();
const cardGroup = new THREE.Group();
const cardGeometry = new THREE.PlaneGeometry(setting.dimension.length, setting.dimension.width);
//const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var frontCardPlaneMat = new THREE.MeshPhongMaterial({
<?php if ($file!="") { ?>
map: new THREE.TextureLoader().load(image, tex => {
}),
<?php } ?>
color: setting.material[0].color,
opacity: setting.material[0].opacity,
transparent: setting.material[0].transparent,
side: THREE.FrontSide
});
if (setting.type == "landscape" || setting.type == "portrait") {
// front card
const card = new THREE.Mesh(cardGeometry, frontCardPlaneMat);
card.position.set(setting.position.posX, setting.position.posY, setting.position.posZ);
card.receiveShadow = true;
card.castShadow = true;
spotLight.shadow.mapSize.width = 2000;
spotLight.shadow.mapSize.height = 2000;
cardGroup.add(card);
const card2 = new THREE.Mesh(
new THREE.PlaneGeometry(setting.dimension.length * 1.1, setting.dimension.width * 1.1),
new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load('asset/wood.jpg', tex => {
}),
//color: setting.material[1].color,
transparent: false,
opacity: 1
})
);
card2.position.set(setting.position.posX, setting.position.posY, setting.position.posZ - 0.1);
card2.receiveShadow = true;
card2.castShadow = true;
spotLight.shadow.mapSize.width = 2000;
spotLight.shadow.mapSize.height = 2000;
cardGroup.add(card2);
}
group.add(cardGroup);
// iphone object
/*
const phoneGeometry = new THREE.BoxGeometry(setting.iphone.length, setting.iphone.height, setting.iphone.width);
const phoneTexture = textureLoader.load("asset/iphone.png");
var phoneMaterial = [
new THREE.MeshBasicMaterial({
color: setting.material[1].color,
opacity: setting.material[1].opacity,
transparent: setting.material[1].transparent,
}),
new THREE.MeshBasicMaterial({
color: setting.material[1].color,
opacity: setting.material[1].opacity,
transparent: setting.material[1].transparent,
}),
new THREE.MeshBasicMaterial({
color: setting.material[1].color,
opacity: setting.material[1].opacity,
transparent: setting.material[1].transparent,
}),
new THREE.MeshBasicMaterial({
color: setting.material[1].color,
opacity: setting.material[1].opacity,
transparent: setting.material[1].transparent,
}),
new THREE.MeshBasicMaterial({
color: setting.material[0].color,
opacity: setting.material[0].opacity,
transparent: setting.material[0].transparent,
map: phoneTexture,
}),
new THREE.MeshBasicMaterial({
color: setting.material[1].color,
opacity: setting.material[1].opacity,
transparent: setting.material[1].transparent,
}),
];
//const phoneMaterial = new THREE.MeshBasicMaterial({map:phoneTexture});
const phone = new THREE.Mesh(phoneGeometry, phoneMaterial);
phone.position.set(setting.iphone.length/2+5/2, setting.position.posY, setting.position.posZ);
phoneGroup.add(phone);
group.add(phoneGroup);
*/
scene.add(group);
/* box helper */
//const boxHelper = new THREE.BoxHelper( box, 0x000000 );
//scene.add( boxHelper );
/* grid helper
const size = 100;
const divisions = 100;
const gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
*/
/* spotlight helper
const spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );
*/
/* pointlight helper
const sphereSize = 30;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );
*/
/* axes helper
const axesHelper = new THREE.AxesHelper( 100 );
scene.add( axesHelper );
*/
/* camera helper
const camerhelper = new THREE.CameraHelper( camera );
scene.add( camerhelper );
*/
//camera.position.z = 5;
function animate() {
//sphere.rotation.x += 0.01;
//sphere.rotation.y += 0.01;
//box.rotation.x += 0.01;
//box.rotation.y += 0.01;
requestAnimationFrame(animate);
//controls.update();
renderer.render(scene, camera);
}
// 監聽螢幕寬高來做簡單 RWD 設定
window.addEventListener('resize', function() {
console.log("run");
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
})
animate();
</script>
</body>
</html>