学习three.js做的笔记

three.js需要场景（Scene）、相机（Renderer）、渲染器（Renderer）。
创建渲染器---
    var renderer=new THREE.WebGLRenderer({
        canvas:document.getElementById('mycanvas');
    });
    renderer.render(scene,camera);//开始渲染
如果用js生成canvas元素----
    var renderer=new THREE.WebGLRenderer();
    renderer.setSize(w,h);//设置canvas大小
    renderer.setClearColor(0x000000);//设置canvas背景色
    document.getElementsByTagName('body').appendChild(renderer.domElement);

创建场景---
    var scene=new THREE.Scene();

创建照相机---
    //参数分别为视角 长宽比，近处裁面距离，远处裁面距离
    var camera=new THREE.PerspectiveCamera(45,4/3,1,100);
    camera.position.set(0,0,5);//设置相机位置
    scene.add(camera);

    相机分两种：
        正交投影相机---Three.OrthographicCamera(left,right,top,bottom,near,far)
        //可视角度，实际窗口的纵横比，近处的裁面的距离，远处裁面的距离
        透视投影照相机---THREE,PerspectiveCamera(fov,aspect,near,far)
        

创建物体---
    长方体---
    var cube=new THREE.Mesh(new THREE.CubeGeometry(1,2,3),new THREE.MeshBasicMaterial({
        color:0xff0000
    }));
    scene.add(cube);//添加长方体到荧幕中
    其中CubeGeometry（立方体）参数为x,y,z,x方向的分段数，y方向的分段数，z方向的分段数
    其中MeshBasicMaterial(基础网格材质)  wireframe=true将材质渲染成线框

    平面---
    //x,y,x分段数，y分段数
    THREE.PlaneGeometry(width,height,widthsegments,heightSegments)
    
    //圆形或者扇形
    参数半径，经度上的分段数，纬度上的分段数，纬度上的分段数，纬度开始的弧度，纬度跨过的弧度
    THREE.CircleGeometry(r,segments,thetaStart,thetaLength)

    球体---
    //参数分别为半径，经度上分段数，纬度上分段数，经度开始的弧度，经度跨过的弧度，纬度开始的弧度，纬度跨过的弧度
    THREE.SphereGeometry(r,segmentsWidth,segmentsHeight,phiStart,PhiLength,thetaStart,thetaLength)

    圆柱体---
    THREE.CylinderGeometry(顶面半径,底面的半径,圆柱体的高度,顶面与底面的分段数,侧面的分段数,(是否没有顶面和底面，布尔类型，缺省值为false，表示有顶面和底面))

    正四面体（TetrahedronGeometry）、正八面体（OctahedronGeometry）、正二十面体（IcosahedronGeometry）

    圆环面---
    //圆环半径，管道半径，径向的分段数，管的分段数，圆环面的弧度（Math.PI*2）
    THREE.TorusGeometry(radius,tube,radialSegments,tubularSegments,arc)

    圆环结---
    //圆环半径，管道半径，径向的分段数，管的分段数，
    //p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数，其中p决定垂直方向的参数（可缺省）
    //水平方向的参数（可缺省），（z轴方向上的缩放，默认值1 ）
    THREE.TorusKnotGeometry(radius,tube,radialSegments,tubularSegments, p, q, heightScale)

材质---
    MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
    MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
    MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
    var material = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        opacity: 0.75
    });
    obj中的对象属性有---visible:是否可见
                side:渲染面片正面或是反面，默认为正面THREE.FrontSide，可设置为反面THREE.BackSide，或双面THREE.DoubleSide
                wireframe:是否渲染线而非面，默认为false
                color：十六进制rgb颜色，红色为0xff0000
                map:使用纹理贴图

    法向材质---
    法向材质可以将材质的颜色设置为其法向量的方向，有时候对于调试很有帮助。
    new THREE.MeshNormalMaterial()

    材质的纹理贴图---
    var texture = THREE.ImageUtils.loadTexture('img/0.png');
    var material = new THREE.MeshLambertMaterial({
        map: texture
    });


文字形状---
    THREE.TextGeometry(text, parameters)
    parameters={
        size:18,
        height://文字的厚度
        curveSegments://弧度分段数，使得文字的曲线更加光滑
        font://字体
        weight：//值可选 normal bold
        style://值可选 normal italics
        bevelEnabled://布尔值，是否使用倒角，意为在边缘处斜切
        bevelThickness://倒角厚度
        bevelSize://倒角厚度
    }


网格---
    var mesh=new THREE.Mesh(geometry,material);
    scene.add(mesh);

    在网格北创建后，也能对材质进行修改
    mesh.meterial=new THREE.MeshLamberMatewrial({
        color:0x00ff00
    })

    网格的属性---
    mesh.position.set(x,y,z)获取mesh.position=new THREE.Vector3(1.5,-0.5,0);
    缩放---scale（x,y,z）
    旋转---rotation(x,y,z)

动画---
setInterval(function(){

},1000/60)
秒客网

学习three.js做的笔记

相关文章
