three.js（二）

three.js（二）

  • 参考
  • 前言
  • 正文
    • 简单开始(不使用任何框架)
      • 补充
    • 粗略带过(使用Vue框架)
    • 细致讲解(比如我使用react框架)
          • App.jsx 的进阶版
  • 项目打包
  • 补充
    • 打包遇到的问题:
    • 原因:
    • 解决办法:

参考

https://threejs.org/docs/

前言

上一集中,我们用到了three.js的一个cdn的方法可以快速搭建一个前端页面，
现在我们尝试使用react框架来打包一下前端页面,然后在运行到我们已经搭建好的cpp-httplib框架搭建的后端服务器.

正文

简单开始(不使用任何框架)

npm init vite@latest
然后一路回车

cd vite-project
npm install
npm run dev

然后你就搭建成功了!

ctrl + c停掉
然后
(base) root@racknerd-cecdb9:~/myspace/three/noFrame-three-app/vite-project# npm install three

#假如你就想下0.153的版本,你可以直接npm install three@0.153

然后你就可以使用
https://threejs.org/docs/#manual/zh/introduction/Creating-a-scene
的例子了
(稍作部分修改)

在这里插入图片描述

  • index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="src/main.js"></script>
	</body>
</html>
  • main.js
import * as THREE from 'three';

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 );
//创建几何体
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 );

//正对着我们的是z轴
camera.position.z = 5;
//默认看向原点
camera.lookAt(0,0,0);

function animate() {
	//播放下一帧,继续调用animate函数
	requestAnimationFrame( animate );
	//旋转
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	//渲染
	renderer.render( scene, camera );
}
//调用函数
animate();

然后就直接诶直接可以npm run dev

补充

canvas:画布

粗略带过(使用Vue框架)

npm init vite@latest
然后不要一路回车了!!!!

你可以在这里选择相关的前端框架,你可以看到非常的多,在这里我们选择Vue框架
在这里插入图片描述

# 我们选择Vue+JavaScript
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

cd vite-project
npm install
npm run dev

然后你就搭建成功了!

ctrl + c停掉
然后
(base) root@racknerd-cecdb9:~/myspace/three/noFrame-three-app/vite-project# npm install three
  • 你只需要修改Vue.app,然后npm run dev就欧克了
<script setup>
import * as THREE from 'three';

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);
//创建几何体
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);

//正对着我们的是z轴
camera.position.z = 5;
//默认看向原点
camera.lookAt(0, 0, 0);

function animate() {
  //播放下一帧,继续调用animate函数
  requestAnimationFrame(animate);
  //旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  //渲染
  renderer.render(scene, camera);
}
//调用函数
animate();
</script>

<template>
  <div></div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

细致讲解(比如我使用react框架)

npm init vite@latest
然后不要一路回车了!!!!

你可以在这里选择相关的前端框架,你可以看到非常的多,在这里我们选择React框架
选择结果:

    Vanilla
✔ Select a framework: › React
✔ Select a variant: › JavaScript

cd vite-project
npm install
npm install three
npm run dev
  • 修改App.jsx
import { useState, useEffect, Component } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import * as THREE from 'three';

// function App() {
//   useEffect(() => {


//     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);
//     //创建几何体
//     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);

//     //正对着我们的是z轴
//     camera.position.z = 5;
//     //默认看向原点
//     camera.lookAt(0, 0, 0);

//     //创建轨道控制器
//     //const controls = new OrbitControls(camera, renderer.domElement);

//     function animate() {
//       //播放下一帧,继续调用animate函数
//       requestAnimationFrame(animate);
//       //旋转
//       cube.rotation.x += 0.01;
//       cube.rotation.y += 0.01;
//       //渲染
//       renderer.render(scene, camera);
//     }
//     //调用函数
//     animate();
//   }, [])

//   return (
//     <>
//       <div className='App'></div>

//     </>
//   )
// }

class App extends Component {
  render() {
    return <div></div>
  }
  componentDidMount() {
    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);
    //创建几何体
    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);

    //正对着我们的是z轴
    camera.position.z = 5;
    //默认看向原点
    camera.lookAt(0, 0, 0);

    //创建轨道控制器
    //const controls = new OrbitControls(camera, renderer.domElement);

    function animate() {
      //播放下一帧,继续调用animate函数
      requestAnimationFrame(animate);
      //旋转
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      //渲染
      renderer.render(scene, camera);
    }
    //调用函数
    animate();
  }
}

