自动摘要: 1.input文件上传，重复上传同一文件失效： 1.原因：input的文件file上传通过onchange触发的，第一次上传成功后value会绑定文件，第二次触发时input的val ……..

1. input文件上传，重复上传同一文件失效：

原因：input的文件file上传通过onchange触发的，第一次上传成功后value会绑定文件，第二次触发时input的value值时，会对新的文件进行value值对比，相同的话就不会触发到。
解决：
1. 文件上传成功后，把input的vlaue值置空。
  tips
  document.getElementById(‘FileId’).value = null;

2. javaScript进度条问题

简单动态进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <script>
        //实现进度条的动态功能
        // 页面执行完之后立即执行该function函数，类比Axure中的交互动作
        window.onload = function(){
            //动作  选中进度条
            var one = document.getElementById('one');
            var two = document.getElementById('two');
            //设置进度条的值
            //one.value = 50;
            //定时器  每隔多少每秒调用一次
            setInterval(function(){
                //获取progress原先的值，在原先的基础上，设置到现在的值上。
                if (one.value<100){
                    one.value = one.value+1;
                    //设置span的内容
                    two.innerHTML = one.value + '%';
                }
            },300)
        }
    </script>
</head>
<body>
    <form action="#" method="GET"></form>
    <!-- 使用JavaScript将进度条活动 -->
    <div>
        <label for="">进度条</label>
        <progress id="one" name="progress" value="0" max="100"></progress>
        <span id="two">0%</span>
    </div>
</body>
</html>

3. JavaScript删除html标签方法

获取这个标签元素，用.remove()方法删除

//方法一：删除单个标签
document.getElementById("tag").remove;
//方法二：循环遍历删除多个标签
var a = document.getElementByClassname("tag");
for(var i = a.length-1;i>=0;i++){
  a[i].remove();	
}

4. 页面滚动条问题

overflow属性问题:hidden,auto,scroll,clip,visible

visible	内容不能被裁剪并且可能渲染到边距盒(padding)的外部
hidden	内容被裁剪以适应边距(padding)盒，不提供滚动条，也不支持允许用户滚动。注意：内容可以通过以编程的方式滚动，如设置scrollLeft等属性的值或者scrollTo()方法。所以该元素仍然是一个滚动的容器
clip	与hidden类似，内容将以元素的边距(padding)盒进行裁剪。clip静止所有滚动，不是一个滚动的容器。如果想开启一个新的格式化上下文，可以使用display:flow-root。
scroll	内容将被裁剪以适应边距(padding)盒，无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
auto	取决于用户代理。如果内容适应边距(padding)盒，它看起来与visible相同，但是仍然简历了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

如果内容超出页面，没有滚动条但会出现滑动现象。

5. 单选按钮再次点击取消选中（JQuery）

使用$(元素对象).prop(‘checked’,true) 使单选框选中

使用$(元素对象).prop(‘checked’,false) 使单选框取消选中

使用自定义属性 data-checked 来获取和更新当前复选框的状态

代码

$(':radio').click(function () {
            var r = $(this).attr("name");
            $(":radio[name=" + r + "]:not(:checked)").attr("tag", 0);
            if ($(this).attr("tag") == 1) {
            $(this).prop('checked',false);
               $(this).attr("tag", 0);
            }
            else {
               $(this).attr("tag",1);
            }
 });

6. threejs中模型删除问题:

需求描述：在多次点击按钮时更新场景中的模型即删除上一个加载模型重新加载新的模型。

第一次用scene.remove(models)无效
1. 可能原因时局部变量和全局变量问题

用删除场景中最后添加的一个模型的方法有效；

需要判断最后一个模型是属于THREE.Mesh对象还是THREE.Object3d对象；

代码

 	//删除场景中的上一个加载的模型
 	//先创建一个变量获取场景中的所有子对象
var allChildren = scene2.children;
 	//创建变量获取最后一个对象
var lastObject = allChildren[allChildren.length - 1];
   //判断对象类型
if (lastObject instanceof THREE.Object3D) {
	scene2.remove(lastObject);
}

