three.js（二）

news2024/11/15 19:44:33

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文件,就只需要把这一个文件下的内容放在服务器下即可.

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

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

相关文章

开源云原生网关Linux Traefik本地部署结合内网穿透远程访问

开源云原生网关Linux Traefik本地部署结合内网穿透远程访问

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…
阅读更多...
人工智能算法合集

人工智能算法合集

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;作为当今世界最热门的技术领域之一&#xff0c;正日益改变着我们的生活方式、工作方式甚至整个社会结构。在人工智能领域中&#xff0c;算法是至关重要的一环&#xff0c;它们是实现人工智能技术应用的核…
阅读更多...
Axure元件的介绍使用以及登录界面和个人简历的绘制

Axure元件的介绍使用以及登录界面和个人简历的绘制

目录 一、Axure元件介绍 1.1 简介 1.2 特点 1.3 元件操作 二、基本元件的使用 2.1 矩形和圆形 2.2 图片 2.2.1 图片元件特点 2.2.2 具体操作 2.3 占位符 2.3.1 使用规范方法举例 2.4 文本元件 2.4.1 图示 2.5 热区 2.5.1 图示 2.5.2 热区辅助页面排版 2.6 线段…
阅读更多...
Linux 系统上配置 SSH 密钥

Linux 系统上配置 SSH 密钥

1. 生成 SSH 密钥 打开终端&#xff0c;运行以下命令来生成 SSH 密钥&#xff1a; ssh-keygen -t rsa -b 4096 -C "wqzbxhexample.com" 替换 "wqzbxhexample.com" 为你在 GitHub 注册时使用的邮箱地址。 2. 添加 SSH 密钥到 SSH 代理 运行以下命令来启…
阅读更多...
智能优化算法应用：基于纵横交叉算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于纵横交叉算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于纵横交叉算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于纵横交叉算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.纵横交叉算法4.实验参数设定5.算法结果6.…
阅读更多...
定时器TIM HAL库+cubeMX(上)

定时器TIM HAL库+cubeMX(上)

