项目一：自动驾驶仿真云平台

                           项目一：自动驾驶仿真云平台开发

【知识点笔记】

1.导入本地文件遇到的问题：

（1）倘若你只是使用Three.js库中所提供的几何体，且不载入任何纹理贴图，则网页是可以从本地的文件系统中打开，并且是能够直接运行的，只需在文件管理器中双击HTML文件，它就可以在浏览器中进行显示。 （此时你将在地址栏中看到类似这样的URL：file:///yourFile.html）

（2）倘若你需要从外部文件里载入几何体或是纹理贴图，由于浏览器same origin policy（同源策略）的安全限制，从本地文件系统载入外部文件将会失败，同时抛出安全性异常，此时可以用python建立一个本地服务器，只需要从命令行里便可以运行它（从工作目录）：

//Python 3.x
python -m http.server

这将会在为当前目录在8000端口创建一个服务器，也就是说你可以在地址栏里输入这个地址来访问已经创建好的服务器：

http://localhost:8000/

2.three.js基本变量的初始化：

var container;//盛放画布的容器
container = document.createElement( 'div' );
document.body.appendChild( container );
    


var camera, scene, renderer; //相机，场景，渲染器

//相机，（摄像机视锥体垂直视野角度，摄像机视锥体长宽比，摄像机视锥体近端面，摄像机视锥体远端面）
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 250;

//场景
scene = new THREE.Scene();

//渲染器
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );//设置像素值
renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染范围为屏幕的大小
container.appendChild( renderer.domElement );//将画布放入dom的div中

3.var：

（1）在函数内部使用var关键字声明的变量就是私有变量，该变量的作用域仅限于当前函数体内，但是外部不能访问。

（2） 但是如果不使用var关键字定义的变量都是全局变量，不管是在函数内或者函数外，在整个页面脚本中都是可见的。

4.渲染器shader、着色器renderer：

渲染是指以软件由模型（三维物体或虚拟场景）生成图像的过程。

着色是在渲染的过程中的一项重要的工作，即根据物体相对于光线的角度及其与光源的距离来计算图像中各像素的值，这个值决定了最终图像中显示出哪些图形（一些图形可能会被遮挡）及其明暗效果。

5.坐标系：

面对屏幕向上为y轴的正方向，向左为正x轴的正方向，垂直于屏幕向外的为z轴的正方向。如下图所示：

6.Three.js三维模型几何体缩放、旋转和平移。

缩放：

mesh.scale.x = 2.0;//x轴方向放大2倍
mesh.scale.set(0.5,0.5,0.5);//缩小为原来0.5倍

旋转：

mesh.rotateX(Math.PI/4);//绕x轴旋转π/4

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8

平移：

mesh.translateX(100);//沿着x轴正方向平移距离100

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.translateOnAxis(axis,100);//沿着axis轴表示方向平移100

位置属性position、角度属性rotation：

mesh.position.y = 80;//设置网格模型几何中心y坐标

mesh.position.set(80,2,10);//设置网格模型几何中心三维坐标

7.JavaScript中const,var,let区别：

（1）const定义的变量不可以修改，而且必须初始化

1 const b = 2;//正确
2 // const b;//错误，必须初始化 
3 console.log('函数外const定义b：' + b);//有输出值
4 // b = 5;
5 // console.log('函数外修改const定义b：' + b);//无法输出 

（2）var是函数局部作用域；定义的变量可以修改，如果不初始化会输出undefined，不会报错。

var a = 1;
// var a;//不会报错
console.log('函数外var定义a：' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a：' + a);//可以输出a=4
} 
change();
console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4

（3）let是块级作用域。

let c = 3;
console.log('函数外let定义c：' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c：' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

8.理解JavaScript中的this：

（1）this 返回属性或方法“当前”所在的顶层对象（调用时的顶层）。（函数中指向顶层函数，全局环境中指向window/浏览器窗口）

（2）构造函数：

构造函数中的 this ，指的是实例对象。

var Obj = function (p) {
   this.p = p;
 };
 
 Obj.prototype = function() {
   return this.p;
 };

（3）对象的方法

只有这一种用法（直接在 obj 对象上调用 foo 方法）， this 指向 obj ；其他用法时， this 都指向代码块当前所在对象（浏览器为 window 对象）。

var obj ={
   foo: function () {
     console.log(this);
   }
 };
 
 obj.foo() // obj

9.搞懂JS中的prototype、__proto__与constructor

（1）prototype对象就是实例函数，a1、a2是实例：

（2）constructor指向构造函数：

（3）重写了Prototype对象后：

10.指针和引用：

指针：指针是一个变量，只不过这个变量存储的是一个地址，指向内存的一个存储单元，即指针是一个实体。

引用：跟原来的变量实质上是同一个东西，只不过是原变量的一个别名而已。