一般的模型，要对geometry和material进行dispose()，然后再对模型mesh 进行remove()
清空scene场景，释放内存，关键：
1. 使用dispose()清楚所有网格模型几何体的顶点缓冲区占用内存
2. 使用object.clear()销毁模型对象，清楚页面内存
3. 暂停requestAnimationFrame()方法，避免无意义运行
4. 清空canvas画布，置空dom与相关元素

删除场景对象中Scene一个子对象Group，并释放组对象Group中所有网格模型几何体的顶点缓冲区占用内存

deleteObject(group){
  // 递归遍历组对象group释放所有后代网格模型绑定几何体占用内存
	group.traverse(function(obj){
    if(obj.type == "Mesh"){
      obj.geometry.dispose();
      obj.material.dispose();
    }
  })
	// 删除场景对象scene的子对象group
  scene.remove(group)
}

模型的显示与隐藏：可以设置材质属性.visible为false

7. 回车键按下触发函数

在js中，可以通过onkeyup()键盘事件来触发函数，使用event的keyCode属性来判断是否按下了回车键（13）。 JS键盘事件


<input id="ip" type="text" value="192.168.1.54" style="display: inline-block" onkeyup="get()" >
//判断回车键是否按下，按下时调用changeIP()函数
	function get(){
		var code = event.keyCode;
    // 判断是否是回车键按下
		if(code == 13){
			changeIP();
		}
	}

8. 获取输入框中的内容

描述：首先获取文本框默认内容，value属性。后创建函数获取文本框新的内容value属性值。

input type为text的内容

代码

//获取文本框输入的ip地址
// 定义一个变量，先获取文本框中的默认内容
	var severAddress =document.getElementById("ip").value+":5000";
	function changeIP(){
    // 变量为文本框中修改的内容
		severAddress =document.getElementById("ip").value+":5000";
		console.log("服务器地址:"+severAddress);
	}

9. CSS设置页面布局时候的自适应缩放问题

在创建元素div时，设置大小用百分数。不要用px像素值进行固定

10. threejs点击获取三维坐标

绑定点击事件，通过THREE.Raycaster光线投射，用于确定鼠标点击位置上有哪些物体，raycaster.intersectObjects(scene.children)返回点击位置上所有的物体的数组；我们用var selected = intersects[0]取第一个，也就是最前面的那个物体；在通过selected.point取点坐标

代码

addClick();
function addClick () {
    var raycaster = new THREE.Raycaster();//光线投射，用于确定鼠标点击位置
    var mouse = new THREE.Vector2();//创建二维平面
    window.addEventListener("mousedown",mousedown);//页面绑定鼠标点击事件
    //点击方法
    function mousedown(e){
        //将html坐标系转化为webgl坐标系，并确定鼠标点击位置
        mouse.x =  e.clientX / renderer.domElement.clientWidth*2-1;
        mouse.y =  -(e.clientY / renderer.domElement.clientHeight*2)+1;
        //以camera为z坐标，确定所点击物体的3D空间位置
        raycaster.setFromCamera(mouse,camera);
        //确定所点击位置上的物体数量
        var intersects = raycaster.intersectObjects(scene.children);
        //选中后进行的操作
        if(intersects.length){
            var selected = intersects[0];//取第一个物体
            console.log("x坐标:"+selected.point.x);
            console.log("y坐标:"+selected.point.y);
            console.log("z坐标:"+selected.point.z);
        }
    }
}

原文链接：https://blog.csdn.net/weixin_40856652/article/details/125302743

11. threejs加载标签

在页面中创建一个div标签
通过js获取div标签，用.appenChild()方法创建新的标签（动态添加元素）

代码（此标签不跟随模型转动，只是一个html元素）

