您的位置：首页 > Web前端 > JavaScript

HTML5画布知识：在Three.js文件实现WebGL Plane

2014-01-10 11:58 477 查看

创建一个WebGL Plane Three.js,我们可以实例化一个PlaneGeometry对象并定义其宽度沿x轴及其高度沿y轴。

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<script defer="defer">
// revolutions per second
var angularSpeed = 0.2;
var lastTime = 0;

// this function is executed on each animation frame
function animate(){
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
plane.rotation.z += angleChange;
lastTime = time;

// render
renderer.render(scene, camera);

// request new frame
requestAnimationFrame(function(){
animate();
});
}

// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = -450;
camera.position.z = 400;
camera.rotation.x = 45 * (Math.PI / 180);

// scene
var scene = new THREE.Scene();

// plane
var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshNormalMaterial());
plane.overdraw = true;
scene.add(plane);

// start animation
animate();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 在Three.js文件实现WebGL

相关文章推荐

新的分享

章节导航