WebGL-Vue3-TS-Threejs：基础练习 / Javascript 3D library / demo

一、理解Three.js

Three.js是一个用于WebGL渲染的JavaScript库。它提供了一组工具和类，用于创建和渲染3D图形和动画。简单理解（并不十分准确），Three.js之于WebGL，好比，jQuery.js之于JavaScript。

OpenGL 是一个跨平台3D/2D的绘图标准，WebGL则是OpenGL 在浏览器上的一个实现。
web前端开发人员可以直接用WebGL接口进行编程，但 WebGL只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。Threejs 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。

WebGL：开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗_webgl培训-CSDN博客

Three.js的主要特点

序号特点描述
1简单易用它的API非常友好，易于理解和使用。
2兼容性强支持多种浏览器和设备，不需要其他插件和软件。
3功能强大提供了广泛的3D渲染功能，包括材质、灯光、相机等多种元素。
4社区活跃拥有庞大的开发者社区，可以找到大量的示例代码和教程。

通过Three.js，开发者可以快速创建并展示3D模型、场景、动画等内容。它支持多种文件格式，如obj、fbx、glb等，可以轻松导入和使用。同时，它还支持VR和AR等技术，可以创建更加沉浸式的体验。

关键词：场景、相机、光源、材质、贴图、建模、着色

二、文档

ThingJS 文档中心

https://threejs.org/

Three.js中文网

三、项目介绍

vue3 + ts + vite + three.js

四、安装


pnpm add three
pnpm add @types/three

"three": "^0.158.0", 

"@types/three": "^0.154.0", 

五、导入核心库，获取场景

<template>
    <div class="container">
      <span>threejs</span>
    </div>
</template>
  
<script setup lang="ts">
import * as THREE from 'three'
const scene = new THREE.Scene()
console.log('scene:', scene)
  
</script>
  
<style scoped lang="less">
</style>

六、基础练习

6.1、绘制一条直线

<template>
    <div ref="container" id="container" style="width: 200px;height: 200px;"></div>
</template>
  
<script setup lang="ts">
import * as THREE from 'three'
const container:any = ref(null)
onMounted(()=>{
  // 创建场景
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xadacad);

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    45,
    container.value.clientWidth / container.value.clientHeight,
    0.1,
    100
  );
  camera.position.set(0, 0, 3);

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  console.log('24', container)
  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
  container.value.appendChild(renderer.domElement);

  // 定义顶点数据
  const positions = [
    -1, 0, 0,
    0, 1, 0,
  ];

  // 创建一个 BufferGeometry 对象
  const geometry = new THREE.BufferGeometry();
  const positionAttribute = new THREE.Float32BufferAttribute(positions, 3);
  geometry.setAttribute('position', positionAttribute);

  // 创建一个 LineLoop 对象
  const material = new THREE.LineBasicMaterial({ color: 0xf00, linewidth: 5 });
  const line = new THREE.LineLoop(geometry, material);

  // 将线条添加到场景中
  scene.add(line);

  // 开始渲染循环
  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
})
</script>
  
<style scoped lang="less">
</style>

6.2、通过直线，绘制画一个正方形

本例中，我们首先创建了一个 div 元素引用，它将用作 three.js 的渲染器容器。然后创建了场景、相机和渲染器，并将渲染器的输出添加到页面中。

接着，我们定义了闭合线条的顶点数据，并使用 THREE.BufferGeometry 创建了几何体。然后我们使用 THREE.LineLoop 创建了线条对象，并将其添加到场景中。

<template>
    <div ref="container" id="container" style="width: 200px;height: 200px;"></div>
</template>
  
