推荐网站：WebGL中文网www.hewebgl/
里面有教程，初级教程免费 ，其余要收费
three.js：/
three.js-master包里面有很多很有趣的例子，在three.js-master\examples下，你可以一个一个点开看有没有需要的
WebGL中文网和Three.js入门指南一起看就可以了，入门指南有一些例子不能出来，但是讲得也不错，代码里面的结构根据webGL中文网例子来编写的
一、基本需要
初始化：
1.渲染器（renderer）——渲染物体的，在web浏览器中必须有一个平台显示3d效果
2.照相机（camera）——视角，展现在我们面前的
3.场景（scene）
4.灯光（light）
5.物体（object）
渲染部分：
der(scene, camera);
2.requestAnimationFrame(animate);
1.初始化渲染器：
three.js的渲染器主要有WebGLRenderer和CanvasRenderer，
渲染的效果不同有细微差异，我们使用的是WebGLRenderer，当你使用渲染器时，一般在html页面上加入<div>标签——>这里的div标签是<div id="canvasframe"></div>
代码：
renderer = new THREE.WebGLRenderer({antialias: true});//开启WebGL抗锯齿
width = ElementById('canvasframe').clientWidth;
height = ElementById('canvasframe').clientHeight;
renderer.setSize(width, height);
ElementById('canvasframe').appendChild(renderer.domElement);
你也可以不需要div标签创建渲染器
代码：
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
2.照相机——这块在WebGL中文网讲解得比较详细
three.js提供两类照相机，一类是OrthographicCamera（正交相机），一类是PerspectiveCamera（透视相机）
正交就是高中老师画正方形那种，没有近大远小，透视相机有。我们使用的是透视相机
代码：
camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
camera.position.set(lengthX,lengthY, 100);
camera.up = new THREE.Vector3(0,0,1);
THREE.PerspectiveCamera(fov, aspect, near, far)
fov：视角度数，可以理解为眼睛睁开大小，度数越大，你看到的物体越多，物体越小
aspect：是照相机水平方向和竖直方向长度的比值，一般等于width/height
near和far：是相机最近和最远的距离，均为正值，far>>near
camera.position.set(x,y,z);照相机的位置
camera.up = new THREE.Vector3(0,0,1);
cmmera.up哪个轴是向上的，three.js默认是右手坐标轴，即y轴向上，这里我们让z轴向上
camera.position = new THREE.Vector3(0,0,1)和camera.up.set(0,0,1)一样的效果。
3.场景
一般只需要scene = new THREE.Scen();新建场景就可以了
源代码中加入了scene.fog = new THREE.FogExp2(0xcccccc,0.002);使场景产生雾效果
FogExp2(hex,density)
hex,雾的颜如果设置为黑，远处的物体将呈现黑
density：定义雾增长速度如何密集。默认为0.00025。position标签属性
4.灯光
有几种灯光，常用的有AmbintLight（环境光），directionalLight（平行光），PointLigth（点光源），spotLight（聚光灯），其他的你可以在官方文档里查使用，初始化都比较简单，以程序里的平行光为例
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
设置平行光颜为白，在坐标（1,1,1）的位置，平行光类似太阳关照，添加到场景中
5.物体
就是放在场景中的物体，
普通的物体有两种属性，一个是它的材质material，一个是它的模型geometry（就是它长什么样子）。
代码：
var material = new THREE.MeshLambertMaterial({color:color });
var geometry = new THREE.CylinderGeometry(radius,radius,height,radius*100,0,false);
geometry.applyMatrix( new THREE.Matrix4().setRotationFromEuler( new THREE.Vector3( Math.PI / 2, Math.PI, 0 ) ) );
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
黄高亮是three.js里面产生圆柱体的主要效果，下划线是对物体进行处理
material——材质，three.js有多种材质可选
Lambert材质：Lambert 材质（MeshLambertMaterial）是符合 Lambert 光照模型的材质。大部分物体的漫反射效果都适用的。就是说光的颜和它本身的颜是啥，它就照成啥
THREE.MeshLambertMaterial({color:color });
phong材质也比较适合管道：与lambert材质不一样的地方是，它加入了镜面反射的效果，也就是会有光斑
  var material = new THREE.MeshPhongMaterial({
color:color,
specular:0xffffff,
shininess:100
});
spcular:光斑的颜
shininess:光斑大小，值越小，光斑越不明显，不能设为0，30是默认值（0-100）就可。
其他材质的学习可以参照three.js和入门指南。（在这快有一个很好的例子，你可以尝试一下）
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)函数创建了一个圆柱体，这个函数默认在原点（0,0,0）坐标创建，中心点也在原点，并且方向方向向y轴，你可以通过position和rotation属性分别改变它的位置和旋转角度，rotation属性要注意的一点是它里面的3个值分别表示弧度。
比如ation=new THREE.Vector3(0.1,0.2,0.3);
圆柱体绕x轴旋转的弧度是0.1，绕y轴旋转的弧度是0.2，绕z轴旋转的弧度是0.3。
radiusTop：顶面半径
radiusBottom：底面半径
height：圆柱高
radiusSegments：半径分段，就是一个圆被分成了多少份（像切蛋糕一样），值越大，圆柱就越平滑
heightSegments：高度分段，因为我们圆柱顶面半径，底面半径都是相同的，所以这个值
就没有意义了，所以我们直接设为0。
openEnded 是一个布尔值，表示是否没有顶面和底面，缺省值为 false ，表示有顶面和底面。
<——radiusSegments和heightSegments的分段的效果
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
把material材质赋给geometry，在场景中添加这一个物体。
动画渲染效果：
function render(){
    der( scene, camera );//把照相机给场景
}
动画的实现是通过在每秒钟多次重绘画面实现的，为了衡量画面切换速度，引入了每秒帧数FPS(Frames Per Second)的概念，是指每秒画面重绘的次数，FPS越大，则动画效果越平滑，当FPS小于20时，一般就能明显感受到卡顿
requestAnimationFrame:不断重绘
three.js里面除了requestAnimationFrame方法，还有setInterval(func,mesc)，可以设置特定的FPS，
func:每过mesc毫秒执行的函数，如果将func定义为重绘画面的函数，就能实现动画效果（入门指南P88）
function animation(){
    requestAnimationFrame(animate);// 反复渲染成为3d效果
    render();//由于requestAnimationFrame只请求一帧画面，除了在init函数中需要调用，//在被其调用的函数中需要再次调用requestAnimationFrame。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。