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);