【愚公系列】2023年08月 Three.js专题-几何体

2024-02-15 02:40
文章标签 2023 js 系列 08 专题 three 几何体 愚公

本文主要是介绍【愚公系列】2023年08月 Three.js专题-几何体，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 前言
  • 一、几何体
    • 1.几何体类型
      • 1.1 二维几何体
      • 1.2 三维几何体
    • 2.几何体创建流程
    • 3.几何体属性和方法
      • 3.1 属性
      • 3.2 方法
      • 3.3 赋值
        • 3.3.1 直接赋值
        • 3.3.2 单个赋值
        • 3.3.3 方法赋值
    • 4.案例
      • 4.1 PlaneGeometry二维平面
      • 4.2 CircleGeometry二维圆
      • 4.3 ShapeGeometry自定义二维图形
      • 4.4 BoxGeometry立方体
      • 4.5 SphereGeometry球体
      • 4.6 CylinderGeometry圆柱体
      • 4.7 TorusGeometry圆环
      • 4.8 TorusKnotGeometry纽结
      • 4.9 IcosahedronGeometry多面体
      • 4.10 TextGeometry文字

前言

几何体是指由点、线、面所构成的空间实体。其中，点、线、面是几何体的基本元素，几何体包括球体、立方体、圆锥体、圆柱体、棱柱、棱锥、棱台等。这些几何体都有自己的特定形状和特征，可以应用于各种数学、物理和工程领域。

一、几何体

1.几何体类型

1.1 二维几何体

Three.js中的二维几何体包括：

  1. 二维点（THREE.Points）：表示一个点或一组点。

  2. 二维线段（THREE.Line）：表示一条直线或折线。

  3. 二维多段线（THREE.LineSegments）：表示多条线段连接而成的图形。

  4. 二维圆形（THREE.Circle）：表示一个圆形，可以设置半径和线段数。

  5. 二维椭圆（THREE.EllipseCurve）：表示一个椭圆，可以设置长短半径、起始角度和终止角度。

  6. 二维三角形（THREE.Triangle）：表示一个三角形，可以设置三个顶点的位置。

  7. 二维矩形（THREE.PlaneGeometry）：表示一个矩形，可以设置宽度和高度。

  8. 二维多边形（THREE.Shape）：表示一个任意形状的多边形，可以通过添加线段和曲线来构造。

  9. 二维文字（THREE.TextGeometry）：表示一个二维文字，可以设置文字内容、大小和字体等属性。

1.2 三维几何体

在Three.js中，常用的三维几何体有以下这些：

  1. BoxGeometry（立方体）

  2. SphereGeometry（球体）

  3. CylinderGeometry（圆柱体）

  4. ConeGeometry（圆锥体）

  5. TorusGeometry（圆环体）

  6. TorusKnotGeometry（环面纽结体）

  7. IcosahedronGeometry（二十面体）

  8. OctahedronGeometry（八面体）

  9. TetrahedronGeometry（四面体）

  10. DodecahedronGeometry（十二面体）

  11. PlaneGeometry（平面）

  12. TextGeometry（文本）

  13. ExtrudeGeometry（拉伸体）

  14. ParametricGeometry（参数体）

  15. PolyhedronGeometry（多面体，可以自定义多面体）

以上几何体都是通过Three.js内部的算法计算生成的，并且都支持在WebGL渲染器上渲染。此外，Three.js还支持通过加载外部模型文件来创建几何体，如使用OBJLoader加载obj模型文件，使用GLTFLoader加载glTF模型文件等。这些模型文件可以使用3D软件（如Blender、3ds Max等）或在线模型平台（如Sketchfab）创建或下载。

2.几何体创建流程

  1. 首先要引入Three.js库，可以使用CDN或本地下载的方式引入。

  2. 创建场景和相机。例如：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  1. 创建渲染器，并将渲染器的输出添加到DOM中。例如：
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
  1. 创建几何体，可以使用Three.js提供的几何体类或自定义几何体。例如：
var geometry = new THREE.BoxGeometry(1, 1, 1);
  1. 创建材质，可以使用Three.js提供的现成材质类或自定义材质。例如：
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  1. 创建网格，将几何体和材质结合在一起创建网格。例如：
var cube = new THREE.Mesh(geometry, material);
  1. 将网格添加到场景中：
scene.add(cube);
  1. 渲染场景：
function render() {requestAnimationFrame(render);renderer.render(scene, camera);
}
render();

以上是一个简单的几何体创建流程，你可以根据具体需求进行修改和扩展。

3.几何体属性和方法

在Three.js中，每个几何体都有一些默认的属性和方法，也可以自定义添加属性和方法。下面是一些常见的几何体属性和方法的详细说明：