export default App
  • 修改index.css
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
App.jsx 的进阶版
import { useState, useEffect, Component } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";

// function App() {
//   useEffect(() => {


//     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);
//     //创建几何体
//     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);

//     //正对着我们的是z轴
//     camera.position.z = 5;
//     //默认看向原点
//     camera.lookAt(0, 0, 0);

//     //创建轨道控制器
//     //const controls = new OrbitControls(camera, renderer.domElement);

//     function animate() {
//       //播放下一帧,继续调用animate函数
//       requestAnimationFrame(animate);
//       //旋转
//       cube.rotation.x += 0.01;
//       cube.rotation.y += 0.01;
//       //渲染
//       renderer.render(scene, camera);
//     }
//     //调用函数
//     animate();
//   }, [])

//   return (
//     <>
//       <div className='App'></div>

//     </>
//   )
// }

class App extends Component {
  render() {
    return <div></div>
  }
  componentDidMount() {
    // 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);
    // //创建几何体
    // 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);

    // //正对着我们的是z轴
    // camera.position.z = 5;
    // //默认看向原点
    // camera.lookAt(0, 0, 0);

    // //创建轨道控制器
    // //const controls = new OrbitControls(camera, renderer.domElement);

    // function animate() {
    //   //播放下一帧,继续调用animate函数
    //   requestAnimationFrame(animate);
    //   //旋转
    //   cube.rotation.x += 0.01;
    //   cube.rotation.y += 0.01;
    //   //渲染
    //   renderer.render(scene, camera);
    // }
    // //调用函数
    // animate();
    // console.log(THREE);



    // 设置场景、相机
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 设置相机位置
    camera.position.set(0, 0, 10);
    scene.add(camera);

    //渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 监听窗口大小变化事件
    window.addEventListener('resize', function () {
      var width = window.innerWidth;
      var height = window.innerHeight;

      // 更新相机的宽高比
      camera.aspect = width / height;
      // 更新相机的投影矩阵
      camera.updateProjectionMatrix();
      // 更新渲染器大小
      renderer.setSize(width, height);
      //   设置渲染器的像素比
      renderer.setPixelRatio(window.devicePixelRatio);
    });


    // 创建一个立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;

    /**************/

    // 创建轨道控制器(此时你可以使用右键让模型动起来)
    const controls = new OrbitControls(camera, renderer.domElement);
    // 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
    controls.enableDamping = true;

    // 添加坐标轴辅助器
    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);
    // 设置时钟
    const clock = new THREE.Clock();

    window.addEventListener("dblclick", () => {
      const fullScreenElement = document.fullscreenElement;
      if (!fullScreenElement) {
        //   双击控制屏幕进入全屏，退出全屏
        // 让画布对象全屏
        renderer.domElement.requestFullscreen();
      } else {
        //   退出全屏，使用document对象
        document.exitFullscreen();
      }
      //   console.log(fullScreenElement);
    });
    /**************/



    // 鼠标交互
    let isDragging = false;
    let previousMousePosition = {
      x: 0,
      y: 0
    };
    function onDocumentMouseDown(event) {
      isDragging = true;
    }
    function onDocumentMouseMove(event) {
      if (isDragging) {
        var deltaMove = {
          x: event.clientX - previousMousePosition.x,
          y: event.clientY - previousMousePosition.y
        };
        const deltaRotationQuaternion = new THREE.Quaternion()
          .setFromEuler(new THREE.Euler(
            toRadians(deltaMove.y * 1),
            toRadians(deltaMove.x * 1),
            0,
            'XYZ'
          ));
        cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
      }
      previousMousePosition = {
        x: event.clientX,
        y: event.clientY
      };
    }
    function onDocumentMouseUp(event) {
      isDragging = false;
    }
    // 将鼠标事件监听器添加到渲染器的DOM元素
    renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
    renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
    renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
    // 动画循环渲染
    function animate() {
      // 如果没有鼠标交互，立方体会自动旋转
      if (!isDragging) {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
      }
      controls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    animate(); // 开始动画循环
    // 辅助函数：将角度转换为弧度
    function toRadians(angle) {
      return angle * (Math.PI / 180);
    }


  }
}