<script setup lang="ts">
import * as THREE from 'three'
const container:any = ref(null)
onMounted(()=>{
  // 创建场景
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xadacad);

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    45,
    container.value.clientWidth / container.value.clientHeight,
    0.1,
    100
  );
  camera.position.set(0, 0, 3);

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  console.log('24', container)
  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
  container.value.appendChild(renderer.domElement);

  // 定义顶点数据
  const positions = [
    -1, 0, 0,
    0, 1, 0,
    1, 0, 0,
    0, -1, 0,
    -1, 0, 0,
  ];

  // 创建一个 BufferGeometry 对象
  const geometry = new THREE.BufferGeometry();
  const positionAttribute = new THREE.Float32BufferAttribute(positions, 3);
  geometry.setAttribute('position', positionAttribute);

  // 创建一个 LineLoop 对象
  const material = new THREE.LineBasicMaterial({ color: 0xf00, linewidth: 5 });
  const line = new THREE.LineLoop(geometry, material);

  // 将线条添加到场景中
  scene.add(line);

  // 开始渲染循环
  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
})
</script>
  
<style scoped lang="less">
</style>

6.3、 vue3 typescript项目 在script使用setup语法糖的方式下，使用最新 threejs api 创建文字

待补充

使用THREE.TextGeometry创建文字的模型，并使用THREE.MeshBasicMaterial和THREE.Mesh将其渲染到场景中

6.4、绘制一个圆形

本例中，首先创建了一个Three.js场景、相机和渲染器。然后创建了一个圆形几何体和一个材质，并使用它们创建了一个网格。最后将圆形添加到场景中，并创建一个animate函数用于实现动画效果。

<template>
  <div id="app"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as THREE from 'three';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('app')?.appendChild(renderer.domElement);

    const geometry = new THREE.CircleGeometry(50, 32);
    const material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true,
    });

    const circle = new THREE.Mesh(geometry, material);
    scene.add(circle);

    camera.position.z = 100;

    const animate = function () {
      requestAnimationFrame(animate);

      circle.rotation.x += 0.01;
      circle.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();

    return { scene, camera, renderer };
  },
});
</script>

6.5、绘制一个圆锥

<template>
  <div id="app"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as THREE from 'three';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('app')?.appendChild(renderer.domElement);

    const geometry = new THREE.ConeGeometry(50, 100, 32);
    const material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true,
    });

    const cone = new THREE.Mesh(geometry, material);
    scene.add(cone);

    camera.position.z = 100;

    const animate = function () {
      requestAnimationFrame(animate);

      cone.rotation.x += 0.01;
      cone.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();

    return { scene, camera, renderer };
  },
});
</script>

6.6、绘制一个立方体

<template>
  <div id="app"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as THREE from 'three';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('app')?.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = function () {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();

    return { scene, camera, renderer };
  },
});
</script>

6.7、绘制一个球体

<template>
  <div ref="container"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as THREE from 'three';

export default defineComponent({
  setup() {
    const container = ref(null);

    onMounted(() => {
      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);

      // 将渲染器添加到DOM中
      if(container.value) {
        container.value.appendChild(renderer.domElement);
      }

      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 添加环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      // 添加点光源
      const pointLight = new THREE.PointLight(0xffffff, 1, 100);
      pointLight.position.set(0, 0, 5);
      scene.add(pointLight);

      // 创建红色球体
      const geometry = new THREE.SphereGeometry(1, 32, 32);
      const material = new THREE.MeshPhongMaterial({ color: 0xff0000, shininess: 100 });
      const sphere = new THREE.Mesh(geometry, material);
      scene.add(sphere);

      // 渲染场景
      const render = () => {
        requestAnimationFrame(render);
        sphere.rotation.x += 0.01;
        sphere.rotation.y += 0.01;
        renderer.render(scene, camera);
      };
      render();
    });

    return {
      container
    }
  }
});
</script>

在这个示例中，我们添加了一个点光源，并将球体的材质参数shininess设置为100，这使球体的表面更加光滑。

你还可以尝试调整环境光和点光源的强度和颜色，或者使用其他类型的光源和材质来改变球体的外观。

 

七、相关内容

canvas、canvas3D、playcanvas、tween、pixi、three.js、webGL、OpenGL

八、过程记录

8.1、学习目标