//牙颌分牙颜色标签函数
		function TAG(){
			document.getElementById("tag").style.display = "block";
			//判断单选按钮上下颌的选择
			if (document.getElementById("toothUpper").checked) {
				value = [0, 18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28];
			}
			else if (document.getElementById("toothLower").checked) {
				value = [0, 48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38];
			}
			//获取id为tag的html的标签元素
			var tag = document.getElementById("tag");
			//颜色
			var  colormap_hex = ['#e6194B', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#42d4f4', '#f032e6',
				'#fabed4', '#469990', '#dcbeff', '#9A6324', '#fffac8', '#800000', '#aaffc3', '#000075',
				'#a9a9a9', '#ffffff', '#000000']
			//遍历循环
			for(var i=0;i<colormap_hex.length-1;i++){
				var color = colormap_hex[i];
				var bt = document.createElement("input");
        // 动态添加元素
				tag.appendChild(bt);
				bt.type = "button";
				bt.className = "colorTag";
				bt.style.background = color;
				bt.style.width = "5%";
				bt.style.height = "20%";
				bt.style.minWidth = "23px";
				bt.style.minHeight = "20px";
				bt.aspect = "0.5";
				bt.style.borderRadius = "50%";
				bt.style.border = "none";
				bt.style.fontSize = "0.2%";
				bt.value = value[i];
			}
		}

d. 具体Threejs动态加载div标签看这个链接

12. 实现按钮高度随宽度自适应缩放

13. 鼠标右键按下，左键按下如何判定

e.button = 0 左键
e.button = 1 中
e.button = 2 右键

14. 实时监听文件上传，并加载进度条：

https://blog.csdn.net/qinshensx/article/details/105301975

15. 页面禁止缩小

16. obj文件和mtl文件格式

obj文件中
tips

#：注释标记object：将一个obj模型分为多个模块，进行储存管理mtllib：描述了模型所使用的材质文件所在的路径usemtl：当前所用材质v：顶点vt：顶点的纹理坐标vn：顶点的法线o：对象（object）名称g：组（group）名称s：光滑组(Smoothing group)，处理面之间的光照信息来达到光滑效果f：面其中面f需要拿出来单说，例如f 1/1/1 2/2/1 3/3/1：

空格隔开的三组数据分别表示三角形片元的三个顶点，在每一组数据中，每一个数字又分别代表着顶点/纹理坐标/法线所在行的行数。

以1/1/1为例：

1指向v的第一行，此例中为-38.9310 0.0000 39.52411指向vt的第一行，此例中为0.0000 -1.0000 -0.00001指向vn的第一行，此例中为1.0000 0.0000 0.0000

mtl文件
tips
newmtl：代表材质，以下皆为该材质的属性参数Ns：高光反射系数，值越高则高光越密集NI：指定材质表面的光密度，即折射值d：表示物体融入背景的数量，取值范围为0.01.0，取值为1.0表示完全不透明，取值为0.0时表示完全透明Tr：定义材质的alpha透明度Tf：材质的透射滤波（transmission filter），对应数据为r，g，b值illum：照明度（illumination），后面可接010范围内的数字参数Ka: 环境光（ambient color）Kd: 散射光（diffuse color）Ks: 镜面光（specular color）Ke：放射光（emissive color）map_Ka：环境光所采样的纹理贴图路径，在.obj模型文件的根目录下map_Kd：漫反射光所采样的纹理贴图路径

17. 不选择文件直接上传默认文件到服务器

通过AJAX创建XMLHttpRequest对象，根据文件地址请求文件对象，获取文件对象。

//根据文件地址获取文件对象
function fileFromUrl(url,filename){
    var blob = null;
    var xhr2 = new XMLHttpRequest();
    xhr2.open("GET", url);
    xhr2.setRequestHeader('Accept', '');
    xhr2.responseType = "blob";
    // 加载时处理
    xhr2.onload = function (){
        // 获取返回结果
        blob = xhr2.response;
        files= new File([blob], filename, { type: '' });
        console.log(files);
        console.log(xhr2.status)
    };
    xhr2.onerror = function (e) {
        reject(e)
    };
    // 发送
    xhr2.send();
}

18. threejs中的模型导出

用PLYExporter、OBJExporter等

19. setAttribute

setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
getAttribute
1. 元素.getAttributr(‘属性名’)
2. 获取元素的行间属性对应的属性值，不能获取css样式对应的属性值
3. 如果获取的属性不存在返回null

20. threejs三维样条曲线穿透模型问题

21. 三维坐标与二维坐标的转换问题

