threejs 几何体的本质 顶点

几何体的线框模式，

一个正方平面最少可以由4个顶点组成，两个三角形组成（公用了 2个顶点，使用了索引创建顶点属性） 。

// 导入 threejs 
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 创建场景 scene
const scene = new THREE.Scene();
// console.log(scene,'scene');
// 创建相机 -- 观看物体的不同视角
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,  // 宽高比
    0.1,  // 近平面
    1000 // 远平面
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 置canvas画设布的尺寸  -- 设置threejs渲染区域的尺寸 像素 px
renderer.setSize(window.innerWidth,window.innerHeight); 
// domElement 就是一个 canvas 标签  结果 -- 把 canvas 渲染到了页面上
document.body.appendChild(renderer.domElement);

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5); // 参数为轴的长度
scene.add(axesHelper);
// 设置相机的位置 position 
camera.position.set(10,10,10);  // 远距离和近距离
// camera.position.y = 50;  // 远距离和近距离
camera.lookAt(0,0,0);
// camera.lookAt(mesh.position);// 指向mesh对应的位置

// 引入相机控件  -- 轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);

// 浏览器大小调整事件监听  -- 监听窗口的变化
window.addEventListener("resize", () => {
    // console.log('test');
    renderer.setSize(window.innerWidth,innerHeight);  // 根据缩放的窗口重新设置画布的大小
    // 垂直相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
});

// 使用 GUI 放入全屏和退出全屏功能
const gui = new GUI();
const objFun = {
    requestFullscreen:function(){
        document.body.requestFullscreen();
    },
    exitFullscreen:function(){
        document.exitFullscreen(); 
    },
};
gui.add(objFun,"requestFullscreen");
gui.add(objFun,"exitFullscreen");

// 集合体 -- 顶点
//类型化数组创建顶点数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    2, 0, 0, //顶点2坐标
    0, 2, 0, //顶点3坐标
    2, 0, 0, //顶点2坐标
    0, 2, 0, //顶点3坐标
    2, 2, 0, //顶点3坐标
]);
// 通过索引创建顶点  -- 公用了 2 个顶点
const vertices1 = new Float32Array([
    0, 0, 0, //顶点1坐标
    2, 0, 0, //顶点2坐标
    0, 2, 0, //顶点3坐标
    2, 2, 0, //顶点3坐标
]);
const indices = new Uint16Array([0,1,2,1,2,3]);
// 创建空几何体
const geometry = new THREE.BufferGeometry();
// 创建顶点属性
geometry.setAttribute("position",new THREE.BufferAttribute(vertices1,3));
geometry.setIndex(new THREE.BufferAttribute(indices,1));

// 创建材质
const material01 = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,  // 设置可以看到二面的材质
});
const plane = new THREE.Mesh(geometry,material01);
scene.add(plane);


// 添加带阻尼的惯性
controls.enableDamping = true;   //  设置后会有滑动的效果
controls.dampingFactor = 0.2011;   // 时间越小 滑动的时间越小

controls.autoRotate = false;  // 自动旋转

// 动态的渲染函数
function animate() {
    controls.update(); // 如果使用了 autoRotate 属性等 需要在动画中执行 update 方法
    requestAnimationFrame(animate);  // 逐帧渲染
    // 旋转
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.01;
    renderer.render(scene,camera);
}
animate()