Three.js：实现3D建模

1、要么去github下载，要么使用提供好的three.js

2、如何引入：

1、老方式：- 到后此方法会出问题
	<script src="three.js/build/three.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		console.log(THREE)
	</script>

2、学习使用ES6模块化方式引入：
	<script type="module">
		import * as THREE from "./three.js/build/three.module.js";
		console.log(THREE);
	</script>

3、THREE还提供了很多其他扩展库，我们后期也会用到，需要引入
	<!--映射-->
	 <script type="importmap">
        		{
           		 	"imports": {
                			"three":"./three.js/build/three.module.js",
                			"abc/":"./three.js/examples/jsm/"
            			}
        		}

    	</script>

    	<script type="module">
       		// 使用留improtmap可以让我们在html的静态文件当中采用跟vue和react一样的开发体验 
       		import * as THREE from 'three';
       		import { OrbitControls } from 'abc/controls/OrbitControls.js'
       		console.log(OrbitControls)
       		console.log(THREE)
    	</script>

3、我们的第一个案例

	//创建场景 - 用来展示3d内容的场景 - 所有3d的东西都要添加到这个场景里，我们才能看得到 - 黑色
       	var scene=new THREE.Scene();
       	
       	//创建相机 - 用来代替我们的眼睛去观察物体，通过相机拜访在不同的位置来实现对3d物体的不同角度的效果呈现
       	var camera=new THREE.PerspectiveCamera(100,innerWidth/innerHeight,0.1,1000);
       	
       	//渲染器 - 我们的场景和相机都是一个虚拟的概念，如果要把内容呈现到网页当中，需要通过渲染器来渲染
       	var render=new THREE.WebGLRenderer();
       	//设置渲染器的大小
       	render.setSize(innerWidth,innerHeight);
       	//吧渲染器的内容加载到body里面成为一个子元素
       	document.body.appendChild(render.domElement);
       	
       	//着色器 - 一个基础的几何，并不是最重要展示的内容而是一个等待被描述的几何体（毛坯）- 红色
       	var geometry=new THREE.BoxGeometry(1,1,1);
       	
       	//材质 用于对着色器表面材料的说明
       	var material=new THREE.MeshBasicMaterial({
       		color:0x00ff00//0xff0000 === #00ff00
       	})
       	
       	//物体 Mesh 网格模型，网格模型就是最终需要展示的3d物体
       	var cube=new THREE.Mesh(geometry,material);
       	
       	//在场景scene添加好创建的物体
       	scene.add(cube);
       	
       	//设置相机的位置
       	camera.position.z=5;
       	
       	function animate(){
       		//requestAnimationFrame 是js内置的方法，表示在动画结束后重新调用一个指定函数的
       		requestAnimationFrame(animate)
       		
       		cube.rotation.x+=0.01;
       		cube.rotation.y+=0.01;
       		render.render(scene,camera)
       	}
       	animate()

4、相机控件 - 可以旋转还可以滚轮缩放

import { OrbitControls } from 'abc/controls/OrbitControls.js'

//相机控件
       	var controls=new OrbitControls(camera,render.domElement);
       	
       	controls.addEventListener("change",()=>{
       		render.render(scene,camera)
       	})

5、理解三维坐标系

//创建一个坐标系辅助线（辅助器）
	       	var axesHelper=new THREE.AxesHelper(10);
	       	scene.add(axesHelper);

//网格辅助线 第一个值是长度 第二个值是分割的段数
	       	//var gridHelper=new THREE.GridHelper(10,10)
	       	//scene.add(gridHelper);

扩展：
	1、渲染器可以设置为透明色和抗锯齿
		var render=new THREE.WebGLRenderer({
	       		alpha: true,//背景设置为透明色
	       		antialias: true,//表示开启抗锯齿
	       	});
	
	2、材质除了可以设置颜色还可以设置透明度
		var material=new THREE.MeshBasicMaterial({
       			color:0x00ff00,//0xff0000 === #00ff00
			transparent:true,
			opacity:0.5
       		})

6、光源的基础理解：

1、材质分为受光源影响的材质 和 不受光源影响的材质
	MeshBasicMaterial - 不受光源影响的材质
	MeshLambertMaterial - 受光源影响的材质

2、	//创建一个光源点
		var pointLight=new THREE.PointLight(0xffffff,1.0)
	//为光源点设置位置
	       	pointLight.position.set(100,60,50);
	//上树
	       	scene.add(pointLight)

3、	//为了方便我们看到我们的光源的位置，three提供了一个helper帮我们查看光源的位置
	       	var pointLightHelper=new THREE.PointLightHelper(pointLight,20);
	//上树
	       	scene.add(pointLightHelper)

7、GUI：有了它，我们可以【更好的控制】毛坯的位置，对于我们新手非常友好的组件

import { GUI } from 'abc/libs/lil-gui.module.min.js';
//创建一个GUI实例
var gui=new GUI();

//初始化cube的位置
	       	var originPostion={
	       		x:0,
	       		y:0,
	       		z:0
	       	}
//camera的位置
	       	var cameraPostion={
	       		x:0,
	       		y:0,
	       		z:5
	       	}

//创建第一个gui的参数分组 
	       	var cubeParams=gui.addFolder("几何体的位置");
//添加可以拖动的x，y，z的位置
	       	cubeParams.add(originPostion,"x",0,20).onChange(val=>{
	       		cube.position.x=val;
	       		render.render(scene,camera)
	       	});
	       	
	       	cubeParams.add(originPostion,"y",0,20).onChange(val=>{
	       		cube.position.y=val;
	       		render.render(scene,camera)
	       	});
	       	
	       	cubeParams.add(originPostion,"z",0,20).onChange(val=>{
	       		cube.position.z=val;
	       		render.render(scene,camera)
	       	});
//相机的分组
		var cameraParams=gui.addFolder("相机的位置");
	       	
	       	cameraParams.add(cameraPostion,"x",-5,5).onChange(val=>{
	       		camera.position.x=val;
	       		render.render(scene,camera)
	       	})
	       	cameraParams.add(cameraPostion,"y",-5,5).onChange(val=>{
	       		camera.position.y=val;
	       		render.render(scene,camera)
	       	})
	       	cameraParams.add(cameraPostion,"z",-5,5).onChange(val=>{
	       		camera.position.z=val;
	       		render.render(scene,camera)
	       	})