WebGL之Three.js的学习之路,WebGL本身学习起来不太容易,偶尔发现Three.js库封装的很好,简单记录下学习语法。
首先Three分三大块来组装:
(1)场景(scene)
(2)相机(camera)
(3)渲染器(renderer)
如何创建这三大块呢?直接代码来展示
场景:
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(400, 300); // 设置渲染器的宽度和高度 document.body.appendChild(renderer.domElement); // 添加到页面当中
OK,基本框架完成。
第二步:将物体添加到场景中去
var geometry = new THREE.CubeGeometry(1, 1, 1); // 生成立方体,参数是X轴 Y轴 Z轴的长度 var material = new THREE.MeshBasicMaterial({color: 0xff0000}); // 立方体纹理 var cube = new THREE.Mesh(geometry, material); // 将纹理覆盖到立方体上 scene.add(cube); // 将立方体添加到场景中
第三步:渲染
下面使用渲染器将立方体渲染到页面中去,实现这功能的函数是:
renderer.render(scene, camera); // 看参数名字就知道 scene是场景,camera是相机
OK,接下来看全部代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="../js/three.js"></script>
</head>
<body>
<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.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material); scene.add(cube);
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>