100 lines
3.0 KiB
HTML
100 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>GLB缩略图</title>
|
|
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.threejs {
|
|
text-align: center;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.threejs>div {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: auto;
|
|
}
|
|
|
|
.threejs>a {
|
|
border: 1px solid #026704;
|
|
border-radius: 0.5em;
|
|
padding: 0.5em 1em;
|
|
background: #1a9d03;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-top: 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="threejs">
|
|
<div id="canvas-three"></div>
|
|
<a onclick="saveScreenshot()">保存</a>
|
|
</div>
|
|
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
|
<script type="text/javascript" src="/zthreejs/three.js"></script>
|
|
<script type="text/javascript" src="/zthreejs/loaders/GLTFLoader.js"></script>
|
|
<script type="text/javascript" src="/zthreejs/controls/OrbitControls.js"></script>
|
|
<script type="text/javascript" src="/zthreejs/loaders/meshopt_decoder.js"></script>
|
|
<script>
|
|
var Glob = ciyfn.urlparam();
|
|
var scene, camera, renderer, controls, gltfLoader, model, controls;
|
|
var canvasWrapper = document.getElementById('canvas-three');
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x888888);
|
|
camera = new THREE.PerspectiveCamera(75, canvasWrapper.clientWidth / canvasWrapper.clientHeight, 0.1, 1000);
|
|
renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true,alpha: false });
|
|
renderer.setSize(canvasWrapper.clientWidth, canvasWrapper.clientHeight);
|
|
canvasWrapper.appendChild(renderer.domElement);
|
|
gltfLoader = new THREE.GLTFLoader();
|
|
gltfLoader.setMeshoptDecoder(MeshoptDecoder);
|
|
gltfLoader.load(Glob.glb, function (gltf) {
|
|
model = gltf.scene;
|
|
scene.add(model);
|
|
var box = new THREE.Box3().setFromObject(model);
|
|
var size = box.getSize(new THREE.Vector3());
|
|
var maxDimension = Math.max(size.x, size.y, size.z);
|
|
var fov = camera.fov * (Math.PI / 180);
|
|
camera.position.z = Math.abs(maxDimension / 2 / Math.tan(fov / 2));
|
|
camera.updateProjectionMatrix();
|
|
controls.saveState(); // 保存当前状态
|
|
controls.update(); // 更新控制状态
|
|
|
|
}, undefined, function (error) {
|
|
console.error(error);
|
|
});
|
|
scene.add(new THREE.AmbientLight(0xffffff, 1));
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 参数1: 颜色, 参数2: 强度
|
|
directionalLight.position.set(5, 5, 5);
|
|
scene.add(directionalLight);
|
|
controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
controls.addEventListener('change', render);
|
|
controls.target.set(0, 0, -0.2);
|
|
controls.update();
|
|
animate();
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function saveScreenshot() {
|
|
var imgbase64 = renderer.domElement.toDataURL('image/jpeg', 0.6);
|
|
ciyfn.sendsignal(window.top, 'alert_done', { btn: '提交', inputs:{ data: imgbase64 }});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |