three.js(自学第一天)
2021/5/27
three.js(文件地址)
https://github.com/mrdoob/three.js
three.js(github的地址)
源目录结构
Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。
Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。
Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。
Examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。
Src目录：源代码目录，里面是所有源代码。
Test目录：一些测试代码，基本没用。
Utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
.gitignore文件：git工具的过滤规则文件，没有用。
CONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。
LICENSE文件：版权信息。
README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。
基础要素
场景（scene）、相机（camera）和渲染器（renderer）
场景（scene）
var scene = new THREE.Scene(); // 场景
相机（camera）
透视相机（THREE.PerspectiveCamera）
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); //透视相机
渲染器（renderer）
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);
添加物体到场景中
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cubeGeometry的原型
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
width：立方体x轴的长度
height：立方体y轴的长度
depth：立方体z轴的深度，也就是长度
渲染
renderer.render(scene, camera);
渲染原型
render( scene, camera, renderTarget, forceClear )
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
渲染循环(3D动起来)
渲染有两种方式：实时渲染和离线渲染 。
离线渲染:
渲染好一帧一帧的图片，然后再把图片拼接
实时渲染
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame:
让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的循环了。
场景，相机，渲染器之间的关系
场景是一个物体的容器，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。
渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DOBVwqEm-1622195536225)(D:\桌面\场景，相机，渲染器之间的关系.jpg)]
2021/5/28
点、线、面
在计算机世界里，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体
在Threejs中定义一个点
在三维空间中的某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。在three.js中，点可以在右手坐标系中表示：
空间几何中，点可以用一个向量来表示，在Three.js中也是用一个向量来表示的
//Vector3是定义在THREE下面的一个类
THREE.Vector3 = function ( x, y, z ) {
//x坐标，y坐标和z坐标
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
};
点的操作
在3D世界中点可以用THREE.Vector3D来表示。对应源码为/src/math/Vector3.js
定义个点
var point1 = new THREE.Vecotr3(4,8,9);
//set方法
var point1 = new THREE.Vector3();
point1.set(4,8,9);
定义一种线条的材质，使用THREE.LineBasicMaterial类型来定义，它接受一个集合作为参数，其原型如下：
LineBasicMaterial( parameters )
Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：
Color：线条的颜色，用16进制来表示，默认的颜色是白色。
Linewidth：线条的宽度，默认时候1个单位宽度。
Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。（如果关于插值不是很明白，可以QQ问我，QQ在前言中你一定能够找到，嘿嘿，虽然没有明确写出）。
定义两种颜色，分别表示线条两个端点的颜色
var color1 = new THREE.Color( 0x444444 ),
color2 = new THREE.Color( 0xFF0000 );
定义2个顶点的位置，并放到geometry中
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
//2个顶点，设置不同的颜色
//geometry中colors表示顶点的颜色，必须材质中vertexColors等于THREE.VertexColors 时，颜色才有效
geometry.colors.push( color1, color2 );
定义一条线
//定义线条，使用THREE.Line类
//第一个参数是几何体geometry，里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质，或者是线条的属性，表示线条以哪种方式取色。第三个参数是一组点的连接方式
var line = new THREE.Line( geometry, material, THREE.LinePieces );
//线加入到场景
scene.add(line);