前言：

       学习threeJS完全是机缘巧合，记得有次客户提到我们系统（当时在职的公司产品）的数据总是以二维表的数据显示，略显枯燥乏味。所以那会我开始逐步摸索数据可视化（说白了就是网上找资料），了解到echarts，确实能然数据显示的更加漂亮。但是后面发现3D的echarts图形加载有点耗时，在查阅了很多资料后，关注点转移到了threeJS与thinkJS身上，但是当我得知thinkJS居然要收费，作为一个穷*，果断放弃。。。确定了涉猎threeJS，此次，主要和各位看官分享threeJS中的基础功能组成。

（简书.YZJGOOD原创文章，转载请注明出处）

正文：

threeJS模型页面展示主要构成：

场景（网格模型（具体实物+材质）+光照（点光源（阴影）+环境光源））+相机+渲染（鼠标缩放拖动之类的）

案例如下：

需要注意：引入关键js : three.js ; OrbitControls.js

<script>

    /* 创建场景对象Scene*/

    var scene = new THREE.Scene();

    /*创建网格模型*/

    var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry

var material = new THREE.MeshLambertMaterial({

      color: 0x00ffff

    });

//材质对象Material（MeshLambertMaterial确定了它的属性）

    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh（将具体实物+材质添加进来）

    scene.add(mesh); //网格模型添加到场景中

    /* 光源设置 */

    //点光源

    var point = new THREE.PointLight(0x999999);//PointLight属性确定了它是点光源

    point.position.set(400, 200, 300); //点光源位置（说白了就是这个光的起点）  

    scene.add(point); //点光源添加到场景中

    //环境光

    var ambient = new THREE.AmbientLight(0x888888);//AmbientLight属性确定了它是环境光源

    scene.add(ambient);

    /* 相机设置*/

    var width = window.innerWidth; //窗口宽度

    var height = window.innerHeight; //窗口高度

    var k = width / height; //窗口宽高比

    var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大

     /*创建相机对象*/

    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

    camera.position.set(200, 300, 200); //设置相机位置（相机从哪个方位照过去）

    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

    /*创建渲染器对象*/

    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(width, height); //设置渲染区域尺寸

    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    //有时我们不一定要把canvas对象插入body下面，也有可能插入到某一元素下面

     document.getElementById('models').appendChild(renderer.domElement); //models元素中插入canvas对象

    /*鼠标拖拽控制*/

    // 渲染函数

    function render() {

      renderer.render(scene, camera); //执行渲染操作

    }

    render();

    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建一个控制对象

    controls.addEventListener('change', render);//监听鼠标事件，触发渲染函数，已达到拖拽旋转效果

//周期变化控制：

    function render() {

      renderer.render(scene, camera); //执行渲染操作

      mesh.rotateY(0.1);//按照一定的周期每次绕y轴旋转0.1弧度

      requestAnimationFrame(render);//请求再次执行渲染函数render，循环往复

    }

    render();

    ////创建一个控制对象，保障了鼠标能够进行拖拽设置

    var controls = new THREE.OrbitControls(camera,renderer.domElement);

  </script>

  好的，这次的分享就到这里，谢谢！

（简书.YZJGOOD原创文章，转载请注明出处）