定时器时钟源APB1 36MHz 一.基本定时器 1.基本框图 2.溢出时间计算 3.配置定时器步骤 TIM_HandleTypeDef g_timx_handle;/* 定时器中断初始化函数 */ void btim_timx_int_init(uint16_t arr, uint16_t psc) {g_timx_handle.Instance TIM6;g_timx_handle.Init.Prescaler p…
阅读更多...
SLAM学习笔记001

SLAM学习笔记001

当向机器人下达移动到地点B的命令后&#xff0c;机器人不免会问三个颇具哲学性的问题&#xff0c;即“我在哪儿”“我将到何处去”“我该如何去”。slam导航技术涵盖&#xff1a;航天、军事、特种作业、工业生产、智慧交通、消费娱乐等slam导航的经典应用&#xff1a;火星探测车…
阅读更多...
「神印王座」皓晨带伙伴参与伊老试炼，12魔神攻打震南关，高能

「神印王座」皓晨带伙伴参与伊老试炼，12魔神攻打震南关，高能

Hello,小伙伴们&#xff0c;我是拾荒君。 时光匆匆&#xff0c;国漫《神印王座》的第85集已经与大家如约而至。想必各位观众都已经迫不及待地观看了这一集&#xff0c;其中&#xff0c;龙皓晨向光之晨曦团的成员们揭示了永恒之塔的秘密&#xff0c;并带领他们深入其中。 永恒之…
阅读更多...
如何在Facebook Business Manager进行企业认证

如何在Facebook Business Manager进行企业认证

Facebook Business Manager&#xff0c;简称BM&#xff0c;按照字面意思理解就是Facebook官方的商务管理平台&#xff0c;是供广告主团队去使用的一个管理工具。BM可以绑定Facebook公共主页、广告账户等一系列Facebook账号。通过BM&#xff0c;企业就可以在一个后台&#xff0c…
阅读更多...
每日一练2023.12.14——幸运彩票【PTA】

每日一练2023.12.14——幸运彩票【PTA】

题目链接&#xff1a;L1-062 幸运彩票 题目要求&#xff1a; 彩票的号码有 6 位数字&#xff0c;若一张彩票的前 3 位上的数之和等于后 3 位上的数之和&#xff0c;则称这张彩票是幸运的。本题就请你判断给定的彩票是不是幸运的。 输入格式&#xff1a; 输入在第一行中给出…
阅读更多...
设计模式（2）--对象创建(2)--生成器

设计模式（2）--对象创建(2)--生成器

1. 意图 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 2. 四种角色 指挥(Director)、抽象生成器(Builder)、具体生成器(Concrete Builder)、产品(Product) 3. 优点 3.1 可以改变一个产品的内部表示(通过定义新的生成器)。 3.2 将构…
阅读更多...
垃圾回收 (GC) 在 .NET Core 中是如何工作的？（二）

垃圾回收 (GC) 在 .NET Core 中是如何工作的？（二）

接上一篇文章垃圾回收 (GC) 在 .NET Core 中是如何工作的&#xff1f;-CSDN博客 GC 会分配堆段&#xff0c;其中每个段都是一系列连续的内存。 置于堆中的对象归类为 3 个代系之一&#xff1a;0、1 或 2。 代系可确定 GC 尝试在应用不再引用的托管对象上释放内存的频率。 编号…
阅读更多...
如何在本地搭建Oracle数据库并实现无公网ip通过PLSQL工具远程连接数据库

如何在本地搭建Oracle数据库并实现无公网ip通过PLSQL工具远程连接数据库

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 正文开始前给大家推荐个网站&#xff0c;前些天发…
阅读更多...
人工智能与VR技术

人工智能与VR技术

人工智能与虚拟现实技术&#xff08;VR&#xff09;的结合是当今科技领域中备受瞩目的话题。两者的结合不仅在娱乐、教育、医疗等领域展现出了巨大的潜力&#xff0c;而且在未来的发展趋势中也将具有重要意义。本文将从技术融合、应用场景和未来发展等方面探讨人工智能与虚拟现…
阅读更多...
单例模式：饿汉模式、懒汉模式

单例模式：饿汉模式、懒汉模式

目录 一、什么是单例模式 二、饿汉模式 三、懒汉模式 一、什么是单例模式 单例模式是Java中的设计模式之一&#xff0c;能够保证某个类在程序中只存在唯一一份实例&#xff0c;而不会创建出多个实例 单例模式有很多实现方式&#xff0c;最常见的是饿汉和懒汉两种模式 二、…
阅读更多...
网络小测------

网络小测------

使用软件PT7.0按照上面的拓扑结构建立网络&#xff0c;进行合理配置&#xff0c;使得所有计算机之间能够互相通信。并且修改各交换机的系统名称为&#xff1a;学号_编号&#xff0c;如你的学号为123&#xff0c;交换机Switch0的编号为0&#xff0c;则系统名称为123_0&#xff1…
阅读更多...
数据结构（超详细讲解！！）第二十七节 查找

数据结构（超详细讲解！！）第二十七节 查找

1.查找的基本概念 1、查找表——由同一类型的数据元素&#xff08;或记录&#xff09;构成的集合称为查找表。 2、对查找表进行的操作&#xff1a; 查找某个特定的数据元素是否存在&#xff1b; 检索某个特定数据元素的属性&#xff1b; 在查找表中插入一个数据元素&#x…
阅读更多...
12.HTML5新特性

12.HTML5新特性

HTML5新特性 1.介绍 它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言&#xff08;HTML&#xff09;的第五次重大修改。用于取代 HTML4 与 XHTML 的新一代标准版本&#xff0c;所以叫HTML5 HTML5 在狭义上是指新一代的 HTML 标准&#xff0c;在广义上是指…
阅读更多...
Mysql进阶-InnoDB引擎事务原理及MVCC

Mysql进阶-InnoDB引擎事务原理及MVCC

事务原理 事务基础 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系 统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 事务的四大特性&#xff1a; 原子性&#xff08;A…
阅读更多...
Milvus 老友汇｜AI、云原生与向量数据库的精彩碰撞回顾！

Milvus 老友汇｜AI、云原生与向量数据库的精彩碰撞回顾！

一场久违的老友对谈&#xff0c;一次精妙的 AI 探索碰撞。 近日&#xff0c;Milvus 老友汇Arch Meetup 在上海圆满落幕。本次 Meetup 亮点颇多&#xff0c;不仅得到了 KubeBlocks 社区的大力支持&#xff0c;同时也邀请了来自网易伏羲和蚂蚁集团的资深专家&#xff0c;现场分享…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023