1、了解基础的3D数学和计算机图形学概念。学习向量、矩阵、坐标系、光照和着色器等基础知识。
2、熟悉WebGL技术，理解网页版3D渲染的基本原理，包括顶点着色器和片段着色器。
3、掌握Three.js的API，包括场景、相机、灯光、材质和几何体等基础概念，以及如何使用它们来创建3D图形。
4、学习如何使用Three.js创建复杂的3D场景，包括如何向场景添加3D模型、纹理、动画和粒子效果。
5、探索Three.js的高级功能，如阴影、反射、抗锯齿和后期处理。
6、将Three.js与其他技术集成，如HTML、CSS和JavaScript，以创建功能丰富且交互性强的3D应用程序。
7、学习如何与其他Web技术集成。将Three.js集成到Web应用程序中，并与其他技术，如HTML、CSS和JavaScript一起使用。
8、练习并参与开源项目，在实践中提高技能水平。
学习Three.js需要一定数学和图形学基础，需要耐心和实践。建议先从基础开始，逐步学习和实践，掌握基本概念和技能后再进行高级的应用。

8.2、Three.js之于WebGL，好比，jQuery.js之于JavaScript，，这样理解有合理性吗

这个比喻在某些方面是有合理性的，但不是完全准确的。 

类比中的相似之处在于，jQuery.js在JavaScript世界中扮演了许多网站开发人员的角色。Three.js也在WebGL世界中扮演着相似的角色。jQuery.js使用DOM元素并操作它们，类似地，Three.js使用WebGL上下文并操作它们。这是比喻的相似之处。

然而，WebGL在功能和范围上远远超过了DOM操作，因此Three.js提供了比jQuery.js更加复杂的功能和API。Three.js的目的是演示和创建3D图形和交互式应用程序，并且具有原生优化的性能。与jQuery.js不同，Three.js是专注于3D图形编程的库。

因此，比喻可以作为一种简单的概括，但它并不完全准确，并且可以误导人们对Three.js和WebGL的理解。

8.3、使用Three.js创建一个简单的立方体场景的基本步骤

1、设置照相机 camera = new THREE.Camera(); 用于观察物体
2、设置场景 scene = new THREE.Scene() 用于承载物体
3、建立物体 geometry = new THREE.CubeGeometry(200, 200, 200); 
4、创建网格 mesh = new THREE.Mesh(geometry, material) 5、渲染呈现 renderer.render(scene, camera) 这是啥

8.4、npm插件'three'和'@types/three'的区别如下

`npm`插件`three`是`Three.js`的`JavaScript`实现，是用于在`JavaScript`中创建和渲染`3D`图形的框架。

`@types/three`是TypeScript类型定义的`npm`包，它提供了`TypeScript`开发环境中`Three.js`库的类型定义文件。这些类型定义文件可以帮助`TypeScript`编译器检查代码类型，并提供提示和自动完成。

因此，`npm`插件`three`是`Three.js`库本身，而`@types/three`则提供了`TypeScript`开发环境所需的类型定义文件。如果你在使用`TypeScript`开发`Three.js`应用程序，则需要安装`npm`包`@types/three`，以获取`Three.js`库的类型定义文件，从而可以在开发过程中获得更好的类型安全支持和代码提示。如果你只是在使用标准的`JavaScript`进行开发，则只需要安装`npm`包`three`即可。

8.5、THREE.Geometry方法不存在新版本了吗

是的，从版本 r125 开始，three.js 废弃了 THREE.Geometry，并引入了 THREE.BufferGeometry 作为建模的首选选择。这是为了提高性能，并使开发人员更容易控制顶点数据。

因此，如果您使用的是最新版本的 three.js，建议使用 THREE.BufferGeometry 来代替 THREE.Geometry。

8.6、需要在onmounted声明周期，确保DOM元素已经加载完成

需要注意的是，在使用Three.js时，需要确保DOM元素已经加载完成，否则会出现错误。上述示例中使用了安全访问运算符（?.）和类型断言（!），以确保能够正确获取DOM元素。

8.7、playcanvas.js 和 three.js 有什么相同异同

