Three.js入门3D--Apple的学习笔记

之前的blogOSG WIN10 VS2017环境搭建成功--Apple的学习笔记的原因是我想继续向上学习3d开发，因为这样可以很容易及快速的制作出好玩的东东。但是当我今天下午看了example及相关介绍资料后，发现OSG是一个很古老的软件了，而且运行起来很笨重。最主要是连OSG的example都没让我看到有什么惊喜，让我眼前一亮的作品。
那么退而求次，我还有一个目标，就是通过看他们的代码来学习c++的架构设计或者代码设计思想。以及学习如何看复杂代码。
我是带着最后2个小目标，继续在看，结果发现分分钟解决了。

如何看复杂代码，其实还是官网API资料越强大越好。说白了，就是看说明书才是最快的方法。另外，若没有说明书，我可以使用doxygen自动生成类的关系图。
代码设计思想，由于我只随机挑选了几个类在看，没有发现什么复杂或者巧妙的设计思想，反而发现最终依然依赖3D数学基础，就是那些基本函数包括了旋转、平移、坐标转换公式。这部分数据理论在学习视觉slam的时候就专门学习。连c++代码都是长的一样的，因为就是把推导出来的最后公式翻译为代码。

好吧！这不是一个造轮子的时代，而是一个站在巨人肩膀上的时代。我没有必要再回去炒冷饭，那么还是学些新的吧！其实一直想接触JavaScript，但是又不敢去多了解，因为我的兴趣不小心可能就被吸引过去了。但是我的主攻方向还是嵌入式c/c++。

实在是忍不住好奇，想玩玩Javascript，所以五一就玩玩3D相关的three.js吧！之前有网页制作经验，也了解些java和JavaScript。结果three.js学习起来很的很容易，怪不得现在那么多人去学习及在工作中使用。大家的思想都是一样的，资源利用，追求效率。

有了今天的体验后，我准备花一段时间在JavaScript的学习上了，当然学习的起因就是好玩，然后它给的example都很吸引我眼球。学习JavaScript的目标应该定义为制作工具或者为了验证shader效果，我知道webgl和opengl是一样的东东。我当前工具都是用python做的，不带界面。当我学习玩JavaScript后，因为可以制作出web页面交互的工具了。哈哈，学习时间一定不会白花的，我会把学习内容绕成一个闭环系统，为我的工作提高效率。

总结下关于3d学习我已经从第一轮入门，进入了第二轮横向发展，关于3d将进入Java/c++/python通吃阶段。

image.png

var renderer;
var scene;
var camera;
var renderer;
var mesh;
var controls;
function init() {
    /**
     * 创建场景对象Scene
     */
    scene = new THREE.Scene();
    var axisHelper = new THREE.AxisHelper(500);
    scene.add(axisHelper);
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    
    // 圆柱网格模型
    var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
    var material3 = new THREE.MeshLambertMaterial({
      color: 0xffff00
    });
    var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
    // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
    mesh3.position.set(120,70,0);//设置mesh3模型对象的xyz坐标为120,0,0
    scene.add(mesh3); //
    
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xff007f);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x333399);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象


    render();
    controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
}
/* let T0 = new Date();//上次时间
function render() {
        let T1 = new Date();//本次时间
        let t = T1-T0;//时间差
        T0 = T1;//把本次时间赋值给上次时间
        requestAnimationFrame(render);
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
} */
function render() {
  renderer.render(scene,camera);//执行渲染操作
  requestAnimationFrame(render);//请求再次执行渲染函数render
}
window.onload = init;