export default App



// // 目标：js控制画面全屏

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

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

// // 设置相机位置
// camera.position.set(0, 0, 10);
// scene.add(camera);

// // 添加物体
// // 创建几何体
// const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
// // 根据几何体和材质创建物体
// const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// // 修改物体的位置
// // cube.position.set(5, 0, 0);
// // cube.position.x = 3;
// // 缩放
// // cube.scale.set(3, 2, 1);
// // cube.scale.x = 5;
// // 旋转
// cube.rotation.set(Math.PI / 4, 0, 0, "XZY");

// // 将几何体添加到场景中
// scene.add(cube);

// console.log(cube);

// // 初始化渲染器
// const renderer = new THREE.WebGLRenderer();
// // 设置渲染的尺寸大小
// renderer.setSize(window.innerWidth, window.innerHeight);
// // console.log(renderer);
// // 将webgl渲染的canvas内容添加到body
// document.body.appendChild(renderer.domElement);

// // // 使用渲染器，通过相机将场景渲染进来
// // renderer.render(scene, camera);

// // 创建轨道控制器
// const controls = new OrbitControls(camera, renderer.domElement);
// // 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
// controls.enableDamping = true;

// // 添加坐标轴辅助器
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);
// // 设置时钟
// const clock = new THREE.Clock();

// window.addEventListener("dblclick", () => {
//   const fullScreenElement = document.fullscreenElement;
//   if (!fullScreenElement) {
//     //   双击控制屏幕进入全屏，退出全屏
//     // 让画布对象全屏
//     renderer.domElement.requestFullscreen();
//   } else {
//     //   退出全屏，使用document对象
//     document.exitFullscreen();
//   }
//   //   console.log(fullScreenElement);
// });

// function render() {
//   controls.update();
//   renderer.render(scene, camera);
//   //   渲染下一帧的时候就会调用render函数
//   requestAnimationFrame(render);
// }

// render();

// // 监听画面变化，更新渲染画面
// window.addEventListener("resize", () => {
//   //   console.log("画面变化了");
//   // 更新摄像头
//   camera.aspect = window.innerWidth / window.innerHeight;
//   //   更新摄像机的投影矩阵
//   camera.updateProjectionMatrix();

//   //   更新渲染器
//   renderer.setSize(window.innerWidth, window.innerHeight);
//   //   设置渲染器的像素比
//   renderer.setPixelRatio(window.devicePixelRatio);

项目打包

教程:https://juejin.cn/post/6869708334371602445

如果不想看教程,那就直接往下看

你就直接在项目的根目录下执行
npm run build
就行了

然后你就生成了一个dist目录,你把dist目录下的文件放在服务器下面就能直接跑!(假如你生成的文件夹和我的这个不一样,请看下面的补充)
在这里插入图片描述

补充

打包遇到的问题:

你可能会遇到下面三种情况:

  1. 只生成了dist目录
  2. 只生成了build目录
  3. 既生成了dist目录又生成了build目录

原因:

版本不同,操作系统不同,配置文件也有差异

解决办法:

  • 如果只生成了一个dist文件,就只需要把这一个文件下的内容放在服务器下即可.
  • 如果build和dist都生成了,就把他们两个的文件夹里面的内容一起放在在服务器下.
  • 如果只生成了一个build文件,就只需要把这一个文件下的内容放在服务器下即可.

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

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

相关文章

Web漏洞分析-文件解析及上传（下）

Web漏洞分析-文件解析及上传（下）

随着互联网的迅速发展&#xff0c;网络安全问题变得日益复杂&#xff0c;而文件解析及上传漏洞成为攻击者们频繁攻击的热点之一。本文将深入研究文件解析及上传漏洞&#xff0c;通过对文件上传、Web容器IIS、命令执行、Nginx文件解析漏洞以及公猫任意文件上传等方面的细致分析&…
阅读更多...
代驾系统开发：驶向未来的智能交通服务

代驾系统开发：驶向未来的智能交通服务