世界坐标系：在webgl中，世界坐标系是以屏幕中心为原点（0，0，0），且始终不变。
屏幕坐标系：webgl的重要功能之一就是将三维的世界坐标经过转换、投影等计算，最终算出它在显示设备上对应的位置，这个位置就称为设备坐标。在屏幕、打印机等设备上的坐标是二维坐标
视点坐标系：以视点（照相机）为原点，以视线的方向为Z+轴正方向的坐标系中的方向。webgl会将世界坐标先变换为视点坐标，然后进行裁剪，只有在视线范围（视见体）之内的场景才会进入下一阶段的计算

22. threejs中Raycaster的用法

用于鼠标去获取3d世界中被鼠标选中的一些物体
创建函数：Raycaster(origin, direction, near, far)
origin—射线的起点向量，direction—射线的方向向量，应该归一标准化，near—所有返回的结果应该比near远，Near不能为负，默认值为0，far—所有返回的结果应该比far近，far不能小于near，默认值为无穷大

获取射线与平面相交的交点

function onDocumentMouseDown(e) {
    e.preventDefault();
    
    //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    //新建一个三维单位向量 假设z方向就是0.5
    //根据照相机，把这个向量转换到视点坐标系
      var vector = new THREE.Vector3(mouse.x, mouse.y,0.5).unproject(camera);

    //在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    //射线和模型求交，选中一系列直线
    var intersects = raycaster.intersectObjects(objects);
    console.log('imtersrcts=' + intersects)

    if (intersects.length > 0) {
        //选中第一个射线相交的物体
        SELECTED = intersects[0].object;
        var intersected = intersects[0].object;
        console.log(intersects[0].object)
    }


}

23. 删除两点之间的线段

在场景中移除某个对象
1. scene.remove(object)
2. 或者可以遍历场景中的所有子对象。判断需要移除的对象是否属于指定的对象类型，然后进行scene.remove()

24. 接口问题

什么是接口
1. 程序内部接口：方法与方法、模块与模块之间的交互，程序内部抛出的接口，如登录发贴，发帖就必须要登录，如果不登陆不能发帖，发帖和登录这两个模块之间就要有交互，就会抛出一个接口，进行内部系统调用
2. 系统对外的接口：从别人的网站或服务器上获取资源或信息，对方不会提供数据库共享，只能提供一个写好的方法来获取数据，如购物网站和第三方支付之间，购物网站支付时可选择第三方支付方法，但第三方不会提供自己的数据库给购物网站，只会提供一个接口，供购物网站进行调用
3. 接口

25. javaScript判断哪个按钮被按下问题

可以通过event对象的target事件或者srcElement来判断按钮是否被点击

26. threejs导出的模型颜色有问题

27. JavaScript下载文件并修改文件名

a标签下的download可以直接修改文件名，但是不支持跨域的修改文件名

//下载文件
    handleDownload(url,fileName) {
      this.getBlob(url, (blob) => {
        this.saveAs(blob, fileName)
      })
    },

    /**
     * 获取 blob
     * @param  {String} url 目标文件地址
     * @return {cb}
     */
    getBlob(url, cb) {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (xhr.status === 200) {
          cb(xhr.response)
        }
      }
      xhr.send()
    },

    /**
     * 保存
     * @param  {Blob} blob
     * @param  {String} filename 想要保存的文件名称
     */
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename)
      } else {
        var link = document.createElement('a')
        var body = document.querySelector('body')

        link.href = window.URL.createObjectURL(blob)
        link.download = filename

        // fix Firefox
        link.style.display = 'none'
        body.appendChild(link)

        link.click()
        body.removeChild(link)

        window.URL.revokeObjectURL(link.href)
      }
    },

28. js获取File对象

通过进行本地文件选择上传
通过XMLHttpRequest对象，根据url请求File文件
创建File对象。
1. file对象的构造函数File(bits,name[, options])
  1. bits(required)ArrayBuffer, ArrayBufferView, Blob 或者 Array[string]—或者任何这些对象的组合。
  2. nameString文件名称，或者文件路径
  3. optionsObject选项对象，包含文件的可选属性。可用选项如下：
    1. type：string, 表示将要放到文件中的内容的MIME类型。默认值为””
    2. lastModified: 数值，表示文件最后修改事件的Unix时间戳(毫秒)。默认值为Date.now()。

1	var file = new File(['text1','text2'],'test.txt',{type:'text/plain'});

File实例属性

属性名称	读/写	描述
name	只读	返回文件的名称，由于安全考虑，返回的值不包含文件路径
type	只读	返回File对象所表示文件的媒体类型（MIME）。如PNG图像是”image/png”
lastModified	只读	number，返回所引用文件最后修改日期，自1970年1月1日0:00以来的毫秒数
lastModifiedDate	只读	Date，返回当前文件的最后修改日期，如果无法获取到文件的最后修改日期，则使用当前日期来替代
size	只读	File对象中所包含数据的大小(字节)

29. Blob对象

blob对象：
1. 提供了一系列操作接口
2. 其他操作二进制数据的API（比如File对象），继承了它的方法和属性
3. 表示一个不可变，原始数据的类文件对象，blob表示的不一定是JavaScript原始格式的数据
Blob构造函数 Blob(array,[options])
1. array是一个由ArrayBuffer，ArrayBufferView，Blob，string等对象构成Array，或者其他类型对象的混合体，它将会被放进Blob，string会被编码为UTF-8
2. options是一个可选的对象，它可能会指定如下两个属性：
  1. type，默认值“”，表示将会被放入到blob中的数组内容的MIME类型
  2. endings，默认值为“transparent”，用于指定包含行结束符\n的字符串如何被写入。
  3. https://blog.csdn.net/weixin_44955769/article/details/112918803
创建blob对象
1. var blob = new Blob(‘Hello’,{type: “text/plain”});

30. javaScript截取字符串最后两个字符

一般截取字符串的方法有substring()和substr()两个方法
substring(int from, int to)方法用于截取字符串中位置为from到to-1位置的字符，[from,to)
1. var str = ‘i like yanggb’; //定义一个字符串
2. console.log(str.substring(str.length - 6)); // yanggb
substr(int start, int length)方法用于截取字符串从start位置开始length位数的字符
1. 第一个参数start支持负数，如果是-1，就从倒数第一位开始截取，以此类推

31. 获取服务器返回文件问题

下载服务器返回的ply格式文件
1. 设置XMLHttpRequest.responseType类型

32. 本地浏览器缓存服务器返回文件(本地缓存三种方法)

localStorage

关闭浏览器后，存储在localStorage中的键值对不会丢失

将数组存储到本地存储中

localStorage.setItem("webSite",'uiuing.com');
let ProgrammingLanguage = ['Java','Python','JavaScript','GO+'];

// 使用JSON.stringify将数组存储到本地存储中
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

从本地存储中获取数组JSON.parse()

1	console.log(JSON.parse(localStorage.getItem('favoriteProgrammingLanguage')));

清楚本地存储 localStorage.clear()
仅删除某个键值对 localStorage.removeItem(“name1”)
sessionStorage
- 关闭浏览器后，存储在localStorage中的键值对会丢失
cookie

33. 让html页面中的某个元素全屏显示

requestFullScreen()方法

const openFullscreen = () => {
     /* 获取(<html>)元素以全屏显示页面 */
    const full = document.getElementById('content')
    if (full.RequestFullScreen) {
        full.RequestFullScreen()
        //兼容Firefox
    } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen()
        //兼容Chrome, Safari and Opera等
    } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen()
        //兼容IE/Edge
    } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen()
    }
}

// 取消全屏
function cancleFullscreen(){
  if(document.exitFullscreen){
    doucment.exitFullscreen();
  }
}

全屏显示

34. js判断单选按钮哪个被选中

获取所有同一name的单选按钮

for循环进行遍历，判断.checked == true

function ModelList() {
    //获取所有name为tooth的元素 
		var obj = document.getElementsByName("tooth"); 
		var flags = false;
  	//for循环遍历obj 
		for(var j=0; j<obj.length; j++){
			//判断哪个单选按钮被点击
			if(obj[j].checked==true){
				//获取被点击的单选按钮的值
				modelSelected = obj[j].value;
				flags = true;
			}
		}
  	//如果没有进行类别选择则跳出弹窗 
		if (flags == false)
		{
			alert("请选择类别")
			return false;
		}
		console.log(modelSelected);
	}

35. 判断哪个按钮被点击

函数增加参数，判断哪个按钮点击（或许不是一个好方法，比较繁琐，但是比较简单我觉得）

function ModelDownload(a){
    // 获取所有按钮
		var object = document.getElementsByClassName("modelBtn");
		var modelUrl;
		var A = "../tooth-models/Example-model/";
		// 参数
  	modelUrl = object[a].name;
		window.open(A+modelUrl+".ply");
		console.log(A+modelUrl+".ply")
	}

如果在所有按钮中间新增按钮，则需要修改所有按钮调用的函数参数。否则会出错

36. 两个div互不影响，一个div不影响第二个div

设置它们的position属性，第一个position：relative；第二个position：absolute

37. 如何在浏览器中查看页面缓存

打开开发者工具，找到Application（应用）

38. 顶点颜色渲染

设置材质属性的vertexColor为true

39. Threejs-THREE.Color颜色对象详解

十六进制字符串—-“#c0c0c0”
十六进制值—-0xc0c0c0
RGB颜色值—-（0.3,0.5,0.6）
THREE.Color对象的方法
1. set(value)：将当前颜色设置为指定的十六进制值。

40. 通过点击改变一个面片的颜色

41. Three.js中的材质面片问题

设置面片的materialIndex无反应问题

42. js数组，清空数组全部元素

直接赋予空数组[]—-arr = []
利用length属性将数组长度设置为0—-arr.length = 0
使用splice()删除全部数组元素—-arr.splice(0,arr.length)
使用delete运算符，可以删除指定下标的数组元素—-delete arr[i]

43. threejs加载json格式模型

json格式模型是Geometry类型，用JSONLoader加载(目前jsonloader已从threejs中移除)

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("../tooth-models/312580.json",function(geometry,materials){
  	var material = new THREE.MultiMaterial(materials);
    var mesh = new THREE.Mesh(geometry,material);
    mesh.scale.multiplyScalar(.06);
    scene.add(mesh);
},onProgress,onError);

如果是Object类，用ObjectLoader加载
1. 官网https://threejs.org/docs/#api/zh/loaders/ObjectLoader
  1
  2
  3
  4
  5
  var objectLoader = new THREE.ObjectLoader();
  objectLoader.load("../tooth-models/312580.json",function(object){
  object.scale.multiplyScalar(5);
  scene.add(object)
  })
  multiplyScalar(number)将改向量与所传入的标量s进行相乘https://www.cnblogs.com/vadim-web/p/13359036.html为什么加载这样的json格式就无法显示

44. threejs设置模型居中显示

直接设置几何居中geometry.center()；
或者用包围盒设置模型位置居中(方法一，方法二)
1. Box3：在3D空间中表示一个包围盒，主要用于物体在世界坐标中的边界框，方便判断物体和物体、物体和平面、物体和点的关系，构造函数：Box3(min:Vector3,max:Vector3)
  1
  2
  //这个box表示3D空间中中心点在（0，0，0），长宽高为4的包围盒
  var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));
  1. 属性：
    1. isBox3–检测当前对象或者派生类对象是否是Box3。默认为true
    2. min-Vector3–表示包围盒的下边界。默认值（+infinity，+infinity，+infinity）
    3. max–Vector3–表示包围盒的上边界。默认值（-infinity，-infinity，-infinity）
  2. 方法
    1. .set(min:Vector3,max:Vector3)–设置包围盒的上下边界
    2. .setFromArray(array:ArrayLike)–设置包围盒的上下边界使得数组array中的所有点的点都被包含在内
    3. .setFromBufferAttribute(bufferAttribute:BufferAttribute)–设置包围盒的上下边界，此包含attribute中的所有位置数据
    4. .setFromPoints(points:Vector3)–设置包围盒的上下边界，包含数组points中的所有点
    5. .setFromCenterAndSize(center:Vector3,size:Vector3)–将当前包围盒的中心点设置为center，并将此包围盒的宽度高度和深度设置为大小指定size的值
    6. .setFromObject(object:Object3D)–计算和世界轴对齐的一个对象Object3D（含其子对象）的包围盒，计算对象和子对象的世界坐标变换
    7. .clone()–返回一个与该包围盒子有相同下边界min和上边界max的新包围盒
    8. .copy(box:Box3)–将传入的值box中的min和max拷贝到当前对象
    9. 等等

