首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >用 Lunchbox 在 vue3 中创建一个旋转的 3D 地球竟是如此简单

用 Lunchbox 在 vue3 中创建一个旋转的 3D 地球竟是如此简单

作者头像
前端修罗场
发布于 2023-10-07 11:40:13
发布于 2023-10-07 11:40:13
97600
代码可运行
举报
文章被收录于专栏:Web 技术Web 技术
运行总次数:0
代码可运行

自 Three.js 2010 年成立以来, 一直是在 Web 上构建 3D 视觉效果的标准。 多年来,基于这个库构建了很多抽象库,它们整合了 Three.js 的特性,可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。

在本文中,我们将介绍 Three.js 的自定义渲染器—— Lunchbox.js。 我们将介绍在 Vue 中用 Lunchbox.js 构建3D 视觉效果。

什么是 Lunchbox.js

Lunchbox.js 是 Three.js 的 Vue 3 自定义渲染器。 你可以把它想象成 Vue 的 react-three-fiber

该库通过组件提供对原始 Three.js 对象和类的访问,例如:

  • mesh
  • lights
  • geometries
  • group
  • materials

这些组件是 Lunchbox.js 的构建块。

例如,在 Three.js 项目中创建标准网格时,我们会使用像 BoxGeometry() 这样的几何类来创建长方体形状,使用像 MeshBasicMaterial() 这样的材质类对其应用颜色,就像在下面的代码中一样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 创建边长为 1 的几何图形
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建黄色材质
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 在网格中结合几何图形和材质
const mesh = new THREE.Mesh(geometry, material)
// 将该网格添加到场景中
scene.add(mesh)

为了在 Lunchbox.js 应用程序中创建相同的网格,我们将使用相同的类,除了作为组件,而不是将它们分配给变量并将它们与 Mesh() 类组合,我们将它们嵌套在 <mesh> 中 组件,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
    <mesh>
        <boxGeometry :args="[1, 1 ,1]" />
        <meshBasicMaterial :color="0xffff00" />
    </mesh>
</Lunchbox>

你会注意到,在上面的示例中,每个 <Lunchbox> 组件都与对应的 Three.js 类和一个 camelCase 名称相匹配。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// three.js
new THREE.Mesh()
<!-- Lunchbox -->
<mesh/>
// three.js
new THREE.BoxGeometry()
<!-- Lunchbox -->
<boxGeometry/>

Lunchbox.js 和 Three.js 的语法非常相似,但有一些不同之处需要注意。 例如,每个 <Lunchbox> 组件都使用 args 属性将参数作为 propsargsprop 接受一个参数数组并将其传递给组件的类构造函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
new THREE.BoxGeometry(1, 2, 3)

上面的代码将在 Lunchbox 中转换为以下内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<boxGeometry :args="[1, 2, 3]" />

其他 Three.js 对象属性,例如 MeshBasicMaterial 类的 color 属性,可以作为响应式属性添加到 <Lunchbox> 组件上。 这就像我们在前面的例子中看到的一样。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meshBasicMaterial :color="red" />

但是,使用点符号的属性(例如位置向量)将在 <Lunchbox> 组件中使用破折号 - 进行设置,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<mesh :position-x="3" />

Lunchbox为大多数 Three.js 类提供内置支持; 你可以在此处找到组件列表。

可以使用 Lunchbox的 app.extend 方法添加包含的组件中不可用的类。 例如,下面是我们如何将 orbitControl 类添加到 Lunchbox:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { createApp } from 'lunchboxjs'
import App from 'YourApp.vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

createApp(App)
    .extend({ OrbitControls })
    .mount('#app')    

extend() 方法是 Lunchbox 的独特功能之一,使用该方法添加的类继承了 <Lunchbox> 组件的所有功能。

我们已经了解了 Lunchbox.js 的核心概念,接下来我们将了解如何使用 Lunchbox 进行构建。

开始

