【jsthreeJS】入门three，并实现3D汽车展示厅，附带全码

首先放个最终效果图：

 

三维（3D）概念：

三维（3D）是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维（2D）只有长度和宽度的平面，三维增加了高度或深度这一维度

在三维空间中，我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系，即X、Y和Z轴。其中，X轴表示横向，Y轴表示纵向，Z轴表示纵深或垂直方向。通过在这些轴上的不同值组合，可以确定一个点或对象在三维空间中的位置

大家可以three编辑器中感受一下三维：three.js editor

ps：默认英文，可以切换中文语言

three前提概念

以舞台展示为例：

  • 场景 Sence 相当于一个舞台，在这里是布置场景物品和表演者表演的地方
  • 相机 Carma 相当于观众的眼睛去观看
  • 几何体 Geometry 相当于舞台的表演者
  • 灯光 light 相当于舞台灯光照射控制 
  • Controls 相当于这出舞台剧的总导演

创建场景与相机

<html><head><meta charset="utf-8"><title>My first three.js app</title>
</head><body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="importmap">{"imports": {"three": "./three.module.js"}}</script><script type="module">import { Scene, WebGLRenderer, PerspectiveCamera } from 'three'let scene,renderer,camera//创建场景const setScene = () => {scene = new Scene()renderer = new WebGLRenderer()//调用 setSize() 方法设置渲染器的大小为当前窗口的宽度和高度renderer.setSize(window.innerWidth, window.innerHeight)//将渲染器的 DOM 元素添加到页面的 <body> 元素中document.body.appendChild(renderer.domElement)}//相机的默认坐标const defaultMap = {x: 0,y: 10,z: 20,}//创建相机  const setCamera = () => {const { x, y, z } = defaultMap//创建一个 PerspectiveCamera 对象，并传入参数来设置透视相机的属性：视野角度为 45 度，宽高比为窗口的宽高比，近裁剪面为 1，远裁剪面为 1000camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)//用 position.set() 方法将相机的位置设置为之前从 defaultMap 中提取的坐标camera.position.set(x, y, z)}(function () {setScene()setCamera()})()</script>
</body></html>

PerspectiveCamera的详细说明：

new THREE.PerspectiveCamera构造函数用来创建透视投影相机，该构造函数总共有四个参数，分别是fov，aspect，near，far 。

fov表示摄像机视锥体垂直视野角度，最小值为0，最大值为180，默认值为50，实际项目中一般都定义45，因为45最接近人正常睁眼角度；aspect表示摄像机视锥体长宽比，默认长宽比为1，即表示看到的是正方形，实际项目中使用的是屏幕的宽高比；near表示摄像机视锥体近端面，这个值默认为0.1，实际项目中都会设置为1；far表示摄像机视锥体远端面，默认为2000，这个值可以是无限的，说的简单点就是我们视觉所能看到的最远距离。

引入模型

国外一个3d模型下载网站，里面有很多免费的模型下载  点击红框处下载

Log in to your Sketchfab account - Sketchfab

<html><head><meta charset="utf-8"><title>My first three.js app</title>
</head><body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="importmap">{"imports": {"three": "./three.module.js"}}</script><script type="module">import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'import { Scene, WebGLRenderer, PerspectiveCamera } from 'three'let scene, renderer, camera, directionalLight, dhelperlet isLoading = truelet loadingWidth = 0//创建场景const setScene = () => {scene = new Scene()renderer = new WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}//相机的默认坐标const defaultMap = {x: 0,y: 10,z: 20,}//创建相机  const setCamera = () => {const { x, y, z } = defaultMapcamera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)camera.position.set(x, y, z)}//通过Promise处理一下loadfile函数const loader = new GLTFLoader() //引入模型的loader实例const loadFile = (url) => {return new Promise(((resolve, reject) => {loader.load(url,(gltf) => {resolve(gltf)}, ({ loaded, total }) => {let load = Math.abs(loaded / total * 100)loadingWidth = loadif (load >= 100) {setTimeout(() => {isLoading = false}, 1000)}console.log((loaded / total * 100) + '% loaded')},(err) => {reject(err)})}))}(async function () {const gltf = await loadFile('./assets/scene.gltf')setScene()setCamera()scene.add(gltf.scene)})()</script>
</body></html>

加载模型代码讲解：

