请修改代码将模型展示器大小设置为750600 !DOCTYPE html html head title3D模型展示器title style body margin 0; padding 0; overflow hidden; canvas
<!DOCTYPE html>
<html>
<head>
<title>3D模型展示器</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
<pre><code> canvas {
display: block;
width: 750px;
height: 600px;
}
</style>
</code></pre>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kjdsakd/ThreeJS-tools/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kjdsakd/ThreeJS-tools/GLTFLoader.js"></script>
<pre><code><script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, 750 / 600, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor("#ffffff");
renderer.setSize(750, 600);
document.body.appendChild(renderer.domElement);
// 创建控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 加载模型
const loader = new THREE.GLTFLoader();
loader.load('src/assets/zhanguan.glb', (gltf) => {
const model = gltf.scene;
scene.add(model);
});
// 渲染场景
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// 监听窗口大小变化
window.addEventListener('resize', () => {
renderer.setSize(750, 600);
camera.aspect = 750 / 600;
camera.updateProjectionMatrix();
});
// 页面居中
function center() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const left = (window.innerWidth - width) / 2;
const top = (window.innerHeight - height) / 2;
canvas.style.left = left + 'px';
canvas.style.top = top + 'px';
}
center();
window.addEventListener('resize', center);
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bO5F 著作权归作者所有。请勿转载和采集!