帮我写一个用html页面,用three搭建一个基本场景,需要有一个模型,可以旋转,可以在模型里放大缩小,可以用键盘操控移动相机
时间: 2023-05-23 14:03:25 浏览: 50
好的,以下是一个简单的用HTML页面,使用Three.js搭建基本场景的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js Scene</title>
<style>
body
{
margin: 0;
overflow: hidden;
}
canvas
{
display: block;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate()
{
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
document.addEventListener("keydown", function(event)
{
if(event.keyCode == 37) // Left arrow
{
camera.position.x -= 0.1;
}
else if(event.keyCode == 38) // Up arrow
{
camera.position.y += 0.1;
}
else if(event.keyCode == 39) // Right arrow
{
camera.position.x += 0.1;
}
else if(event.keyCode == 40) // Down arrow
{
camera.position.y -= 0.1;
}
else if(event.keyCode == 187) // Plus sign
{
cube.scale.x += 0.1;
cube.scale.y += 0.1;
cube.scale.z += 0.1;
}
else if(event.keyCode == 189) // Minus sign
{
cube.scale.x -= 0.1;
cube.scale.y -= 0.1;
cube.scale.z -= 0.1;
}
});
window.addEventListener( 'resize', function ()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
</script>
</body>
</html>
```
在这个场景中,我们创建了一个绿色的立方体模型,并使用键盘控制相机的移动和模型的缩放。请打开此HTML文件并在浏览器中查看,以便查看最终效果。