Three.js--》实现3d官网模型展示

news2024/10/5 17:16:11

目录

项目搭建

实现网页简单布局

初始化three.js基础代码

创建环境背景

加载飞船模型

实现滚轮滑动切换3D场景

设置星光流动特效

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用 。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：

<template>
  <!-- 3D网页 -->
  <WebPage></WebPage>
</template>

<script setup>
import WebPage from './components/WebPage.vue';
</script>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
</style>

实现网页简单布局

<template>
  <div class="home">
    <div class="canvas-container" ref="screenDom"></div>
    <div class="header">
      <div class="menu">
        <a href="#" class="menuItem">首页</a>
        <a href="#" class="menuItem">详情</a>
        <a href="#" class="menuItem">关于</a>
      </div>
    </div>
    <div class="pages" ref="pages">
      <div class="page">
        <h2 class="title">前端技术</h2>
        <p>轻松、好玩、有趣掌握前沿硬核前端技术</p>
      </div>
      <div class="page">
        <h2 class="title">WEB 3D可视化</h2>
        <p>领略WEB 3D的魅力，让页面无比酷炫</p>
      </div>
      <div class="page">
        <h2 class="title">ThreeJS框架</h2>
        <p>让前端开发3D效果更方便</p>
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #000;
}
.canvas-container {
  width: 100vw;
  height: 100vh;
}
.home {
  width: 100vw;
  height: 100vh;
  transform-origin: 0 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-container {
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 50px;
}
.menuItem {
  padding: 0 15px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.progress > img {
  padding: 0 15px;
}
.pages {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
}
.pages .page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  padding: 15%;
  box-sizing: border-box;
}
.pages .page .title {
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 20px;
}
.pages .page p {
  font-size: 25px;
}
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

let camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,100000);
camera.position.set(0, 0, 10);

初始化渲染器：

let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

设置渲染函数：

// 创建渲染函数
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

进行挂载：

onMounted(() => {
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);
  render()
});

ok，写完基础代码之后，接下来开始具体的Demo实操。 

创建环境背景

这里通过TextureLoader加载各种类型的纹理图像，包括JPEG、PNG、GIF等。通过TextureLoader，开发人员可以轻松地将纹理加载到自己的Three.js场景中，从而为场景增加更多的细节和视觉效果。

// 创建星空的背景
let url = "src/assets/imgs/25s.jpg";
let envTexture = new THREE.TextureLoader().load(url);
envTexture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = envTexture;
scene.environment = envTexture;

加载飞船模型

经过前几篇对three.js小demo的训练，相信大家对加载模型可谓是得心应手了吧，无非就四步嘛，这里有个情况就是我还额外使用了动画库进行处理，所以步骤稍微要复杂一点。

第一步引入加载GLTF模型和压缩模型以及gsap的第三方库：

// 加载GLTF模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 解压GLTF模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
// 动画库
import { gsap } from "gsap";

第二步初始化loader：

let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
dracoLoader.setDecoderConfig({ type: "js" });
let loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

第三步就是加载gltf模型，这里使用了鼠标监听函数，然后获取相关对应的坐标，然后通过gsap进行实现动画效果，如下：

