二、创建场景、相机、渲染器

1.创建一个三维场景scene

const scene = new THREE.Scene();

（1）给三维场景添加物体------定义一个几何体 长方体 长宽高 100-----------形状----geometry

  const geometry = new THREE.BoxGeometry(100, 100, 100);

（2）创建一个材质对象--基础网格材质-----------------------外观----material

  const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff, //红色
  });

（3）创建一个网格模型 ：表示生活中的物体--------------物体-----mesh

  const mesh = new THREE.Mesh(geometry, material);
  //设置网格模型的位置(x,y,z)
  mesh.position.set(0, 10, 0);

（4）把物体mesh 添加到场景中

  scene.add(mesh);

2.创建一个透视投影相机对象

（1）透视投影相机PerspectiveCamera

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();
//​Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera (opens new window)，透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。

​

（2）设置相机位置.position

camera.position.set(200, 200, 200); 

（3）设置相机观察目标.lookAt()

//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //坐标原点
camera.lookAt(0, 10, 0);  //y轴上位置10
camera.lookAt(mesh.position);//指向mesh对应的位置

透视投影相机PerspectiveCamera：视锥体 

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

  // 定义相机输出画布的尺寸
  const width = 800;
  const height = 500;
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
  //设置相机的位置
  camera.position.set(200, 200, 200);
  //相机视线 观察点的坐标
  // camera.lookAt(0, 0, 0);//坐标原点
  camera.lookAt(mesh.position); //视线对着网格模型的位置

3.创建一个渲染器对象

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

 （1）设置Canvas画布尺寸.setSize()

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

（2）渲染器渲染方法.render(场景，相机)

renderer.render(scene, camera); //执行渲染操作

（3）渲染器Canvas画布属性.domElement

渲染器WebGLRenderer通过属性.domElement可以获得渲染方法.render()生成的Canvas画布，.domElement本质上就是一个HTML元素：Canvas画布

document.body.appendChild(renderer.domElement);

  <div class="main" id="webgl"></div>

 document.getElementById("webgl")?.appendChild(renderer.domElement);