45. threejs根据模型大小判断缩放比例

function calculateModelScale(object){
		object.updateMatrixWorld();
		//显示模型的时候自动计算模型缩放比例
		//计算和世界轴对齐的一个对象 Object3D （含其子对象）的包围盒
		var bBox = new THREE.Box3().setFromObject(object);
		let height=bBox.max.y-bBox.min.y;
		var dist = height / (2 * Math.tan(camera1.fov * Math.PI / 360));
		scaleB = 25/dist ;
		console.log("模型缩放比例",scaleB);
		object.scale.set(scaleB, scaleB, scaleB);
		// camera1.lookAt(object.geometry.center())
		return scaleB;
	}

46. 获取模型大小可以通过设置包围盒

设置包围盒 var box = new THREE.Box3().setFromObject(mesh);
获取包围盒的大小 var size = box.size()

47. XMLHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。创建XMLHttpRequest对象的方法：var xhr = new XMLHttpRequest()

XMLHttpRequest.responseType属性是一个枚举类型的属性，返回响应数据的类型，允许手动设置返回数据的类型，如果设置为一个空字符串，则默认为”text”类型

当设置一个特定的类型时，需要确保服务器返回的类型和自己所设置的返回值类型是兼容的。

值	数据类型
‘’	DOMString (这个是默认类型)
arraybuffer	ArrayBuffer对象
blob	Blob对象
document	Document对象
json	JS 对象，解析得到的从服务器返回来的JSON字符串
text	DOMString

具体数据类型的使用

教程

48. threejs重新设置模型的中心点

使相机指向模型包围盒中心点
1. camera.lookAt();
2. 当相机控制器为OrbitControls时，需要设置的时controls.target.set();

49. 根据点的坐标，绘制圆点，或者是绘制圆点，设置圆点的坐标位置为点的坐标

利用数组向量

50. js按CTRL+Z返回上一步骤

51. UV纹理UV贴图

uv纹理坐标设定与贴图规则

52. BufferGeometry

是面片、线或几何体的有效表达，包括顶点位置、面片索引、法向量、颜色值、UV坐标和自定义缓存属性值，使用BufferGeometry可以有效减少向GPU传输上述数据所需的开销

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array({
  -1.0,-1.0,1.0,
   1.0,-1.0,1.0,
   1.0,1.0,1.0,

   1.0,1.0,1.0,
   -1.0,1.0,1.0,
   -1.0,-1.0,1.0,
})

geometry.setAttribute('positin',new THREE.BufferAttribute(vertices,3));
const material = new THREE.MeshBasicMaterial({color:0xff0000});
const mesh = new THREE.Mesh(geometry,material);

attributes属性：包括color(颜色）、normal(法向量）、position(顶点位置）、uv(像素位置）

BufferGeometry.attributes.position // 几何体顶点位置BufferGeometry.attributes.color // 几何体顶点颜色BufferGeometry.attributes.normal // 几何体顶点法向量BufferGeometry.attributes.uv // 几何体顶点像素

53. float32array

54. JSON.parse()：将字符串转换为JavaScript对象

55. JSON.stringify()：将JavaScript对象转换为字符串

语法

1	JSON.stringify(value[,replacer[,space]])

参数说明
- value：必需，要转换的JavaScript值（通常为对象或数组）
- replacer：可选，用于转换结果的函数或数组
  - 如果replacer为函数，则JSON.stringify将调用该函数，并传入每个成员的键和值，使用返回值而不是原始值，如果此函数返回underfined，则排除成员，根对象的键是一个空字符串
  - 如果replacer是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样，当value参数也为数组时，将忽略replacer数组
- space：可选，文本添加缩进、空格和换行符。如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

56. threejs导出json文件和加载导出的json文件

57. 解决json文件用webstorm打开时的格式问题

58. Vue路由跳转页面问题

59. Vue组件之间的传值问题

60. type=”range”的滑块事件

61. Vue生命周期中mounted和created的区别

62. :key

63. 单选框radio取值问题

64. 报错问题：”export ‘default’ (imported as ‘THREE’) was not found in ‘three’

在import的时候出错，import * as THREE from “three”；

65. Vue中加载threejs的loader加载器时，import时需要注意