# three.js 画一个滚动立方体

原创已于 2022-09-07 11:23:19 修改 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2022-09-07 11:21:20 首次发布

这篇博客展示了如何使用three.js库创建一个3D旋转立方体。首先定义了场景、透视相机和WebGL渲染器，然后创建BoxGeometry几何体，用MeshBasicMaterial赋色，并组合成网格对象。接着将立方体添加到场景中，调整相机位置，最后通过requestAnimationFrame实现立方体的连续旋转动画。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="three.js"></script>
		<script>
			// 场景
				const scene = new THREE.Scene();
			// 相机（相机视场度，宽高比，剪切平面）
				const camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight , 0.1, 1000 );
			// 渲染器
				const renderer = new THREE.WebGLRenderer();
					// 设置宽高，及分辨率
				renderer.setSize( window.innerWidth, window.innerHeight,false );
					// 加入容器
				document.body.appendChild( renderer.domElement );

			// 添加立方体
				const geometry = new THREE.BoxGeometry( 1, 1, 1 );//点
				const material = new THREE.MeshBasicMaterial( { color: '#999' } );//颜色
				const 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();
		</script>
	</body>
</html>