3.1 属性

  1. vertices：顶点数组，指定几何体的顶点坐标。

  2. faces：面数组，指定几何体的所有面。

  3. colors：颜色数组，指定几何体每个顶点的颜色。

  4. uvs：UV贴图数组，指定几何体每个顶点在贴图上的位置。

  5. normals：法向量数组，指定每个面的法向量，用于计算光照。

  6. boundingBox：包围盒对象，包括最小点和最大点。

  7. boundingSphere：包围球对象，包括中心点和半径。

3.2 方法

  1. computeBoundingBox()：计算几何体的包围盒。

  2. computeBoundingSphere()：计算几何体的包围球。

  3. computeVertexNormals()：计算每个顶点的法向量。

  4. computeFaceNormals()：计算每个面的法向量。

  5. applyMatrix()：将矩阵应用到几何体中的所有顶点上。

  6. translate()：平移几何体。

  7. rotateX()、rotateY()、rotateZ()：绕X、Y、Z轴旋转几何体。

  8. scale()：缩放几何体。

  9. clone()：克隆一个几何体。

  10. dispose()：释放几何体的资源。

以上是一些常见的几何体属性和方法，可以根据需要进行选择和使用。

3.3 赋值

3.3.1 直接赋值
sphere.position = new THREE.Vector3(0,0,0);
sphere.rotation = new THREE.Vector3(0.5 * Math.PI,0,0);
sphere.scale = new THREE.Vector3(2,0,0);
3.3.2 单个赋值
sphere.position.x = 0;
sphere.rotation.x = 0.5 * Math.PI;
sphere.scale.x = 2;
3.3.3 方法赋值
sphere.position.set(0,0,0);
sphere.rotation.set(0.5 * Math.PI,0,0):
sphere.scale.set(2,0,0) ;

4.案例

4.1 PlaneGeometry二维平面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.PlaneBufferGeometry(10, 10, 2, 2);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.2 CircleGeometry二维圆

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.CircleGeometry(4, 10, 0, Math.PI * 2);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.3 ShapeGeometry自定义二维图形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const shape = new THREE.Shape()shape.moveTo(0, 0)shape.lineTo(0, 3)shape.lineTo(3, 3)shape.lineTo(3, 0)shape.lineTo(0, 0)const geometry = new THREE.ShapeGeometry(shape)// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.4 BoxGeometry立方体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.BoxGeometry(3,3,3,1,1,1);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.5 SphereGeometry球体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.SphereGeometry(2,20,20,Math.PI * 2,Math.PI * 2,Math.PI * 2,Math.PI * 2);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.6 CylinderGeometry圆柱体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.CylinderGeometry(2, 2, 2, 20, 4, false);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.7 TorusGeometry圆环

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.TorusGeometry(2, 1, 10, 10, Math.PI * 2);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.8 TorusKnotGeometry纽结

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.TorusKnotGeometry(2, 1, 20, 16, 1, 3, 1);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.9 IcosahedronGeometry多面体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象// // 顶点// const vertices =[1,1, 1, -1, -1,1, -1, 1 -1,1,-1, -1]// // 索引// const indices = [2, 1, 9, , 3, 2, 1, 3, , 2, 3, 1];// const geometry = new THREE.PolyhedronGeometry(vertices, indices, 4, 0);// 正四面体// const geometry = new THREE.TetrahedronGeometry(4, 0);// 正八面体// const geometry = new THREE.OctahedronGeometry(4, 0);// 正二十面体const geometry = new THREE.IcosahedronGeometry(4, 0);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

4.10 TextGeometry文字

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style><script src="../lib/three/three.js"></script><script src="../lib/three/dat.gui.js"></script><script src="../controls/index.js"></script><script src="../assets/font/font.js"></script>
</head>
<body></body>
</html><script>// 创建一个场景const scene = new THREE.Scene();// 创建一个相机 视点const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机的位置camera.position.set(0,0,20);// 创建一个渲染器const renderer = new THREE.WebGLRenderer();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 添加一个立方体// 定义了一个立方体的对象const geometry = new THREE.TextGeometry('THREE', textOptions);// 创建材质const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })const basic = new THREE.MeshBasicMaterial({ wireframe: true })const mesh = {pointer: THREE.SceneUtils.createMultiMaterialObject(geometry, [lambert,basic])}// 添加到场景里scene.add(mesh.pointer);// 添加灯光const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,10,90);scene.add(spotLight);initControls(geometry, camera, mesh, scene)const animation = () => {mesh.pointer.rotation.x += 0.01;mesh.pointer.rotation.y += 0.01;// 渲染renderer.render(scene, camera);requestAnimationFrame(animation);}animation()
</script>

在这里插入图片描述

这篇关于【愚公系列】2023年08月 Three.js专题-几何体的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/710250。

相关文章

Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2