初学three.js，在这里记笔记一是为了总结每天学的一点点知识，不要忘记，可以回顾；二是为了让自己能坚持学习，不要半途而废

首先，在three.js官网下载，或者npm下载，库里的THREE变量包含很多类，需要实例化使用，比如，创建一个场景 const scene=new THREE.Scene()

若要在页面上用three.js画一个简单的红色立方体，需要一个立方体的形状的对象，对象的材质(红色)，把对象和材质结合起来作为一个完整的物体，这个对象存放的一个场景，在这个场景中从什么位置看这个场景(相机)，把整个场景渲染出来的渲染器，渲染在哪里(画布)

创建场景

首先要先搭建一个场景：const scene=new THREE.Scene()

告知是什么形状的物体：const geometry=new THREE.BoxGeometry(1,1,1)，创建几何体的前三个参数代表它的大小，单位是一个单元

告知这个物体是什么材质：

材质的参数是一个对象，可以从多个方面来决定材质

const material=new THREE.MeshBasicMaterial({color:"#ff0000"}) 颜色可以是十六进制的#ff0000，也可以是十六进制的0xff0000，或者red

有了形状和材质，就要将形状和材质结合成为一个物体： const mesh=new THREE.Mesh(geometry,material)

接下来，把物体放在场景中：scene.add(mesh)

创建相机

其实，感觉相机就代表人的眼镜，它规定的是人的眼镜距离场景中心的距离，从哪个角度看等，如果没有相机，就相当于人的眼睛是闭着的，场景在，场景里的物体也在，但是看不到

初识three.js，所以先拿透视相机举例

相机有两个基本参数：

1，fov(视场)：the field of view，他不是水平的，而是垂直的，是一个视野角度

大视野相当于站在高处，视野宽广，可以看到很多；小视野相当于拿望远镜从远处来看，东西都放大了，看到的视野很小很窄

在别处看到的解释，一句话解释很清楚，我自己咋也想不明白，原来是这个意思(被自己蠢哭：相机的可视角度，角度越大，可视范围也就越大

2，the aspect ratio(宽高比)：一般是画布的宽高比，宽/高先定义一个宽高对象变量，这样好复用 const sizes={ width:800, height:600 } 创建一个相机：const camera=new THREE.Camrea(75,sizes.width/sizes.height)

这里要注意，所有场景内的物体在没有指定位置时，都在场景的正中心，也就是说，如果相机没有指定位置，他就在物体内部，和物体重叠，那是看不到物体的，所以，也要给相机规定一个位置，单位也是一个单元

既然说到位置，就要说一下坐标轴，当不调整相机的角度时，x轴向右为正方向，y轴向上为正方向，z轴向外(屏幕指向我的方向)为正方向，相机看向的方向默认为z轴正z看向-z的方向，所以可以将相机调整为z轴正方向的3个单元 camera.position.z=3; camera.position.x = 2

最后，别忘记把相机放在场景中，否则就相当于闭眼 scene.add(camera)

这样，一个简单的场景的基本物体就都有了

创建渲染器

整幅画已经构思好了，就是还差画出来，也就是说，不能让我们想象中的人眼(相机)看到，还要让我们真正的看到，所以，要渲染出来

首先要先有一个要渲染的位置，在html页面写一个canvas标签，在js中获取到标签后，创建一个渲染器，渲染器的参数是一个对象，也就是说，渲染器这里应该也可以和物体材质一样可以有很多东西(这里不知道怎么表达了) const renderer=new THREE.WebGLRenderer({canvas})

然后为渲染器提供大小，即画布的大小 renderer.setSize(sizes.width,sizes.height)

最后一步！渲染！要渲染场景和相机 renderer.render(scene,camera)

下面是整体的代码：

// Scene

// THREE变量包含很多类，需要实例化使用
const scene = new THREE.Scene()

// 创建一个Mesh(网格)，包含几何（形状）和材料（外观）
// 创建一个几何体，前三个参数，代表它的大小
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建一个外观,参数是一个对象，因为可能有很多变量，现在提供一个颜色
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" })
// 创建一个网格，也就是创建一个有形状和材料的物体
const mesh = new THREE.Mesh(geometry, material)
// 把创建的物体放在已经创建的场景中
scene.add(mesh)

// Camera

// 有两个基本参数：
// 1，fov(视场)：the field of view,
// 不是水平的，而是垂直的：大视野可以看到很多，小视野相当于拿望远镜看远处，东西都放大了
// 此处fov为75度
// 2,the aspect ratio:纵横比，一般是画布的宽高比：宽度/高度
const sizes = {
    width: 800,
    height: 600
}
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
// 调整camera位置
// 相机默认看向的方向是正z看向负z
camera.position.z = 3
camera.position.x = 2
// 还可以调整camera的rotation和scale
// camera.position.y = 2
// 把相机添加到场景中
scene.add(camera)

// Renderer 

// 渲染器，从相机的角度将场景渲染在画布上
const canvas = document.querySelector(".canvas")
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer({
    // canvas: canvas
    canvas
})
// 为渲染器提供大小
renderer.setSize(sizes.width, sizes.height)
// 
// 注：如果没有指定相机的位置和对象的位置，则相机和对象都在场景的中心
// 也就是相机在立方体内部，所以看不到，只有在外部，才能看到立方体的一个面
renderer.render(scene, camera)

three.js学习笔记1：尝试（入门了解）

创建场景

创建相机

创建渲染器