Three.js快速入门学习总结

Three表示3D的意思，js表示javascript的意思。那么合起来，Three.js就是使用javascript 来写3D程序的意思。

一.三大要素

在Three.js中，要渲染物体到网页中，我们需要3个要素：场景（scene）、相机（camera）和渲染器（renderer）

1.场景

var scene=new THREE.Scene();

 

2.相机

        var camera = new THREE.PerspectiveCamera(45,1,1,1000);//透视相机

        camera.position.set(0,0,100);//设置相机位置

        camera.lookAt(new THREE.Vector3(0,0,0)); //相机镜头中心点

     【备注】：

      //改变相机视角        

       camera.fov = parseFloat(fov)

       camera.updateProjectionMatrix()

      视角越大，我们看到的图比例越小，如下：

      视角为100度：

 

视角为50度：

 

3.渲染器

        var renderer=new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth,window.innerHeight);

        document.body.appendChild(renderer.domElement);     //显示在窗体  

 

 

二.材质

        //定义材质THREE.LineBasicMaterial . MeshBasicMaterial...都可以

        var material = new THREE.LineBasicMaterial({

         vertexColors: true //定义线条材质是否使用顶点颜色,定义这个为true下面的colors才会生效线条为渐变色

        });

 

 

三.几何体

        // 空几何体，里面没有点的信息,不像BoxGeometry已经有一系列点，组成方形了。

        var geometry = new THREE.Geometry();

        // 给空白几何体添加点信息，这里写3个点，geometry会把这些点自动组合成线，面。

        geometry.vertices.push(new THREE.Vector3(0,-10,0));

        geometry.vertices.push(new THREE.Vector3(0,10,0));

 

 

四.绘制图形

1.网格图绘制

        网格图由多条相互垂直的横线和竖线组成，所以主要是