要设置一个 Lunchbox.js 应用程序,首先使用 Vite 的 CLI 安装 Vue:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm create vite@latest

运行命令后,从库列表中选择 Vue 并为项目命名。 接下来,cd 进入项目文件夹并运行以下命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install lunchboxjs three

此命令将安装 Lunchbox.js 和 Three.js 作为 Vue 应用程序的依赖项。 你可以在根目录的 package.json 文件中查看它们。

接下来清理项目中的样板代码,打开 main.js 文件,将内容替换为如下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { createApp } from 'lunchboxjs'
import App from './App.vue'
createApp(App).mount('#app')

在这里,我们从 lunchboxjs 而不是从 vue 导入 createApp 函数。 这会将 Vue 应用程序转换为 Lunchbox 环境。

现在我们可以开始在我们的应用程序中构建和渲染 3D 对象。

创建场景

场景是允许我们设置要渲染的项目的对象。 它就像一个显示区域,可以将对象放在一起并呈现给浏览器。 以下是 Three.js 中设置的场景示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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.body.appendChild( renderer.domElement );

在Lunchbox.js 中设置场景更直接且不那么神秘。 该库提供了一个 <Lunchbox> 组件,其中包含用于在 Three.js 中创建渲染器和场景的底层代码。

要进行设置,请转到 App.vue 主组件并将 <Lunchbox> 组件放在模板部分中,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <Lunchbox>
    <!-- ... -->
  </Lunchbox>
</template>

嵌套在 <Lunchbox> 标记中的每个对象都将呈现给浏览器。 如果你保存代码并启动开发服务器,你应该会看到类似于下图的黑屏。

这个黑屏是我们应用的渲染器; 我们添加到场景中的任何内容都将显示在这里。 你可以使用背景道具更改背景颜色,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox background="indigo">
            <!-- ... -->
</Lunchbox>

以下是你可以在 <Lunchbox> 组件上使用的一些 props:

  • background
  • cameraPosition
  • camera
  • zoom
  • shadow

添加网格

几何是用于定义网格形状的 Three.js 类。 在本文前面,我们演示了如何使用 boxGeometry 组件渲染长方体网格。 在这里,我们将看到如何向浏览器渲染更多 3D 形状。

Lunchbox.js 带有几个自动生成的内置几何组件,你可以在此处查看可用组件的列表。

继续并在Lunchbox标签内添加一个 <mesh> 组件,并在其中嵌套你选择的任何几何组件。 不要忘记包含一个带有颜色道具的材质组件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
  <mesh>
     <boxGeometry />
     <MeshBasicMaterial color="red"/> 
  </mesh>
</Lunchbox>

