File: /var/www/html/www.winghung.com/demo_v6/test2.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 async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.130.0/build/three.module.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';
const scene = new THREE.Scene();
//scene.background = new THREE.Color( 0xff0000 );
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(10, 10, 10); // 相機位置
camera.lookAt(scene.position); // 相機焦點
// 建立光源
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(30,30,0);
//scene.add(pointLight);
const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set(40,40,0 );
//scene.add( spotLight );
const ambientLight = new THREE.AmbientLight('#ffffff');
scene.add(ambientLight);
// 建立光源
/*
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(setting.light.posX, setting.light.posY, setting.light.posZ);
scene.add(pointLight);
*/
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 1.0); //預設背景顏色
renderer.shadowMap.enable = true; //陰影效果
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
const geometry = new THREE.PlaneGeometry(2, 2);
const material1 = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.FrontSide} );
const material2 = new THREE.MeshBasicMaterial( {color: 0xff0000, side: THREE.BackSide} );
const cubeA = new THREE.Mesh( geometry, material1 );
cubeA.position.set(2,0,2);
const cubeB = new THREE.Mesh( geometry, material2 );
cubeB.position.set(2,0,2);
//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );
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( 10 );
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>