PlayCanvas和Three.js都是用于创建和显示3D图形的JavaScript库，但它们有一些关键的区别。

序号相同
1两者都是用于创建和显示3D图形的JavaScript库
2两者都提供了一系列的API来方便开发者创建和控制3D图形
3两者都支持在浏览器中运行，而且都能很好地支持各种主流的浏览器
4两者都提供了一些基本的3D功能，如3D模型的加载和呈现、材质和纹理的应用、动画和物理效果等
5两者都是开源的项目，并且都有一个活跃的社区在支持和维护
序号不同
1PlayCanvas.js的定位更多是在线多人游戏的开发，它在多人游戏的网络性能优化方面有更好的表现。而Three.js的应用范围更广泛，包括但不限于游戏开发，定位更多是用于3D呈现和交互式场景的创建。
2PlayCanvas提供了一套完整的游戏开发框架，包括物理引擎、碰撞检测、声音系统等，而Three.js主要专注于图形渲染。
3PlayCanvas提供了实时渲染功能，可以在浏览器中实现流畅的3D游戏体验，而Three.js虽然也支持实时渲染，但通常需要配合其他库（如WebGL或WebGPU）来实现更好的效果。
4PlayCanvas的文档和社区比Three.js更加完善，API更加简洁易用，对于开发者来说更容易上手和使用。而Three.js的API更加底层，需要开发者有一定的3D编程经验。
5PlayCanvas支持组件化开发，可以通过组合不同的组件来快速构建复杂的3D场景，而Three.js则需要更多的手动设置和调整。
6PlayCanvas支持多种输入方式（如键盘、鼠标、触摸等），适合开发各种类型的交互式应用，而Three.js则更侧重于图形渲染方面的输入控制。

九、老语法 --》新语法

序号老语法新语法
1

new THREE.FontLoader()

TextureLoader
THREE.TypefaceLoader
2

new THREE.TextGeometry()

THREE.TextBufferGeometry？？？
THREE.Mesh？？？
待补充待补充待补充

十、参考链接

补间动画tween.js_tween补间动画-CSDN博客

和我一起学 Three.js【初级篇】：2. 掌握几何体 - 知乎

关于javascript：Three.js新的THREE.TextBufferGeometry()无法读取未定义错误的属性’yMax’ | 码农家园

Three.js API手册 / LineBasicMaterial - 汇智网

Caught error TypeError: THREE.Geometry is not a constructor

Three.js中文网

https://www.cnblogs.com/tiandi/p/17053774.html

vue3项目中使用three.js的操作步骤_vue.js_脚本之家

开始第一个Hello world! | 码上动力

Lamborghini Huracán STO 2020

three.js全网最全最新入门课程（2023年10月更新）【搞定前端前沿技术】_哔哩哔哩_bilibili

threejs-vite-vue实战课程_哔哩哔哩_bilibili

带你入门three.js——从0到1实现一个3d可视化地图 - 知乎

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/130015.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ROS Motion Planning运动规划库安装方法及进阶使用方法详细介绍

ROS Motion Planning运动规划库安装方法及进阶使用方法详细介绍

今天偶然发现了一个优质的运动规划库&#xff1a;ai-winter/ros_motion_planning&#xff0c;比较适合从事ROS移动机器人运动规划研究领域的小伙伴学习和使用&#xff0c;相比于莱斯大学Kavraki实验室提供的开源的著名运动规划库OMPL、或着我之前介绍过的zhm-real开源的zhm-rea…
阅读更多...
2011年09月01日 Go生态洞察：Go语言词法扫描与App Engine演示

2011年09月01日 Go生态洞察：Go语言词法扫描与App Engine演示

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
蓝桥杯每日一题2023.11.10

蓝桥杯每日一题2023.11.10

“蓝桥杯”练习系统 (lanqiao.cn) 题目描述 题目分析 对于此题&#xff1a;我们看到题目要求尽可能大&#xff0c;会联想到二分&#xff0c;注意切出的一定为正方形&#xff0c;其能切出的个数为(h[i] / x) * (w[i] / x)&#xff0c;将所有的个数与要求的个数进行对比&#x…
阅读更多...
sql学习笔记（三）