loader.load 用来加载和解析 glTF 文件，接受四个参数：

  • 第一个参数 url 是要加载的 glTF 模型文件的路径。
  • 第二个参数是一个回调函数，当模型加载成功时会被调用
  • 第三个参数是一个回调函数，用于跟踪加载进度。回调函数的 { loaded, total } 参数表示已加载和总共需要加载的文件数量，通过计算百分比可以得到当前加载进度。
  • 第四个参数是一个回调函数，当加载出错时会被调用。

创建灯光

<html><head><meta charset="utf-8"><title>My first three.js app</title>
</head><body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="importmap">{"imports": {"three": "./three.module.js"}}</script><script type="module">import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'import { Scene, WebGLRenderer, PerspectiveCamera } from 'three'let scene, renderer, camera, directionalLight, dhelperlet isLoading = truelet loadingWidth = 0//创建场景const setScene = () => {scene = new Scene()renderer = new WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}//相机的默认坐标const defaultMap = {x: 0,y: 10,z: 20,}//创建相机  const setCamera = () => {const { x, y, z } = defaultMapcamera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)camera.position.set(x, y, z)}// 设置灯光const setLight = () => {// 创建一个颜色为白色（0xffffff），强度为 0.5 的平行光对象directionalLight = new DirectionalLight(0xffffff, 0.5)//设置平行光的位置，这里将其放置在三维坐标 (-4, 8, 4) 的位置directionalLight.position.set(-4, 8, 4)//创建一个平行光辅助对象，用于可视化平行光的方向和强度dhelper = new DirectionalLightHelper(directionalLight, 5, 0xff0000)//创建一个颜色为白色（0xffffff），半球颜色为白色（0xffffff），强度为 0.4 的半球光对象hemisphereLight = new HemisphereLight(0xffffff, 0xffffff, 0.4)hemisphereLight.position.set(0, 8, 0)//创建一个半球光辅助对象，用于可视化半球光的方向和强度hHelper = new HemisphereLightHelper(hemisphereLight, 5)//添加到场景scene.add(directionalLight)//添加到场景scene.add(hemisphereLight)}//使场景、照相机、模型不停调用const loop = () => {//requestAnimationFrame(loop) 是浏览器提供的方法，用于在下一次重绘页面之前调用回调函数 loop。这样可以创建一个循环，使场景、相机和模型不断被渲染更新requestAnimationFrame(loop)//使用渲染器 renderer 渲染场景 scene 中的模型，使用相机 camera 进行投影renderer.render(scene, camera)}//通过Promise处理一下loadfile函数const loader = new GLTFLoader() //引入模型的loader实例const loadFile = (url) => {return new Promise(((resolve, reject) => {// loader.load 用来加载和解析 glTF 文件loader.load(url,(gltf) => {resolve(gltf)}, ({ loaded, total }) => {let load = Math.abs(loaded / total * 100)loadingWidth = loadif (load >= 100) {setTimeout(() => {isLoading = false}, 1000)}console.log((loaded / total * 100) + '% loaded')},(err) => {reject(err)})}))}(async function () {const gltf = await loadFile('./assets/scene.gltf')setScene()setCamera()setLight()scene.add(gltf.scene)loop()})()</script>
</body></html>

DirectionalLight 和 HemisphereLight 是 Three.js 中的两种灯光类型，分别表示平行光和半球光。它们用于模拟现实世界中的光照效果

此刻模型已经可以看见了，如何你只能看见黑黑的一片，无法看到模型，一般两个原因：

  • 模型是否加载成功
try {gltf = await loadFile('./assets/scene.gltf');console.log('Model loading completed:', gltf);
} catch (error) {console.error('Error loading model:', error);
}
  • 相机位置偏差，调整下相机(defaultMap)的位置

控制模型

这一步完成之后，模型就可以通过鼠标移动，旋转了

