Three.js第一个旋转正方形

最新推荐文章于 2023-10-08 11:17:51 发布

小七Zzzz

最新推荐文章于 2023-10-08 11:17:51 发布

阅读量447

点赞数

文章标签： 3D

本文链接：https://blog.csdn.net/qq_42769197/article/details/82849082

版权

关于我的THREE.JS的学习
three.js.min可以在https://github.com/mrdoob/three.js/下载

<!doctype html>

<html>
	<head>
		<title>My first Three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 60%; height: 60% }
		</style>
	</head>
	<body>
		<script src="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(2,2,1);
		   var meterial=new THREE.MeshBasicMaterial({color:0x00ff00});
           var cube=new THREE.Mesh(geometry,meterial);
        scene.add(cube);
		camera.position.z=5;
		var render=function(){
			requestAnimationFrame(render);
			cube.rotation.x +=0.1;
			cube.rotation.y +=0.1;
			renderer.render(scene,camera);
		};
		render();
		</script>
	</body>
</html>

可以实现一个旋转的正方体