![image.png](https://img-blog.csdnimg.cn/img_convert/95af2c0399d372f02efe23589a4312df.png#clientId=u96d8d338-690f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=138&id=u99283042&margin=[object Object]&name=image.png&originHeight=275&originWidth=476&originalType=binary&ratio=1&rotation=0&showTitle=false&size=15803&status=done&style=none&taskId=u083c3092-13f6-471a-9e3f-5c24a0f7d94&title=&width=238)

材质组件利用 Three.js Material() 类来定义网格的各种表面属性。

<mesh> 组件只接受一个 Geometry()Material() 组件。 要为场景添加更多形状,我们必须创建更多网格,每个 Geometry() 一个,如下所示。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
      <mesh>
         <boxGeometry />
         <MeshBasicMaterial color="red"/> 
      </mesh>
      <mesh>
         <torusKnotBufferGeometry />
         <MeshBasicMaterial color="grey"/> 
      </mesh>
</Lunchbox>

或者,我们可以为每个形状创建单独的组件并将它们导入到主组件中,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
      import {Sphere} from './Sphere.vue'
</script>
<template>
      <Lunchbox>
            <Sphere />
      </Lunchbox>
</template>

每个几何组件都接受独特的参数,这些参数可用于微调和操纵其宽度、高度、平滑度和其他视觉特征。 可以使用 args 属性在 Lunchbox 中设置这些参数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<torusKnotBufferGeometry :args="[1, 0.4, 240, 20]"/>

组件还接受多个 props。 由于它作为 Geometry()容器,它还可以用于操纵位置、旋转等。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
  <mesh position-x="4" position-x="4">
      ...
  </mesh>
</Lunchbox>

在上面的代码中,我们添加了一个 positoin 属性,它将球体网格沿 x 轴向右移动 4px。

以下是一些可用于操纵形状的网格 props:

  • position (x, y, z)
  • rotation (x, y, x)
  • scale (x, y)

网格也可以使用 <group> 组件进行分组。 该组件用作几何图形的容器,我们可以在每个 <group> 中添加任意数量的 <mesh>

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
     <group>
        <mesh>
           <boxGeometry />
           <MeshBasicMaterial color="red"/> 
        </mesh>
        <mesh>
           <torusKnotGeometry />
           <MeshBasicMaterial color="grey"/> 
        </mesh>
     </group>
</Lunchbox>

添加纹理

目前,我们的网格看起来不是很逼真。 应用的材料使它们看起来有点塑料。 我们可以使用 Lunchbox 中的 <textureLoader> 组件应用纹理,为每个网格赋予更逼真的外观。

<textureLoader> 组件利用 Three.js Texture() 类,它让我们可以将逼真的纹理映射到引擎盖下的网格表面。 为了演示这个过程,我们将创建一个地球的 3D 模型。

要创建地球,请先清除场景,然后使用 <sphereGeometry/> 组件创建具有球面几何形状的新网格。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
  <mesh>
     <sphereGeometry />
  </mesh> 
</Lunchbox>

接下来,在网格中添加一个 <meshPhysicalMaterial> 组件并将 <textureLoader> 嵌套在其中,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
  <mesh>
      <sphereGeometry :args="[1, 32, 32]" />
      <meshPhysicalMaterial>
            <textureLoader />
      </meshPhysicalMaterial>
  </mesh>
</Lunchbox>

组件接受 srcattach prop。 src 属性接受纹理材质的相对或绝对路径,而 attach 属性接受映射选项。

我们将在这个例子中使用 mapbumpMap 选项。 换句话说,我们必须在网格组件内声明第二个 <textureLoader>

复制下面的图像并将它们放在项目的 /public 文件夹中:

接下来,将第一个图像的路径添加到第一个 <textureLoader> 组件的 src 属性中,并为附加属性赋予一个 “map” 值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meshPhysicalMaterial>
      <textureLoader src="/first-image" attach="map" />
      <textureLoader ... />
</meshPhysicalMaterial>

如果你现在保存项目,浏览器中将出现一个球形轮廓。 这是因为我们的场景没有光源。

要解决此问题,请在 <Lunchbox> 组件中添加 <pointLight /><directionalLight /> 组件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Lunchbox>
  <directionalLight />
  <pointLight />
  <mesh>
      ...
  </mesh>
</Lunchbox>

现在,如果你保存项目并返回浏览器,你应该会看到类似于下图的内容:

为了使图像更有趣和视觉上更令人惊叹,我们将使用第二张图像为地球添加逼真的轮廓。

我们将按照我们处理第一张图像的方式进行处理。 将图像的路径添加到 src 道具,但这次给 attach prop一个 “bumpMap” 值。

添加动画

Lunchbox.js 提供了一个 onBeforeRender 函数,在渲染之前或之后的每一帧都会调用该函数。 使用此函数,我们可以通过在每一帧上为其旋转属性添加一个值来为我们的地球设置动画。

转到 App.vue 组件的脚本部分并从 Vue 导入 ref 和从 Lunchbox 导入 onBeforeRender 函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import {ref} from 'vue'
import {onBeforeRender} from 'lunchboxjs'

接下来,将 ref 分配给一个 rotation 变量,并将一个具有以下属性的对象传递给它:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const rotation = ref({y: 0});

然后,调用 onBeforeRender 函数并添加以下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onBeforeRender(() =>{
   rotation.value.y += 0.02
})

在这里,我们在每一帧上为对象的 y 轴旋转添加 0.02 度。 最后,为地球的网格添加一个 rotation-y 属性,并将 rotation.y 值传递给它,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<mesh rotation-y="rotation.y">
        <sphereGeometry />
        <meshPhysicalMaterial>
              <textureLoader ... />
              <textureLoader ... />
        </meshPhysicalMaterial>
</mesh>

现在,如果你保存项目,你的地球应该像下面的例子一样很好地动画。

你可以通过将 x 和 z 属性添加到 ref、onBeforeRender 函数和地球的网格来添加更多旋转动画。

添加事件

我们可以像添加 Vue 中的任何其他元素一样向 <Lunchbox> 组件添加事件监听器。 为了演示,我们将添加一个 click 事件,当它被触发时会暂停我们的地球动画。

继续在地球网格上创建一个 onClick 事件,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<mesh rotation-y="rotation.y" @click="">
    ...
</mesh>

接下来,使用 ref 创建一个变量,并将布尔值 true 传递给它。 使用 if 语句将声明包装在 onBeforeRender 函数中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const active = ref(true)
onBeforeRender(() =>{
 if(active){
   rotation.value.y += 0.02
  }
})

在这里,我们将活动变量分配为 if 语句的条件。 当该值设置为 false 时,语句中的代码将不会被执行,动画会暂停。

最后,将以下代码添加到 <mesh> 组件的 onClick 事件中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<mesh rotation-y="rotation.y" @click="active = !active">
    ...
</mesh>

现在地球的动画在点击时会暂停播放,如下图:

现在,我们已经在 Vue 中成功构建了 3D 视觉效果!

结尾

在本文中,我们介绍了 Lunchbox.js 的核心概念,并演示了如何使用该工具在 Vue 中创建 3D 视觉效果。 在本文中,我们创建了一个场景,构建了不同的网格几何体,为网格添加了纹理,为网格添加了动画,并为场景中的对象添加了事件侦听器。

参考

官方文档:https://docs.lunchboxjs.com/installation/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
时间复杂度与空间复杂度
算法(Algorithm)是指用来操作数据、解决程序问题的一组方法。对于同一个问题,使用不同的算法,也许最终得到的结果是一样的,但在过程中消耗的资源和时间却会有很大的区别。那么我们应该如何去衡量不同算法之间的优劣呢?
LittlePanger
2020/04/14
9500
数据结构01 算法的时间复杂度和空间复杂度
1、算法的概念: 算法 (Algorithm),是对特定问题求解步骤的一种描述。 解决一个问题往往有不止一种方法,算法也是如此。那么解决特定问题的多个算法之间如何衡量它们的优劣呢?有如下的指标: 2、衡量算法的指标: (1)时间复杂度:执行这个算法需要消耗多少时间。 (2)空间复杂度:这个算法需要占用多少内存空间。   同一个问题可以用不同的算法解决,而一个算法的优劣将影响到算法乃至程序的效率。算法分析的目的在于为特定的问题选择合适算法。一个算法的评价主要从时间复杂度和空间复杂度来考虑。   算法在时间的高
nnngu
2018/03/15
1.3K0
【进阶之路】算法的时间复杂度与空间复杂度
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
南橘
2021/04/02
9050
【进阶之路】算法的时间复杂度与空间复杂度
时间复杂度和空间复杂度
这个算法的运行次数函数是f (n) =3。 根据我们推导大0阶的方法,第一步就是把常数项3 改为1。在保留最高阶项时发现,它根本没有最高阶项,所以这个算法的时间复杂度为0(1)。
周三不加班
2019/09/04
1.2K0
算法的时间复杂度和空间复杂度-总结[通俗易懂]
通常,对于一个给定的算法,我们要做 两项分析。第一是从数学上证明算法的正确性,这一步主要用到形式化证明的方法及相关推理模式,如循环不变式、数学归纳法等。而在证明算法是正确的基础上,第二部就是分析算法的时间复杂度。算法的时间复杂度反映了程序执行时间随输入规模增长而增长的量级,在很大程度上能很好反映出算法的优劣与否。因此,作为程序员,掌握基本的算法时间复杂度分析方法是很有必要的。 算法执行时间需通过依据该算法编制的程序在计算机上运行时所消耗的时间来度量。而度量一个程序的执行时间通常有两种方法。
全栈程序员站长
2022/08/27
1.6K0
时间复杂度和空间复杂度详解 原
(1)时间频度 一个算法执行所耗费的时间,从理论上是不能算出来的,必须上机运行测试才能知道。但我们不可能也没有必要对每个算法都上机测试,只需知道哪个算法花费的时间多,哪个算法花费的时间少就可以了。并且一个算法花费的时间与算法中语句的执行次数成正比例,哪个算法中语句执行次数多,它花费时间就多。一个算法中的语句执行次数称为语句频度或时间频度。记为T(n)。
wuweixiang
2018/08/14
7880
数据结构与算法系列之时间复杂度
上一篇《数据结构和算法》中我介绍了数据结构的基本概念,也介绍了数据结构一般可以分为逻辑结构和物理结构。逻辑结构分为集合结构、线性结构、树形结构和图形结构。物理结构分为顺序存储结构和链式存储结构。并且也介绍了这些结构的特点。然后,又介绍了算法的概念和算法的5个基本特性,分别是输入、输出、有穷性、确定性和可行性。最后说阐述了一个好的算法需要遵守正确性、可读性、健壮性、时间效率高和存储量低。其实,实现效率和存储量就是时间复杂度和空间复杂度。本篇我们就围绕这两个"复杂度"展开说明。在真正的开发中,时间复杂度尤为重要,空间复杂度我们不做太多说明。
VV木公子
2018/06/05
5.6K0
数据结构与算法系列之时间复杂度
常见算法时间复杂度
同一问题可用不同算法解决,而一个算法的质量优劣将影响到算法乃至程序的效率。算法分析的目的在于选择合适算法和改进算法。一个算法的评价主要从时间复杂度和空间复杂度来考虑。
全栈程序员站长
2022/08/28
6430
Algorithms_入门基础_时间复杂度&空间复杂度
举个例子 ,如何测试我们的程序性能? 性能测试之类的对吧-----> 主机的性能不同,数据的准确性和数据量等等 ,都会对我们的结果产生影响。
小小工匠
2021/08/17
5450
排序算法
排序也称排序算法(Sort Algorithm),排序是将一组数据,依指定的顺序进行排列的过程。
用户9615083
2022/12/30
3010
排序算法
数据结构与算法 - 时间复杂度
目录 一、数据结构概要 二、算法概要 三、时间复杂度简介 四、求解时间复杂度 一、数据结构 数据结构是相互之间存在一种或多种特定关系的数据元素的集合。在各类实际应用问题中,数据元素之间总是存在着各种关系,描述数据元素之间关系的方法称为结构。通常,可根据数据元素之间所存在的关系的不同特征,用4类基本结构予以描述: (1)集合:指结构中的数据元素之间只存在“同属一个集合”的关系。 间 (2)线性结构:指结构中的数据元素之间存在“一个对一个”的关系。 数 (3)树形结构:指结构中的数据元素
且行且珍惜_iOS
2018/12/24
7250
数据结构与算法 - 时间复杂度与空间复杂度
时间复杂度:时间复杂度的计算并不是计算程序具体运行的时间,而是算法执行语句的最大次数。 空间复杂度:类似于时间复杂度的讨论,一个算法的空间复杂度为该算法所耗费的存储空间。往往跟为最大创建次数。
進无尽
2018/12/19
2.3K0
排序算法第一篇-排序算法介绍
在面试中,现在无论大小公司都会有算法的。其中排序算法也是一种很常见的面试题。比如冒泡,快排等。这些,排序算法自己看了一次又一次,可是过一段时间,又忘掉了。所以,这次就把算法是怎么推导出来的,详细记录下来。看看这次多久还会忘记。
凯哥Java
2021/06/20
4510
排序算法第一篇-排序算法介绍
算法的时间复杂度和空间复杂度
        这个算法看起来十分简洁,但是它的效率是很差劲的,算50以上就会算算很久,那么它的效率就很差,效率的好坏不能只是看代码是否简洁。 
2024/04/30
2900
【时间复杂度空间复杂度】
当文件没有进行保存时,这个文件保留在内存中,一旦断电,文件将无法保存,因此为了避免这种情况的发生,,处理文件之后,应该及时的ctrl+s保存到磁盘当中去。
每天都要进步呀
2023/03/28
1.7K0
【时间复杂度空间复杂度】
递归算法时间复杂度分析[通俗易懂]
一般情况下,算法中基本操作重复的次数就是问题规模n的某个函数f(n),进而分析f(n)随n的变化情况并确定T(n)的数量级。这里用‘o’来表示数量级,给出算法时间复杂度。 T(n)=o(f(n)); 它表示随问题规模n的增大,算法的执行时间增长率和f(n)增长率成正比,这称作算法的渐进时间复杂度。而我们一般情况下讨论的最坏的时间复杂度。 空间复杂度: 算法的空间复杂度并不是实际占用的空间,而是计算整个算法空间辅助空间单元的个数,与问题的规模没有关系。算法的空间复杂度S(n)定义为该算法所耗费空间的数量级。 S(n)=o(f(n)) 若算法执行所需要的辅助空间相对于输入数据n而言是一个常数,则称这个算法空间复杂度辅助空间为o(1); 递归算法空间复杂度:递归深度n*每次递归所要的辅助空间,如果每次递归所需要的辅助空间为常数,则递归空间复杂度o(n)。
全栈程序员站长
2022/08/27
3K0
递归算法时间复杂度分析[通俗易懂]
算法设计的艺术:探索时间复杂度和空间复杂度的计算方法
可以看到,第二种算法非常高效。第一种算法需要执行n次,而第二种算法只需要执行1次。
Lion 莱恩呀
2024/11/08
1660
算法设计的艺术:探索时间复杂度和空间复杂度的计算方法
用 PHP 的方式实现的各类算法合集
项目地址: https://github.com/PuShaoWei/arithmetic-php About 如果说各种编程语言是程序员的招式,那么数据结构和算法就相当于程序员的内功。 简易结构 ├──Package │ ├── Sort 排序篇 │ │ ├── BubbleSort.php 冒泡排序 │ │ ├── QuickSort.php 快速排序 │ │ ├── ShellSort.php 希尔排序 │
前端教程
2018/03/27
1.1K0
一文搞懂算法的时间复杂度与空间复杂度
本文介绍了算法的时间复杂度和空间复杂度,包括基本概念、计算方法以及常见的时间和空间复杂度。同时,对于复杂情况,还分析了其时间复杂度和空间复杂度。
码科智能
2018/01/03
6.6K0
LeetCode0:学习算法必备知识:时间复杂度与空间复杂度的计算
算法(Algorithm)是指用来操作数据、解决程序问题的一组方法。算法是大厂、外企面试的必备项,也是每个高级程序员的必备技能。针对同一问题,可以有很多种算法来解决,但不同的算法在效率和占用存储空间上的区别可能会很大。
程序新视界
2021/01/06
18.5K2
推荐阅读
相关推荐
时间复杂度与空间复杂度
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档