<html><head><meta charset="utf-8"><title>My first three.js app</title>
</head><body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="importmap">{"imports": {"three": "./three.module.js"}}</script><script type="module">import { Scene, WebGLRenderer, PerspectiveCamera, DirectionalLight, HemisphereLight, DirectionalLightHelper, HemisphereLightHelper } from 'three'import { GLTFLoader } from './jsm/loaders/GLTFLoader.js'import { OrbitControls } from './jsm/controls/OrbitControls.js'let scene, renderer, camera, directionalLight, hemisphereLight, dhelper, hHelper, controlslet isLoading = truelet loadingWidth = 0//创建场景const setScene = () => {scene = new Scene()renderer = new WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}//相机的默认坐标const defaultMap = {x: 0,y: 10,z: 20,}//创建相机  const setCamera = () => {const { x, y, z } = defaultMapcamera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)camera.position.set(x, y, z)}// 设置灯光const setLight = () => {directionalLight = new DirectionalLight(0xffffff, 0.5)directionalLight.position.set(-4, 8, 4)dhelper = new DirectionalLightHelper(directionalLight, 5, 0xff0000)hemisphereLight = new HemisphereLight(0xffffff, 0xffffff, 0.4)hemisphereLight.position.set(0, 8, 0)hHelper = new HemisphereLightHelper(hemisphereLight, 5)scene.add(directionalLight)scene.add(hemisphereLight)}//使场景、照相机、模型不停调用const loop = () => {requestAnimationFrame(loop)renderer.render(scene, camera)controls.update()}// 设置模型控制const setControls = () => {// 创建一个新的 OrbitControls 对象，并将它绑定到相机 camera 和渲染器的 DOM 元素 renderer.domElement 上controls = new OrbitControls(camera, renderer.domElement)// 设置相机的最大仰角（上下旋转角度），这里将其限制为 0.9 * π / 2controls.maxPolarAngle = 0.9 * Math.PI / 2//启用相机的缩放功能，允许用户通过鼠标滚轮或触摸手势进行缩放操作controls.enableZoom = true//监听控制器的变化事件，当用户操作控制器导致相机位置发生改变时，触发渲染函数 rendercontrols.addEventListener('change', render)}//在相机位置发生变化时，将新的相机位置保存到 defaultMap 对象中const render = () => {defaultMap.x = Number.parseInt(camera.position.x)defaultMap.y = Number.parseInt(camera.position.y)defaultMap.z = Number.parseInt(camera.position.z)}//通过Promise处理一下loadfile函数const loader = new GLTFLoader() //引入模型的loader实例const loadFile = (url) => {return new Promise(((resolve, reject) => {// loader.load 用来加载和解析 glTF 文件loader.load(url,(gltf) => {resolve(gltf)}, ({ loaded, total }) => {let load = Math.abs(loaded / total * 100)loadingWidth = loadif (load >= 100) {setTimeout(() => {isLoading = false}, 1000)}console.log((loaded / total * 100) + '% loaded')},(err) => {reject(err)})}))}(async function () {setScene()setCamera()setLight()setControls()const gltf = await loadFile('./assets/scene.gltf')scene.add(gltf.scene)loop()})()</script>
</body></html>

ps：这段代码没问题，可正常运行，前两三个可能会有些引入缺失或者声明变量的缺失，大家参考这个补齐，我就不去查漏补缺了

改变车身颜色

scene 有一个traverse函数，它回调了所有模型的子模型信息，只要我们找到对应name属性，就可以更改颜色，和增加贴图等等

        //设置车身颜色const setCarColor = (index) => {//Color 是 Three.js 中的一个类，用于表示颜色。它的作用是创建和管理三维场景中物体的颜色const currentColor = new Color(colorAry[index])// 使用 Three.js 中的 traverse 方法遍历场景中的每个子对象scene.traverse(child => {if (child.isMesh) {console.log(child)if (child.name) {//将当前子对象的材质颜色设置为 currentColor，实现改变颜色的效果child.material.color.set(currentColor)}}})}

整个的完整代码：