随着科技的迅速发展&#xff0c;代驾系统的开发成为改善出行体验和提升交通服务智能化的重要一环。本文将聚焦于代驾系统开发的技术创新&#xff0c;为读者呈现其中涉及的一些令人振奋的技术代码。 1. 区块链技术的运用&#xff1a; 区块链技术被引入代驾系统&#xff0c;可…
阅读更多...
尚海整装装修流程 揭秘装修行业的高标准服务

尚海整装装修流程 揭秘装修行业的高标准服务

装修房子其实比较复杂&#xff0c;在这一复杂的过程中&#xff0c;一个合理且严密的装修流程显得尤为关键。错误的步骤安排不仅会造成资源的浪费&#xff0c;更有可能让人产生“弃屋重装”的冲动。尚海整装以精准的流程规划确保了装修的每一步都有序进行&#xff0c;轻松搞定装…
阅读更多...
人工智能与VR技术

人工智能与VR技术

人工智能与虚拟现实技术&#xff08;VR&#xff09;的结合是当今科技领域中备受瞩目的话题。两者的结合不仅在娱乐、教育、医疗等领域展现出了巨大的潜力&#xff0c;而且在未来的发展趋势中也将具有重要意义。本文将从技术融合、应用场景和未来发展等方面探讨人工智能与虚拟现…
阅读更多...
激荡思享 驱动增长 | 湾数联·湾董会走进竹云

激荡思享 驱动增长 | 湾数联·湾董会走进竹云

12月12日&#xff0c;由湾区数字科技产业联盟&#xff08;GBADA&#xff09;、湾盟产业创新服务中心&#xff08;GBAIC&#xff09;、深圳竹云科技股份有限公司联合主办的“湾数联湾董会”第一期在深圳南山区创智云城圆满举办。本期湾董会以“竹云IDaaS数字身份为企业数字化转型…
阅读更多...
select简单使用

select简单使用

语法 先大致看一下&#xff0c;后面都会讲&#xff0c;distinct用来去重&#xff0c;from 指明表名&#xff0c;where语句则用来控制查询条件&#xff0c;order by则用来对结果进行升序/降序排序&#xff0c;limit则用来分页。 SELECT [DISTINCT] {* | {column [, column] ..…
阅读更多...
mysqlsh导入json，最终还得靠navicat导入json

mysqlsh导入json，最终还得靠navicat导入json

工作需要将一个巨大的10G的json导入mysql数据库。 看到mysql官方有对json导入的支持。 如下&#xff1a; MySQL :: Import JSON to MySQL made easy with the MySQL Shell $ mysqlsh rootlocalhost:33300/test --import /path_to_file/zips.json Creating a session to root…
阅读更多...
Linux——进程地址空间与进程控制

Linux——进程地址空间与进程控制

进程地址空间与进程控制 文章目录 进程地址空间与进程控制1. 进程地址空间1.1 进程地址空间的引入1.1 进程地址空间的特点1.2 页表1.3 C/C的地址1.4 进程地址空间 页表的优势 2. 进程控制2.1 进程创建2.1.1 写时拷贝 2.2 进程终止2.2.1 进程退出码2.2.2 异常信号码2.2.3 errno…
阅读更多...
阿里巴巴旗下的 AI 平台 AIHub 提供多种免费的图片 AI 在线工具

阿里巴巴旗下的 AI 平台 AIHub 提供多种免费的图片 AI 在线工具

顽兔抠图&#xff1a;一键去除图像背景的 AI 工具&#xff0c;支持图片和视频。顽兔抠图 淘宝网(Taobao.com)作为专业的购物网站拥有全球时尚前沿的消费者购物集市,100%认证网上商城及超值二手商品区&#xff0c;同时购物安全&#xff0c;产品丰富&#xff0c;应有尽有,任你选购…
阅读更多...
解决固定资产盘点问题，易点易动来帮忙！

解决固定资产盘点问题，易点易动来帮忙！

固定资产盘点是企业管理中不可或缺的环节&#xff0c;然而&#xff0c;很多企业在固定资产盘点方面面临一系列问题&#xff1a; 盘点过程繁琐&#xff1a;传统的手动盘点方式需要耗费大量人力和时间&#xff0c;容易出现疏漏和错误&#xff0c;效率低下&#xff1b; 数据记录不…
阅读更多...
uniapp 之 图片 视频 文件上传

uniapp 之 图片 视频 文件上传