loader.load("./model/xz.glb", (gltf) => {
  gltf.scene.scale.set(0.1, 0.1, 0.1);
  gltf.scene.position.set(3, 0, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;

    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

第四步就是根据具体情况添加光源：

// 添加灯光
let light = new THREE.DirectionalLight(0xffffff, 0.7);
light.position.set(0, 0, 1);
scene.add(light);
let light2 = new THREE.DirectionalLight(0xffffff, 0.3);
light2.position.set(0, 0, -1);
scene.add(light2);
let light3 = new THREE.AmbientLight(0xffffff, 0.3);
light3.position.set(-1, 1, 1);
scene.add(light3);

实现滚轮滑动切换3D场景

因为我在html设置了三个div进行页面切换如下：

所以我们需要引入3个glb模型，和上面引入模型的方式一样：

loader.load("./model/xq6.glb", (gltf) => {
  gltf.scene.scale.set(0.05, 0.05, 0.05);
  gltf.scene.position.set(3, -8, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

loader.load("./model/gr75.glb", (gltf) => {
  gltf.scene.scale.set(0.8, 0.8, 0.8);
  gltf.scene.position.set(3, -16, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

接下来通过监听鼠标滚轮事件来实现page的动态改变：

let page = 0;
let timeline2 = gsap.timeline();
window.addEventListener("mousewheel", (e) => {
  if (e.wheelDelta < 0) {
    page++;
    if (page > 2) {
      page = 2;
    }
  }
  if (e.wheelDelta > 0) {
    page--;
    if (page < 0) {
      page = 0;
    }
  }
  if (!timeline2.isActive()) {
    timeline2.to(camera.position, {
      duration: 0.5,
      y: page * -8,
      duration: 1,
    });
    gsap.to(pages.value, {
      duration: 1,
      y: -page * window.innerHeight,
      duration: 1,
    });
  }
});

设置星光流动特效

这里通过加载月球模型，实现星光流动的效果，InstancedMesh是一种在Three.js等WebGL引擎中使用的渲染技术，它允许我们高效地创建具有重复几何体的场景。通常在场景中有很多相同的对象，例如草丛，树木或者敌人等，而这些对象实际上是几何体和材质的组合。

loader.load("./model/moon.glb", (gltf) => {
  let moon = gltf.scene.children[0];
  for (let j = 0; j < 10; j++) {
    let moonInstance = new THREE.InstancedMesh(
      moon.geometry,
      moon.material,
      100
    );
    for (let i = 0; i < 100; i++) {
      let x = Math.random() * 1000 - 500;
      let y = Math.random() * 1000 - 500;
      let z = Math.random() * 1000 - 500;

      let matrix = new THREE.Matrix4();
      let size = Math.random() * 20 - 8;
      matrix.makeScale(size, size, size);
      matrix.makeTranslation(x, y, z);
      moonInstance.setMatrixAt(i, matrix);
    }

    gsap.to(moonInstance.position, {
      duration: Math.random() * 10 + 2,
      z: -1000,
      ease: "linear",
      repeat: -1,
    });
    scene.add(moonInstance);
  }
});

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）

<template>
  <div class="home">
    <div class="canvas-container" ref="screenDom"></div>
    <div class="header">
      <div class="menu">
        <a href="#" class="menuItem">首页</a>
        <a href="#" class="menuItem">详情</a>
        <a href="#" class="menuItem">关于</a>
      </div>
    </div>
    <div class="pages" ref="pages">
      <div class="page">
        <h2 class="title">前端技术</h2>
        <p>轻松、好玩、有趣掌握前沿硬核前端技术</p>
      </div>
      <div class="page">
        <h2 class="title">WEB 3D可视化</h2>
        <p>领略WEB 3D的魅力，让页面无比酷炫</p>
      </div>
      <div class="page">
        <h2 class="title">ThreeJS框架</h2>
        <p>让前端开发3D效果更方便</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { gsap } from "gsap";
let screenDom = ref(null);
let pages = ref(null);

// 创建场景
let scene = new THREE.Scene();
// 创建相机
let camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,100000);
camera.position.set(0, 0, 10);

// 创建渲染器
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

// 创建渲染函数
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

onMounted(() => {
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);
  render()
});

// 创建星空的背景
let url = "src/assets/imgs/25s.jpg";
let envTexture = new THREE.TextureLoader().load(url);
envTexture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = envTexture;
scene.environment = envTexture;

// 设置解压缩的加载器
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
dracoLoader.setDecoderConfig({ type: "js" });
let loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load("./model/xz.glb", (gltf) => {
  gltf.scene.scale.set(0.1, 0.1, 0.1);
  gltf.scene.position.set(3, 0, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;

    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

// 添加灯光
let light = new THREE.DirectionalLight(0xffffff, 0.7);
light.position.set(0, 0, 1);
scene.add(light);
let light2 = new THREE.DirectionalLight(0xffffff, 0.3);
light2.position.set(0, 0, -1);
scene.add(light2);
let light3 = new THREE.AmbientLight(0xffffff, 0.3);
light3.position.set(-1, 1, 1);
scene.add(light3);

loader.load("./model/xq6.glb", (gltf) => {
  gltf.scene.scale.set(0.05, 0.05, 0.05);
  gltf.scene.position.set(3, -8, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

loader.load("./model/gr75.glb", (gltf) => {
  gltf.scene.scale.set(0.8, 0.8, 0.8);
  gltf.scene.position.set(3, -16, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

let page = 0;
let timeline2 = gsap.timeline();
window.addEventListener("mousewheel", (e) => {
  if (e.wheelDelta < 0) {
    page++;
    if (page > 2) {
      page = 2;
    }
  }
  if (e.wheelDelta > 0) {
    page--;
    if (page < 0) {
      page = 0;
    }
  }
  if (!timeline2.isActive()) {
    timeline2.to(camera.position, {
      duration: 0.5,
      y: page * -8,
      duration: 1,
    });
    gsap.to(pages.value, {
      duration: 1,
      y: -page * window.innerHeight,
      duration: 1,
    });
  }
});

loader.load("./model/moon.glb", (gltf) => {
  let moon = gltf.scene.children[0];
  for (let j = 0; j < 10; j++) {
    let moonInstance = new THREE.InstancedMesh(
      moon.geometry,
      moon.material,
      100
    );
    for (let i = 0; i < 100; i++) {
      let x = Math.random() * 1000 - 500;
      let y = Math.random() * 1000 - 500;
      let z = Math.random() * 1000 - 500;

      let matrix = new THREE.Matrix4();
      let size = Math.random() * 20 - 8;
      matrix.makeScale(size, size, size);
      matrix.makeTranslation(x, y, z);
      moonInstance.setMatrixAt(i, matrix);
    }

    gsap.to(moonInstance.position, {
      duration: Math.random() * 10 + 2,
      z: -1000,
      ease: "linear",
      repeat: -1,
    });
    scene.add(moonInstance);
  }
});

</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #000;
}
.canvas-container {
  width: 100vw;
  height: 100vh;
}
.home {
  width: 100vw;
  height: 100vh;
  transform-origin: 0 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-container {
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 50px;
}
.menuItem {
  padding: 0 15px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.progress > img {
  padding: 0 15px;
}
.pages {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
}
.pages .page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  padding: 15%;
  box-sizing: border-box;
}
.pages .page .title {
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 20px;
}
.pages .page p {
  font-size: 25px;
}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机常见的故障类型

计算机常见的故障类型

文章目录 前言一、常见故障类型介绍1.硬件故障2.系统故障3.软件故障 二、故障排查思路三、Win操作系统问题1.系统基本信息2.系统资源监视器&#xff08;运行对话框输入“resmon”&#xff09;3.事件查看器&#xff08;运行对话框输入“eventvwr”&#xff09;4.任务管理器&…
阅读更多...
使用这些方法让你的 Python 并发任务执行得更好

使用这些方法让你的 Python 并发任务执行得更好

动动发财的小手&#xff0c;点个赞吧&#xff01; 问题 一直以来&#xff0c;Python的多线程性能因为GIL而一直没有达到预期。 所以从 3.4 版本开始&#xff0c;Python 引入了 asyncio 包&#xff0c;通过并发的方式并发执行 IO-bound 任务。经过多次迭代&#xff0c;asyncio A…
阅读更多...
【LED子系统】八、小试牛刀

【LED子系统】八、小试牛刀

个人主页&#xff1a;董哥聊技术 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强公司&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; 文章目录…
阅读更多...
2023电工杯数学建模B题完整模型代码【原创首发】

2023电工杯数学建模B题完整模型代码【原创首发】

文末获取全部资料 摘要 近年来&#xff0c;随着人工智能&#xff08;AI&#xff09;技术的发展和广泛应用&#xff0c;其在教育领域的潜力和影响引起了广泛关注。本研究旨在通过一项全面的问卷调查&#xff0c;探讨AI学习工具在大学生学习过程中的影响。 在本项研究中&#…
阅读更多...
认识HTTP协议---1

认识HTTP协议---1

hello,大家好,今天为大家带来http协议的相关知识 1.HTTP协议 &#x1f437;1.应用层协议 &#x1f437;2.HTTP协议的工作过程 2.HTTP协议格式 &#x1f437;1.认识抓包工具Fidder &#x1f437;2.学会使用fidder &#x1f437;3.协议格式总结 3.HTTP请求 &#x1f437…
阅读更多...
常用本地事务和分布式事务解决方案模型

常用本地事务和分布式事务解决方案模型

目录 1 DTP模型2 2PC2.1 方案简介2.2 处理流程2.2.1 阶段1&#xff1a;准备阶段2.2.2 阶段2&#xff1a;提交阶段 2.3 方案总结 3 3PC3.1 方案简介3.2 处理流程3.2.1 阶段1&#xff1a;canCommit3.2.2 阶段2&#xff1a;preCommit3.3.3 阶段3&#xff1a;do Commit 3.3 方案总结…
阅读更多...
使用本地的chatGLM

使用本地的chatGLM

打开终端 wsl -d Ubuntu conda activate chatglm cd cd ChatGLM-6B python3 cli_demo.py 依次输入以上命令。
阅读更多...
随机森林Proximity实现及应用

随机森林Proximity实现及应用

随机森林Proximity实现及应用 1 算法1.1 随机森林Proximity简介1.2 RF-GAP1.3 实现代码 2 应用2.1 离群点(outlier)检测2.1.1 原理和实现2.1.2 实验结果 附录 项目主页&#xff1a;randomforest C implementation of random forests classification, regression, proximity and…
阅读更多...
可以免费使用的ChatGPT保姆级教程 （New Bing）

可以免费使用的ChatGPT保姆级教程 （New Bing）

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 最近&#xff0c;ChatGPT已经非常流行&#xff0c;但由于各种原因&#xff0c;国内用户无法直接免费使用ChatGPT的API&#xff0c;各种伟大的神也利用这…
阅读更多...
沉浸式翻译 安装及使用

沉浸式翻译 安装及使用

介绍一下最近非常或的沉浸式翻译工具&#xff0c;非常有助于外文阅读&#xff0c;包括网页、pdf等。可以同时显示原文和译文&#xff0c;操作简单&#xff0c;使用起来还是非常友好的。 先上链接&#xff1a;介绍 - 沉浸式翻译 如何使用 - 沉浸式翻译 1.安装 支持Edg…
阅读更多...
仙人掌之歌——权力的游戏（2）

仙人掌之歌——权力的游戏（2）

他是特级战斗英雄 “那个李通&#xff0c;会不会看起来好吓人呀&#xff1f;” 云冰洁有些紧张的样子&#xff0c;几乎要让陈速笑出来。 “哪有&#xff0c;一个很 nice 的人好吧。就是看起来比较严肃而已&#xff0c;我也从没看他笑过倒是。” 陈速让云冰洁看菜单&#xff0…
阅读更多...
【极海APM32F4xx Tiny】学习笔记01-模板工程创建

【极海APM32F4xx Tiny】学习笔记01-模板工程创建

本项目的使用的开发板 关于芯片使用的其他笔记 外部晶振时钟 模板工程创建/LED工程 项目仓库 https://gitcode.net/u010261063/apm32_test_part 创建模板工程的核心要素 复制官方的标准外设库复制启动文件复制cmsis文件复制相关的公共头文件如apm32f4xx_int.h 和 system_apm…
阅读更多...
mybatis trim标签使用详解

mybatis trim标签使用详解

mybatis trim标签使用详解 mybatis的trim标签一般用于去除sql语句中多余的and关键字&#xff0c;逗号&#xff0c;或者给sql语句前拼接 “where“、“set“以及“values(“ 等前缀&#xff0c;或者添加“)“等后缀&#xff0c;可用于选择性插入、更新、删除或者条件查询等操作。…
阅读更多...
Dubbo框架

Dubbo框架

文章目录 1. 什么是Dubbo2. Dubbo架构3. SpringBoot整合Dubbo框架3.1 前期准备3.1.1 Zookeeper的安装 3.2 项目创建3.3 添加依赖3.4 定义服务接口3.5 服务端的实现3.6 消费端请求任务3.7 服务端配置文件3.8 消费端配置文件3.9 启动应用 4. Dubbo负载均衡5. Dubbo集群容错 1. 什…
阅读更多...
第一部分-基础篇-第一章：PSTN与VOIP（上篇）

第一部分-基础篇-第一章：PSTN与VOIP（上篇）

文章目录 序言引言&#xff1a;什么是VOIP和PSTN1.1 PSTN起源与发展1.1.1 最早的电话网1.1.2 人工电话交换时代1.1.3自动电话交换时代1.1.4半电子交换机时代1.1.5空分交换机时代1.1.6 数字交换机时代1.1.7现代PSTN时代1.1.8 下一代网络及VoIP时代 1.2 电话实现技术1.2.1 电话号…
阅读更多...
【MySQL】如何速通MySQL（1）

【MySQL】如何速通MySQL（1）

&#x1f4cc;前言&#xff1a;本篇博客介绍如何速通MySQL&#xff0c;主要介绍Mysql中主要的基础的入门&#xff0c;学习MySQL之前要先安装好MySQL&#xff0c;如果还没有安装的小伙伴可以看看博主前面的博客&#xff0c;里面有详细的安装教程。或者看一下下面这个链接~ &…
阅读更多...
“AI孙燕姿”爆火背后，是内容合规问题的再次升级｜上云那些事

“AI孙燕姿”爆火背后，是内容合规问题的再次升级｜上云那些事

“讽刺的是&#xff0c;人类再怎么快也无法超越它。”这是歌手孙燕姿关于自己AI分身遍布网络一事&#xff0c;在MAKE MUSIC网站的博客上发表的看法。 来源&#xff1a;孙燕姿MAKE MUSIC网站博客 当大家还在担心AIGC会不会让自己失业时&#xff0c;歌手孙燕姿就因为“AI孙燕姿”…
阅读更多...
LDA算法实现鸢尾花数据集降维

LDA算法实现鸢尾花数据集降维

目录 1. 作者介绍2. LDA降维算法2.1 基本概念2.2 算法流程 3. LDA算法实现3.1 数据集介绍3.2 代码实现3.3 结果展示 1. 作者介绍 唐杰&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2022级研究生 研究方向&#xff1a;机器视觉与人工智能 电子邮件&#xff…
阅读更多...
深度学习笔记（八）——语义分割标注转换

深度学习笔记（八）——语义分割标注转换

核心思想&#xff1a;“将颜色转换成对应的标号” 形式一&#xff1a;Json格式的标注转换成调色板mask 形式二&#xff1a;RGB类型mask(24位三通道&#xff09;转成调色板mask&#xff08;8位单通道&#xff09;&#xff0c;调色板的格式为.png 形式三&#xff1a;对于二分类的…
阅读更多...
oracle安装

oracle安装

服务端安装&#xff08;公司中不需要&#xff0c;只安装客户端就行&#xff09; 1、挂载一个Windows系统 双击vmx文件 启动 2、网络配置 添加一个网络 自己电脑看控制面板是否添加虚拟网卡 查看连接的网络&#xff0c;ip地址不能为1&#xff0c;为1就自己修改&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023