THREE.js-------3D模型制作demo总结

渲染简单的3D模型要有的结构：场景，相机，渲染器 。

下图是three.js中文文档截取的思维导图。

（1）场景(Scene): 
场景是[物体,光源等元素]的容器。实时调整和场景相关的所有对象数据,包括物体,光源等.创建场景,需要引入three.js文件，let scene = new THREE.Scene();
（2）相机（Camera)
在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。
这里主要说一下透视相机，PerspectiveCamera（透视摄像机）。
第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。
第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。
（3）渲染器（WebGLRenderer）
let renderer = new THREE.WebGLRenderer();
setSize   方法设置尺寸大小
setClearColor  方法设置背景颜色
（4）渲染，可全屏渲染，也可以局部渲染
全屏渲染
document.body.appendChild(renderer.domElement);
局部渲染
document.getElementById('pos').appendChild(renderer.domElement);
Three.js渲染器WebGLRenderer的.domElement属性是Three.js执行渲染方法.render()的渲染结果，本质上就是一个HTML元素Canvas。Threejs系统会自动创建一个canvas对象，然后把渲染结果呈现在该Canvas画布上。
（5）缩放，旋转，平移
通过OrbitControls.js可以对Threejs 的三维场景进行缩放，平移，旋转操作，其本质上改变的幷不是场景，而是相机的参数。
可参考网站：
https://www.cnblogs.com/wss198909/p/16381706.html 
（6）自动旋转
可绕X轴旋转，可绕Y轴旋转
利用scene.rotateY(0.005);//每次绕y轴旋转0.005弧度，括号里是旋转的弧度。
（7）背景
  let textureLoader = new THREE.TextureLoader();
  let backg = textureLoader.load("./img/3.png");
  scene.background = backg;
（8）二维码
 let ercode = document.getElementById('ercode');  //获取元素
        var qrcode = new QRCode("ercode", {
            text: "http://",//自己的域名
            width: 128,
            height: 128,           //二维码尺寸
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });

具体详细细节可以参考一些网站：
中文教程：http://www.webgl3d.cn/Three.js/
官方文档：http://www.webgl3d.cn/threejs/docs/
二维码教程：https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
仿制项目网站：https://hnbjsy.com/