sql学习笔记（三）

目录 1.四舍五入 2.向上取整 3.向下取整 4.Hive 分区 5.case when条件语句 6.日期函数 7.字符串函数 8.窗口函数 1️⃣排序函数 1.四舍五入 round select round(3.14) —>3 2.向上取整 ceiling select ceiling(12.15) —>13 3.向下取整 floor select floor(12…
阅读更多...
RFID携手制造业升级，为锂电池生产带来前所未有的可靠性

RFID携手制造业升级，为锂电池生产带来前所未有的可靠性

应用背景 随着科技的发展和全球化的推进&#xff0c;产品的生产过程越来越复杂&#xff0c;且对品质的要求也越来越高。在锂电池生产领域&#xff0c;由于其高能量密度、长寿命和环保特性&#xff0c;已被广泛应用于电动汽车、储能系统等领域。然而&#xff0c;锂电池的安全性和…
阅读更多...
Android T窗口动画显示和退出流程（更新中）

Android T窗口动画显示和退出流程（更新中）

序 如何创建一个窗口动画&#xff1f;我们通过先从APP创建一个窗口&#xff0c;以这个窗口的创建过程的窗口动画为例 这个demo就是点击BUTTON显示窗口&#xff0c;点击CLOSE WINDOW关闭窗口&#xff0c;下面简述关键代码 //定义WindowManager和LayoutParams private Window…
阅读更多...
redis数据倾斜如何解决

redis数据倾斜如何解决

Redis数据倾斜主要是由于数据访问热点导致的&#xff0c;通常在执行事务操作或范围查询时发生。这会导致大量数据集中在某个实例上&#xff0c;使得集群负载不均衡。以下是一些解决Redis数据倾斜的方法&#xff1a; 避免在同一个键值对上保存过多的数据。可以将大的键值对拆分…
阅读更多...
Java 算法篇-深入理解递归（递归实现：青蛙爬楼梯）

Java 算法篇-深入理解递归（递归实现：青蛙爬楼梯）

&#x1f525;博客主页&#xff1a; 小扳_-CSDN博客 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 递归的说明 2.0 用递归来实现相关问题 2.1 递归 - 阶乘 2.2 递归 - 反向打印字符串 2.3 递归 - 二分查找 2.4 递归 - 冒泡排序 2.5 递归 - 冒泡排序2.0 2.6 递归 - 插…
阅读更多...
启动Docker服务后显示Docker Engine stopped

启动Docker服务后显示Docker Engine stopped

1、重新启动Docker服务&#xff1a;打开Windows服务管理器&#xff08;可以在开始菜单中搜索&#xff09;&#xff0c;找到"Docker Desktop Service"或类似命名的服务&#xff0c;右键单击并选择"重启"。稍等片刻&#xff0c;看看是否重新启动成功 2、尝试…
阅读更多...
依赖倒转原则接口隔离原则迪米特法则合成复用原则

依赖倒转原则接口隔离原则迪米特法则合成复用原则

阅读更多...
如何快速落地LLM应用？通过Langchain接入千帆SDK

如何快速落地LLM应用？通过Langchain接入千帆SDK

百度智能云千帆大模型平台再次史诗级升级&#xff01;在原有API基础上&#xff0c;百度智能云正式上线Python SDK&#xff08;下文均简称千帆 SDK&#xff09;版本并全面开源&#xff0c;企业和开发者可免费下载使用&#xff01;千帆SDK全面覆盖从数据集管理&#xff0c;模型训…
阅读更多...
如何利用软文推广提升消费者“购买力”？

如何利用软文推广提升消费者“购买力”？

企业软文推广的目的大部分是为了将自己的产品卖出去&#xff0c;想要成功卖出去还得将重心放在消费者身上&#xff0c;今天媒介盒子就来分享&#xff0c;如何利用软文推广提升消费者的“购买力”。 一、 研究产品属性 产品是连接企业和消费者的桥梁&#xff0c;要想将产品卖出…
阅读更多...
黄执中老师人际说服课思考总结（个人笔记整理 ②）

黄执中老师人际说服课思考总结（个人笔记整理 ②）

前言&#xff1a; 沟通和说服的区别&#xff1a;为什么沟通不能解决问题&#xff0c;处于劣势的一方&#xff08;承受问题的那方&#xff09;才想去沟通&#xff08;对方没有沟通动力&#xff09;。说服是温柔而有力的学科 - 劣势一方的武器。 说服是一门影响人的学问&#xff…
阅读更多...
SQL Server 2022 安装步骤——SQL Server设置身份验证教程

SQL Server 2022 安装步骤——SQL Server设置身份验证教程

目录 前言: 安装详细步骤: 第一步: 第二步: 第三步: 第四步: SQL Server 连接的方式: Window验证: SQL Server验证: 两者之间区别: 总结: SQL Server身份验证登录配置教程:​ 第一步: 第二步: 第三步: 番外篇: 前言: 本文讲解&#xff0c;如何安装SQL Server安…
阅读更多...
自媒体项目详述

自媒体项目详述

总体框架 本项目主要着手于获取最新最热新闻资讯&#xff0c;以微服务构架为技术基础搭建校内仅供学生教师使用的校园新媒体app。以文章为主线的核心业务主要分为如下子模块。自媒体模块实现用户创建功能、文章发布功能、素材管理功能。app端用户模块实现文章搜索、文章点赞、…
阅读更多...
一分钟秒懂人工智能对齐 ( 文末送书 )

一分钟秒懂人工智能对齐 ( 文末送书 )

人工智能对齐 什么是人工智能对齐为什么要研究人工智能对齐人工智能对齐的常见方法延伸阅读写在末尾&#xff1a; 主页传送门&#xff1a;&#x1f4c0; 传送 什么是人工智能对齐 人工智能对齐&#xff08;AI Alignment&#xff09;指让人工智能的行为符合人的意图和价值观。 …
阅读更多...
三季度净利润高达28.1亿元，2023的理想“高开高走”？

三季度净利润高达28.1亿元，2023的理想“高开高走”？

最近&#xff0c;理想汽车的好消息接二连三&#xff0c;先是月交付量突破四万辆大关。紧接着11月9日发布的2023年第三季度财报显示&#xff0c;理想汽车实现第三季度营收346.8亿人民币&#xff0c;同比增长271.2%。 今年以来&#xff0c;理想汽车的整体走势可谓“高开高走”。…
阅读更多...
【JAVA学习笔记】65 - 文件类，IO流--节点流、处理流、对象流、转换流、打印流

【JAVA学习笔记】65 - 文件类，IO流--节点流、处理流、对象流、转换流、打印流

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter19/src/com/yinhai 文件 一、文件&#xff0c;流 文件,对我们并不陌生&#xff0c;文件是保存数据的地方,比如大家经常使用的word文档,txt文件,excel文件..都是文件。它既可以保存一张图片…
阅读更多...
归并排序 图解 递归 + 非递归 + 笔记

归并排序 图解 递归 + 非递归 + 笔记

前置知识&#xff1a;讲解019-算法笔试中处理输入和输出&#xff0c;讲解020-递归和master公式 (1)左部分排好序&#xff0c;右部分排好序&#xff0c;利用merge过程让左右整体有序(2)merge过程:谁小拷贝谁&#xff0c;直到左右两部分所有的数字耗尽(3)递归实现和非递归实现(4…
阅读更多...
NFT合约部署

NFT合约部署

部署合约&#xff1a; 1.web3 NFT合约部署工具 https://remix.ethereum.org/ 2.tron NFT合约部署工具 https://www.tronide.io/ 3.部署 web3 ERC721代码&#xff1a; // SPDX-License-Identifier: MIT pragma solidity ^0.8.2;import "openzeppelin/contracts/token/ERC7…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站