three.js加载的3D模型可以随视口变大变小吗
时间: 2023-12-03 07:03:10 浏览: 102
可以的。在Three.js中,当你使用 `PerspectiveCamera` 时,随着视口的变化,物体的大小会自动适应。这是因为 `PerspectiveCamera` 使用的是透视投影,它会根据视口的比例自动调整物体的大小和位置,以保持其在视口中的透视效果。
以下是一个简单的示例代码,用于加载一个3D模型,并使其自适应视口大小:
```html
<!DOCTYPE html>
<html>
<head>
<title>Three.js Model</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let camera, scene, renderer, mesh;
init();
animate();
function init() {
// 创建相机
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 2;
// 创建场景
scene = new THREE.Scene();
// 加载模型
const loader = new THREE.GLTFLoader();
loader.load( 'path/to/model.gltf', function ( gltf ) {
mesh = gltf.scene.children[0];
scene.add( mesh );
}, undefined, function ( error ) {
console.error( error );
} );
// 创建渲染器
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 添加事件监听器
window.addEventListener( 'resize', onWindowResize );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>
```
这段代码加载了一个glTF格式的3D模型,并使用 `PerspectiveCamera` 创建了一个透视投影相机。当窗口大小发生变化时,相机会根据新的视口大小自适应调整模型的大小和位置,以保持其在视口中的透视效果。
阅读全文