webGL学习笔记一
Posted 超小级小萝莉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webGL学习笔记一相关的知识，希望对你有一定的参考价值。
一直对WEBGL感兴趣，终于提起精神学习了，前路漫漫啊~
来源：WEBGL中文网 http://www.hewebgl.com
1、三大组建
在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
记住关建语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去。
2、相机
另一个组建是相机，相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。
场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。
3、渲染器
最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
4、添加物体到场景中
5、渲染
6、渲染循环
实例一，初探：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初探</title> <style>canvas { width: 100%;height:100%}</style> <script src="lib/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>
以上是关于webGL学习笔记一的主要内容，如果未能解决你的问题，请参考以下文章