<html><head><meta charset="utf-8"><title>My first three.js app</title><style>body {margin: 0;}.maskLoading {background: #000;position: fixed;display: flex;justify-content: center;align-items: center;top: 0;left: 0;bottom: 0;right: 0;z-index: 1111111;color: #fff;}.maskLoading .loading {width: 400px;height: 20px;border: 1px solid #fff;background: #000;overflow: hidden;border-radius: 10px;}.maskLoading .loading div {background: #fff;height: 20px;width: 0;transition-duration: 500ms;transition-timing-function: ease-in;}canvas {width: 100%;height: 100%;margin: auto;}.mask {color: #fff;position: absolute;bottom: 0;left: 0;width: 100%;}.flex {display: flex;flex-wrap: wrap;padding: 20px;}.flex div {width: 10px;height: 10px;margin: 5px;cursor: pointer;}</style>
</head><body><div class="boxs"><div class="maskLoading"><div class="loading"><div class="oneDiv"></div></div><div style="padding-left: 10px;" class="twoDiv"></div></div><div class="mask"><p class="realTimeDate"></p><button class="rotatingCar">转动车</button><button class="stop">停止</button><div class="flex" id="colorContainer"></div></div></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="importmap">{"imports": {"three": "./three.module.js"}}</script><script type="module">import {Color,DirectionalLight,DirectionalLightHelper,HemisphereLight,HemisphereLightHelper,PerspectiveCamera,Scene,WebGLRenderer} from 'three'import { GLTFLoader } from './jsm/loaders/GLTFLoader.js'import { OrbitControls } from './jsm/controls/OrbitControls.js'//车身颜色数组const colorAry = ["rgb(216, 27, 67)", "rgb(142, 36, 170)", "rgb(81, 45, 168)", "rgb(48, 63, 159)", "rgb(30, 136, 229)", "rgb(0, 137, 123)","rgb(67, 160, 71)", "rgb(251, 192, 45)", "rgb(245, 124, 0)", "rgb(230, 74, 25)", "rgb(233, 30, 78)", "rgb(156, 39, 176)","rgb(0, 0, 0)"]let scene, camera, renderer, controls, floor, dhelper, hHelper, directionalLight, hemisphereLightlet gltflet isLoading = truelet loadingWidth = 0//相机的默认坐标const defaultMap = {x: 0,y: 10,z: 20,}//遮罩层const maskLayer = () => {if (isLoading) {$('.maskLoading').hide();} else {$('.maskLoading').show()}}maskLayer()// 进度const schedule = () => {let timer = setInterval(function () {$('oneDiv').css('width', `${loadingWidth}%`);$('twoDiv').text(`${loadingWidth}%`);if (loadingWidth == 100) {clearInterval(timer);}}, 10);}schedule()//实时更新x,y,zconst realTime = () => {let timer = setInterval(function () {$('realTimeDate').text(`x:${defaultMap.x} y:${defaultMap.y} z:${defaultMap.z}`);}, 10);}// 生成颜色旋转块$.each(colorAry, function (index, item) {$('<div>').appendTo('#colorContainer') // 在 #colorContainer 中创建一个 <div> 元素.css('background-color', item) // 设置背景颜色.click(function () {setCarColor(index); // 调用 setCarColor 函数并传递索引参数});});//创建场景const setScene = () => {scene = new Scene()renderer = new WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}//创建相机  const setCamera = () => {const { x, y, z } = defaultMapcamera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)camera.position.set(x, y, z)}//引入模型的loader实例const loader = new GLTFLoader()//通过Promise处理一下loadfile函数const loadFile = (url) => {return new Promise(((resolve, reject) => {loader.load(url,(gltf) => {resolve(gltf)}, ({ loaded, total }) => {let load = Math.abs(loaded / total * 100)loadingWidth = loadif (load >= 100) {setTimeout(() => {isLoading = false}, 1000)}console.log((loaded / total * 100) + '% loaded')},(err) => {reject(err)})}))}// 设置灯光const setLight = () => {directionalLight = new DirectionalLight(0xffffff, 0.8)directionalLight.position.set(-4, 8, 4)dhelper = new DirectionalLightHelper(directionalLight, 5, 0xff0000)hemisphereLight = new HemisphereLight(0xffffff, 0xffffff, 0.4)hemisphereLight.position.set(0, 8, 0)hHelper = new HemisphereLightHelper(hemisphereLight, 5)scene.add(directionalLight)scene.add(hemisphereLight)}// 设置模型控制const setControls = () => {controls = new OrbitControls(camera, renderer.domElement)controls.maxPolarAngle = 0.9 * Math.PI / 2controls.enableZoom = truecontrols.addEventListener('change', render)}//返回坐标信息const render = () => {defaultMap.x = Number.parseInt(camera.position.x)defaultMap.y = Number.parseInt(camera.position.y)defaultMap.z = Number.parseInt(camera.position.z)}(async function () {setScene()setCamera()setLight()setControls()try {gltf = await loadFile('./assets/scene.gltf');console.log('Model loading completed:', gltf);} catch (error) {console.error('Error loading model:', error);}scene.add(gltf.scene)loop()})()//使场景、照相机、模型不停调用const loop = () => {requestAnimationFrame(loop)renderer.render(scene, camera)controls.update()}//是否自动转动$('.rotatingCar').click(function () {console.log("旋转")controls.autoRotate = true})//停止转动$('.stop').click(function () {console.log("停止")controls.autoRotate = false})//设置车身颜色const setCarColor = (index) => {const currentColor = new Color(colorAry[index])scene.traverse(child => {if (child.isMesh) {console.log(child)if (child.name) {child.material.color.set(currentColor)}}})}</script>
</body></html>

完结撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。 

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

软件开发中常用数据结构介绍：C语言队列

软件开发中常用数据结构介绍：C语言队列

工作之余来写写C语言相关知识&#xff0c;以免忘记。今天就来聊聊C语言实现循环队列&#xff0c;我是分享人M哥&#xff0c;目前从事车载控制器的软件开发及测试工作。 学习过程中如有任何疑问&#xff0c;可底下评论&#xff01; 如果觉得文章内容在工作学习中有帮助到你&…
阅读更多...
【Alibaba中间件技术系列】「RocketMQ技术专题」小白专区之领略一下RocketMQ基础之最！

【Alibaba中间件技术系列】「RocketMQ技术专题」小白专区之领略一下RocketMQ基础之最！

应一些小伙伴们的私信&#xff0c;希望可以介绍一下RocketMQ的基础&#xff0c;那么我们现在就从0开始&#xff0c;进入RocketMQ的基础学习及概念介绍&#xff0c;为学习和使用RocketMQ打好基础&#xff01; RocketMQ是一款快速地、可靠地、分布式、容易使用的消息中间件&#…
阅读更多...
【Linux】cpolar+JuiceSSH实现手机端远程连接Linux服务器

【Linux】cpolar+JuiceSSH实现手机端远程连接Linux服务器

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …
阅读更多...
Github的使用指南

Github的使用指南

首次创建仓库 1.官网创建仓库 打开giuhub官网&#xff0c;右上角点击你的头像&#xff0c;随后点击your repositories 点击New开始创建仓库 如下图为创建仓库的选项解释 出现如下界面就可以进行后续的git指令操作了 2.git上传项目 进入需上传项目的所在目录&#xff0c;打开…
阅读更多...
WPS中的表格错乱少行

WPS中的表格错乱少行

用Office word编辑的文档里面包含表格是正常的&#xff0c;但用WPS打开里面的表格就是错乱的&#xff0c;比如表格位置不对&#xff0c;或者是表格的前几行无法显示、丢失了。 有一种可能的原因是&#xff1a; 表格属性里面的文字环绕选成了“环绕”而非“无”&#xff0c;改…
阅读更多...
css的常见伪元素使用

css的常见伪元素使用

1.first-line 元素首行设置特殊样式。 效果演示&#xff1a; <div class"top"><p>可以使用 "first-line" 伪元素向文本的首行设置特殊样式。<br> 换行内容 </p></div> .top p::first-line {color: red;} 2.first-lette…
阅读更多...
ORCA优化器浅析——DXLToPlStmt[CTranslatorDXLToPlStmt]

ORCA优化器浅析——DXLToPlStmt[CTranslatorDXLToPlStmt]

如上图所示是将plan_dxl转为plan_stmt的主入口函数。其主要工作就是创建plan_id_generator、motion_id_generator、param_id_generator和table_list、subplans_list&#xff0c;并将其设置到CContextDXLToPlStmt dxl_to_plan_stmt_ctxt中供后续流程调用&#xff1b;初始化CTran…
阅读更多...
【3Ds Max】可编辑多边形“边界”层级的简单使用

【3Ds Max】可编辑多边形“边界”层级的简单使用

目录 示例 &#xff08;1&#xff09;挤出 &#xff08;2&#xff09;插入顶点 &#xff08;3&#xff09;切角 &#xff08;4&#xff09;利用所选内容创建图形 &#xff08;5&#xff09;封口 &#xff08;6&#xff09;桥 示例 这里我们首先创建一个长方体&#xff…
阅读更多...
开源在线图片设计器，支持PSD解析、AI抠图等，基于Puppeteer生成图片

开源在线图片设计器，支持PSD解析、AI抠图等，基于Puppeteer生成图片

Github 开源地址: palxiao/poster-design 项目速览 git clone https://github.com/palxiao/poster-design.git cd poster-design npm run prepared # 快捷安装依赖指令 npm run serve # 本地运行将同时运行前端界面与图片生成服务(3000与7001端口)&#xff0c;合成图片时…
阅读更多...
财务数据分析用什么软件好？奥威BI自带方案

财务数据分析用什么软件好？奥威BI自带方案

做财务数据分析&#xff0c;光有软件还不够&#xff0c;还需要有标准化的智能财务数据分析方案。奥威BI数据可视化工具就是这样一款自带智能财务数据分析方案的软件。 ”BI方案“&#xff0c;一站式做财务数据分析 奥威BI数据可视化工具和智能财务分析方案结合&#xff0c;可…
阅读更多...
Alibaba-Easyexcel 使用总结

Alibaba-Easyexcel 使用总结

简介 简介 EasyExcel 是一个基于 Java 的简单、省内存的读写 Excel 的开源项目&#xff0c;在尽可能节约内存的情况下支持读写百 M 的 Excel。 但注意&#xff0c;其不支持&#xff1a; 单个文件的并发写入、读取读取图片宏 常见问题 Excel 术语 Sheet&#xff0c;工作薄…
阅读更多...
Pyqt5-开源工具分解功能(文本拖拽)

Pyqt5-开源工具分解功能(文本拖拽)

开源第四篇：功能实现之拖拽功能与配置文件。 写这个功能的初衷，是因为，每次调试我都要手动敲命令，太麻烦了，想偷个懒，所以直接给这功能加上了，顺便衍生出了另一个想法，配置文件自动填写相关数据。 先看个简单的拖拽功能： 很明显吧，还是比较便捷的。所以我们本章，就在…
阅读更多...
基于PaddlePaddle实现的声纹识别系统

基于PaddlePaddle实现的声纹识别系统

前言 本项目使用了EcapaTdnn、ResNetSE、ERes2Net、CAM等多种先进的声纹识别模型&#xff0c;不排除以后会支持更多模型&#xff0c;同时本项目也支持了MelSpectrogram、Spectrogram、MFCC、Fbank等多种数据预处理方法&#xff0c;使用了ArcFace Loss&#xff0c;ArcFace loss…
阅读更多...
智能电视与win10电脑后续无法实现DLNA屏幕共享

智能电视与win10电脑后续无法实现DLNA屏幕共享

问题背景&#xff1a; 我用的是TCL电视&#xff0c;但是并不是最新&#xff0c;打开的方式是U盘->电脑&#xff0c;各位看自己情况&#xff0c;很多问题都大概率是智能电视问题。 情景假设&#xff1a; 假设你已经完成原先智能电视该有的步骤&#xff0c;通过DLNA&#xf…
阅读更多...
蓝牙运动耳机哪款好、运动耳机性价比推荐

蓝牙运动耳机哪款好、运动耳机性价比推荐

近年来&#xff0c;运动蓝牙耳机备受欢迎&#xff0c;成为人们健身时的必备时尚单品。随着蓝牙耳机的不断发展&#xff0c;市场上可供选择的产品种类繁多&#xff0c;因此挑选一款适合自己的蓝牙耳机并不困难。然而&#xff0c;并非每款耳机都适合户外或者运动场景下的使用&…
阅读更多...
Lua与C++交互（一）————堆栈

Lua与C++交互（一）————堆栈

Lua与C交互&#xff08;一&#xff09;————堆栈 Lua虚拟机 什么是Lua虚拟机 Lua本身是用C语言实现的&#xff0c;它是跨平台语言&#xff0c;得益于它本身的Lua虚拟机。 虚拟机相对于物理机&#xff0c;借助于操作系统对物理机器&#xff08;CPU等硬件&#xff09;的一…
阅读更多...
6-3 使用函数输出水仙花数

6-3 使用函数输出水仙花数

分数 20 全屏浏览题目 切换布局 作者 张高燕 单位 浙大城市学院 水仙花数是指一个N位正整数&#xff08;N≥3&#xff09;&#xff0c;它的每个位上的数字的N次幂之和等于它本身。例如&#xff1a;153135333。 本题要求编写两个函数&#xff0c;一个判断给定整数是否水仙花数…
阅读更多...
开源数据库Mysql_DBA运维实战 （总结）

开源数据库Mysql_DBA运维实战 （总结）

开源数据库Mysql_DBA运维实战 &#xff08;总结&#xff09; SQL语句都包含哪些类型 DDL DCL DML DQL Yum 安装MySQL的配置文件 配置文件&#xff1a;/etc/my.cnf日志目录&#xff1a;/var/log/mysqld.log错误日志&#xff1a;/var/log/mysql/error.log MySQL的主从切换 查看主…
阅读更多...
安装Ubuntu服务器、配置网络、并安装ssh进行连接

安装Ubuntu服务器、配置网络、并安装ssh进行连接

安装Ubuntu服务器、配置网络、并安装ssh进行连接 1、配置启动U盘2、配置网络3、安装ssh4、修改ssh配置文件5、重启电脑6、在远程使用ssh连接7、其他报错情况 1、配置启动U盘 详见: U盘安装Ubuntu系统详细教程 2、配置网络 详见&#xff1a;https://blog.csdn.net/davidhzq/a…
阅读更多...
16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及FileSystem示例（1）

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及FileSystem示例（1）

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023