<view class"" style"padding: 24rpx 0"><text>相关资料 <text class"fs-26 color-666">&#xff08;图片、视频、文档不超过9个&#xff09;</text> </text><view class"flex align-center" style&…
阅读更多...
安全算法（二）：共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换

安全算法（二）：共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换

安全算法&#xff08;二&#xff09;&#xff1a;共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换 本章介绍了共享密钥加密、公开密钥加密&#xff0c;和两种加密方法混合使用的混合加密方法&#xff1b;最后介绍了迪菲-赫尔曼密钥交换。 加密数据的方法可以分为…
阅读更多...
Day09 Liunx高级系统设计11-数据库1

Day09 Liunx高级系统设计11-数据库1

MySQL 简介 数据库DB 数据库&#xff08; DataBase &#xff0c; DB &#xff09;从本质上讲就是一个文件系统&#xff0c;它能够将数据有组织地集合在一起&#xff0c;按照一定的规则长期存储到计算机的磁盘中&#xff0c;并且能够供多个用户共享和使用&#xff0c;同时&…
阅读更多...
Leetcode—459.重复的子字符串【简单】

Leetcode—459.重复的子字符串【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—459.重复的子字符串 算法思想 巧解的算法思想 实现代码 从第一个位置开始到s.size()之前&#xff0c;看s字符串是否是ss的子串 class Solution { public:bool repeatedSubstringPattern(string s) {return (s s).fin…
阅读更多...
西南科技大学数字电子技术实验七（4行串行累加器设计及FPGA实现）FPGA部分

西南科技大学数字电子技术实验七（4行串行累加器设计及FPGA实现）FPGA部分

一、实验目的 1、掌握基于Verilog语言的diamond工具设计全流程。 2、熟悉、应用Verilog HDL描述数字电路。 3、掌握Verilog HDL的组合和时序逻辑电路的设计方法。 4、掌握“小脚丫”开发板的使用方法。 二、实验原理 三、程序清单&#xff08;每条语句必须包括注释或在开发…
阅读更多...
【产品应用】一体化伺服电机在TO全自动封焊机中的应用

【产品应用】一体化伺服电机在TO全自动封焊机中的应用

随着科技的飞速发展&#xff0c;自动化设备在各行各业中的应用越来越广泛。在电子制造领域&#xff0c;封焊机是关键设备之一&#xff0c;其性能直接影响产品的质量和产量。近年来&#xff0c;一体化伺服电机在TO全自动封焊机中的应用逐渐受到关注。本文将详细介绍一体化伺服电…
阅读更多...
用Rust帮Python加加速

用Rust帮Python加加速

背景 长期以来,Python由于易上手,有GC且生态强大等特点被广泛使用,可是渐渐的人们也发现了它的不足,解释型语言的运行速度终究比不过编译型,况且由于Python设计时的动态数据类型一切皆对象(内存都分配在堆上)等思想,也导致了运行速度缓慢. 随着实时性要求的不断提升,在一些计…
阅读更多...
Windows下使用CMake编译lua

Windows下使用CMake编译lua

Lua 是一个功能强大、高效、轻量级、可嵌入的脚本语言。它支持程序编程、面向对象程序设计、函数式编程、数据驱动编程和数据描述。 Lua的官方网站上只提供了源码&#xff0c;需要使用Make进行编译&#xff0c;具体的编译方法为 curl -R -O http://www.lua.org/ftp/lua-5.4.6.…
阅读更多...
Android取消深色适配

Android取消深色适配

从Android10&#xff08;API 29&#xff09;开始&#xff0c;在原有的主题适配的基础上&#xff0c;Google开始提供了Force Dark机制&#xff0c;在系统底层直接对颜色和图片进行转换处理&#xff0c;原生支持深色模式。当系统设置深色主题背景或者进入省电模式情况下会进入深色…
阅读更多...
【docker】docker入门与安装

【docker】docker入门与安装

Docker 一、入门 Docker的主要目标是&#xff1a;Build, Ship and Run Any App, Anywhere&#xff0c;也就是通过对应用组件的封装、分发、部署、运行等生命周期的管理&#xff0c;使用户的APP及其运行环境能做到一次镜像,处处运行。 Docker运行速度快的原因 Docker有比虚拟…
阅读更多...
最新文章

Copyright @ 2022~2023