webGL入门（1）创建第一个webGL程序

最新推荐文章于 2024-04-09 19:39:36 发布

cg宁静致远

最新推荐文章于 2024-04-09 19:39:36 发布

阅读量331

点赞数

文章标签： three.js webgl

本文链接：https://blog.csdn.net/cg870429/article/details/110211505

版权

webGL入门（1）创建第一个webGL程序

createScense.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>create Scense</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="../three.js"></script>
        <script src="createScense.js"></script>
	</body>
</html>

createScense.js 文件

// 创建场景
let scene=new THREE.Scene()
// 创建透视相机
let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
//创建webGL渲染器
let renderer =new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth,window.innerHeight)
// 添加渲染DEOM
document.body.appendChild(renderer.domElement)
//添加正方体(几何体)
let geometry=new THREE.BoxGeometry(1,1,1)
//材质
let material=new THREE.MeshBasicMaterial({color:0x00ff00})
//网格
var cube=new THREE.Mesh(geometry,material)
//添加到场景
scene.add(cube)
camera.position.z=5

//渲染  渲染循环”（render loop）或者“动画循环”（animate loop）
function animate() {
    requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
	renderer.render( scene, camera );
}
animate();