首页 > 其他分享 >WebXR与Web组件结合：创建沉浸式Web体验_2024-07-26_16-47-08.Tex

WebXR与Web组件结合：创建沉浸式Web体验_2024-07-26_16-47-08.Tex

时间：2024-11-13 20:47:58浏览次数：3  
标签：Web 26 07 会话 WebXR 组件 session XR

WebXR与Web组件结合：创建沉浸式Web体验

WebXR简介

WebXR的定义

WebXR 是一个 Web API，它允许开发者创建沉浸式的虚拟现实 (VR) 和增强现实 (AR) 体验，直接在网页浏览器中运行。这个 API 是 WebVR 的后继者，旨在提供更广泛、更统一的设备支持，以及更强大的功能，如空间追踪、手部追踪和环境理解。

WebXR的API概述

WebXR API 通过 navigator.xr 对象提供，它允许开发者访问和控制 VR 和 AR 设备。API 的核心功能包括：

  • 设备检测：通过 isSessionSupported 方法检查设备是否支持特定类型的 XR 会话。
  • 会话管理：使用 requestSession 方法启动 XR 会话，可以是 VR 或 AR 会话。
  • 渲染循环：在 XR 会话中，开发者可以使用 requestAnimationFrame 来更新和渲染场景。
  • 输入处理：API 提供了处理用户输入（如头部运动、控制器按钮）的方法。

示例：检测设备是否支持 WebXR

if ('xr' in navigator) {
  console.log('WebXR is supported!');
} else {
  console.log('WebXR is not supported.');
}

示例：启动 VR 会话

async function startVRSession() {
  const session = await navigator.xr.requestSession('immersive-vr');
  session.addEventListener('end', () => {
    console.log('XR session ended.');
  });
  // 开始渲染循环
  function renderFrame(time) {
    requestAnimationFrame(renderFrame);
    session.requestFrameOfReference('local').then((frameOfReference) => {
      session.requestAnimationFrame((time) => {
        // 渲染逻辑
      });
    });
  }
  renderFrame();
}

WebXR与VR/AR设备的兼容性

WebXR 设计为与各种 VR 和 AR 设备兼容，包括但不限于：

  • 头戴式显示器：如 Oculus Rift、HTC Vive、Windows Mixed Reality 头盔。
  • 移动设备：支持 ARKit 的 iOS 设备和 ARCore 的 Android 设备。
  • 无头设备：允许在没有头戴式显示器的情况下体验 VR，如通过桌面浏览器。

示例：检查设备是否支持沉浸式 VR 会话

async function checkVRSupport() {
  const isSupported = await navigator.xr.isSessionSupported('immersive-vr');
  if (isSupported) {
    console.log('Immersive VR session is supported.');
  } else {
    console.log('Immersive VR session is not supported.');
  }
}
checkVRSupport();

示例：创建一个简单的 AR 场景

<!DOCTYPE html>
<html>
<head>
  <title>WebXR AR Example</title>
  <script>
    async function startARSession() {
      const session = await navigator.xr.requestSession('immersive-ar');
      session.addEventListener('end', () => {
        console.log('AR session ended.');
      });
      // 渲染循环
      function renderFrame(time) {
        requestAnimationFrame(renderFrame);
        session.requestAnimationFrame((time) => {
          // 渲染 AR 场景
        });
      }
      renderFrame();
    }
  </script>
</head>
<body>
  <button onclick="startARSession()">Start AR Session</button>
</body>
</html>

WebXR的设备兼容性列表

  • Oculus Rift：支持沉浸式 VR 会话。
  • HTC Vive：支持沉浸式 VR 会话。
  • Windows Mixed Reality：支持沉浸式 VR 会话。
  • iPhone (ARKit)：支持沉浸式 AR 会话。
  • Android (ARCore)：支持沉浸式 AR 会话。
  • 桌面浏览器：支持无头 VR 会话。

注意事项

  • 性能：WebXR 会话可能对设备性能有较高要求，确保在支持的设备上测试。
  • 用户权限：启动 XR 会话前，可能需要用户授权，尤其是在移动设备上。
  • 浏览器支持：并非所有浏览器都支持 WebXR，确保在最新版本的 Chrome、Firefox 和 Edge 上测试。

通过以上介绍和示例，我们可以看到 WebXR API 如何为 Web 开发者提供了一个强大且统一的接口，用于创建跨平台的 VR 和 AR 体验。开发者可以利用这些功能来构建更加沉浸和互动的 Web 应用，同时考虑到设备兼容性和用户权限管理。

Web组件基础

Web组件的概念

Web组件是一种使用Web标准构建可重用、封装良好的用户界面组件的方法。它由一组相关的Web API组成，包括自定义元素、Shadow DOM和HTML模板。Web组件允许开发者创建自己的标签，这些标签可以拥有自己的样式和逻辑，同时与其他HTML元素无缝集成。

自定义元素的创建

自定义元素是Web组件的核心部分，它允许你定义新的、具有特定功能的HTML元素。下面是一个创建自定义元素的示例：

// 定义自定义元素
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          color: blue;
        }
      </style>
      <p>Hello, Web Components!</p>
    `;
  }
}

// 注册自定义元素
customElements.define('my-custom-element', MyCustomElement);

在HTML中使用这个自定义元素：

<my-custom-element></my-custom-element>

代码讲解

  • class MyCustomElement extends HTMLElement：定义一个名为MyCustomElement的类，继承自HTMLElement。
  • constructor()：构造函数中，调用super()初始化父类，然后使用attachShadow()方法创建一个Shadow DOM。
  • this.shadowRoot.innerHTML：设置Shadow DOM的内容，包括样式和HTML结构。
  • customElements.define()：注册自定义元素，使其可以在HTML中使用。

Shadow DOM的使用

Shadow DOM是Web组件中用于封装和隔离组件样式和结构的技术。它允许组件内部的样式不会影响到外部的样式，反之亦然。

class MyShadowElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        p {
          color: red;
        }
      </style>
      <p>This is a paragraph inside the Shadow DOM.</p>
    `;
  }
}
customElements.define('my-shadow-element', MyShadowElement);

在HTML中使用：

<my-shadow-element></my-shadow-element>

代码讲解

  • mode: 'open'：表示Shadow DOM可以被外部JavaScript访问。
  • <style>标签：在Shadow DOM内部定义样式，这些样式只对Shadow DOM内部的元素生效。

属性和事件的绑定

Web组件允许你定义和使用属性和事件，这使得组件可以与外部环境交互。

class MyAttributeElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <p>Hello, ${this.getAttribute('name')}!</p>
    `;
  }

  static get observedAttributes() {
    return ['name'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.shadowRoot.querySelector('p').textContent = `Hello, ${newValue}!`;
    }
  }
}
customElements.define('my-attribute-element', MyAttributeElement);

在HTML中使用：

<my-attribute-element name="World"></my-attribute-element>

代码讲解

  • getAttribute('name')：获取自定义元素的属性值。
  • observedAttributes：定义一个数组，列出所有需要观察的属性。
  • attributeChangedCallback：当属性值发生变化时，这个方法会被调用，可以在这里更新组件的内部状态。

事件的绑定

事件绑定允许组件响应用户操作。例如，下面的代码展示了如何在自定义元素中添加事件监听器：

class MyEventElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="myButton">Click me!</button>
    `;
    this.shadowRoot.querySelector('#myButton').addEventListener('click', () => {
      console.log('Button clicked!');
    });
  }
}
customElements.define('my-event-element', MyEventElement);

在HTML中使用：

<my-event-element></my-event-element>

代码讲解

  • addEventListener：在Shadow DOM内部的元素上添加事件监听器。
  • 当按钮被点击时，控制台会输出Button clicked!，这表明事件已经被正确绑定。

通过以上示例，我们可以看到Web组件如何通过自定义元素、Shadow DOM以及属性和事件的绑定，构建出功能强大、可重用的组件。这为Web开发提供了一种新的、更模块化的方法，使得复杂应用的构建和维护变得更加容易。

WebXR与Web组件结合

创建WebXR组件的步骤

在开始创建WebXR组件之前，理解WebXR Device API是至关重要的。WebXR Device API提供了一种在Web上创建沉浸式XR体验的方式，包括虚拟现实（VR）和增强现实（AR）。下面，我们将通过一系列步骤来创建一个WebXR组件，该组件将封装XR功能，使其更易于在Web应用中使用。

步骤1：初始化XRSession

// 初始化XRSession
async function initXR() {
    const sessionInit = {
        requiredFeatures: ['local-floor'],
        optionalFeatures: ['bounded-floor', 'hand-tracking']
    };
    const session = await navigator.xr.requestSession('immersive-vr', sessionInit);
    return session;
}

这段代码初始化了一个XR会话，请求了必要的特性（如local-floor）和可选特性（如bounded-floor和hand-tracking）。immersive-vr参数指定了我们希望创建一个沉浸式的VR体验。

步骤2：创建XRFrameLoop

// 创建XRFrameLoop
async function createXRFrameLoop(session, renderer) {
    session.addEventListener('end', () => {
        renderer.stop();
    });
    session.updateRenderState({
        baseLayer: new XRWebGLLayer(session, renderer.gl)
    });
    await session.start();
    renderer.start(session);
}

这里，我们创建了一个XR帧循环，它监听会话结束事件，并在会话结束时停止渲染器。session.updateRenderState方法用于更新渲染状态，XRWebGLLayer用于创建一个WebGL层，该层将用于渲染XR内容。

步骤3：封装XR功能

class XRComponent {
    constructor(renderer) {
        this.renderer = renderer;
        this.xrSession = null;
    }

    async init() {
        this.xrSession = await initXR();
        await createXRFrameLoop(this.xrSession, this.renderer);
    }

    update() {
        // 更新XR组件的状态
    }

    render() {
        // 渲染XR组件
    }

    destroy() {
        // 清理资源
        this.xrSession.end();
    }
}

XRComponent类封装了XR功能，包括初始化、更新、渲染和销毁。这使得组件可以独立于应用的其他部分工作，提高了代码的可重用性和可维护性。

封装XR功能的组件设计

设计XR组件时，我们应考虑如何封装XR功能，使其易于集成到Web应用中。组件应该包含以下部分：

  • 初始化：设置XR会话和渲染器。
  • 更新：根据XR帧更新组件状态。
  • 渲染：渲染XR内容。
  • 销毁：清理资源，结束XR会话。
class XRHandTrackingComponent {
    constructor(renderer) {
        this.renderer = renderer;
        this.hands = [];
    }

    async init() {
        const session = await initXR();
        session.addEventListener('selectstart', this.onSelectStart);
        session.addEventListener('selectend', this.onSelectEnd);
        await createXRFrameLoop(session, this.renderer);
    }

    update(frame) {
        frame.getHandJoints().forEach(joint => {
            this.hands.push(joint);
        });
    }

    render(frame) {
        this.hands.forEach(joint => {
            this.renderer.renderJoint(joint);
        });
    }

    destroy() {
        this.hands = [];
        this.xrSession.removeEventListener('selectstart', this.onSelectStart);
        this.xrSession.removeEventListener('selectend', this.onSelectEnd);
        this.xrSession.end();
    }
}

XRHandTrackingComponent类封装了手部追踪功能，它在初始化时设置XR会话和监听事件，在更新时获取手部关节数据，在渲染时渲染手部关节，在销毁时清理资源。

组件与WebXR API的交互

组件与WebXR API的交互是通过监听XR会话的事件和调用XR会话的方法来实现的。例如，XRHandTrackingComponent类监听selectstart和selectend事件，以检测手部的交互。

onSelectStart = (event) => {
    console.log('Hand selection started');
};

onSelectEnd = (event) => {
    console.log('Hand selection ended');
};

这些事件处理器可以用于执行特定的交互逻辑，如在手部选择开始时高亮对象，在手部选择结束时执行操作。

优化组件以适应XR环境

优化XR组件以适应XR环境包括减少延迟、提高渲染效率和优化交互。以下是一些优化策略：

  • 减少延迟：使用requestAnimationFrame来同步XR帧和渲染循环。
  • 提高渲染效率：使用空间分区和LOD（Level of Detail）技术来减少渲染的复杂性。
  • 优化交互：使用物理引擎和碰撞检测来实现更真实的交互。
class XRPerformanceComponent {
    constructor(renderer) {
        this.renderer = renderer;
        this.lastFrameTime = 0;
    }

    async init() {
        const session = await initXR();
        await createXRFrameLoop(session, this.renderer);
    }

    update(frame) {
        const currentTime = performance.now();
        const deltaTime = currentTime - this.lastFrameTime;
        this.lastFrameTime = currentTime;
        // 使用deltaTime来更新动画和物理模拟
    }

    render(frame) {
        // 渲染XR内容
    }

    destroy() {
        this.xrSession.end();
    }
}

XRPerformanceComponent类通过跟踪每帧的时间来减少延迟，使用deltaTime来更新动画和物理模拟，从而提高渲染效率和交互质量。

通过以上步骤和设计，我们可以创建出既强大又易于集成的WebXR组件，为Web应用带来沉浸式的XR体验。

实战案例分析

构建一个简单的VR场景

在开始构建VR场景之前，我们需要确保已经引入了WebXR API的必要库和框架。WebXR API是Web平台的一部分，它允许开发者创建沉浸式的虚拟现实（VR）和增强现实（AR）体验。下面是一个使用WebXR API创建简单VR场景的步骤：

  1. 创建HTML结构：首先，我们需要一个基本的HTML页面结构，包括一个用于渲染3D内容的<canvas>元素。

  2. 引入Three.js库：Three.js是一个基于WebGL的3D库，它简化了WebXR的使用。在HTML头部引入Three.js库。

  3. 设置Three.js场景：创建一个Three.js场景，添加相机、光源和3D模型。

  4. 启用WebXR：使用Three.js的XR功能，使场景能够以VR模式渲染。

示例代码

// 引入Three.js和WebXR库
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/jsm/webxr/WebXR.js"></script>

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加光源
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

// 添加3D模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 启用WebXR
const xr = renderer.xr;
xr.enabled = true;

// 渲染循环
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    if (xr.isPresenting) {
        renderer.setAnimationLoop(renderXR);
    } else {
        renderer.setAnimationLoop(null);
    }
}

function renderXR() {
    requestAnimationFrame(renderXR);
    renderer.render(scene, camera);
}

// 监听XR会话
function enterXR() {
    if (xr.isSessionSupported('immersive-vr')) {
        xr.requestSession('immersive-vr')
            .then(function (session) {
                session.addEventListener('end', function () {
                    xr.enabled = false;
                    session.end();
                });
                camera.xr.setReferenceSpaceType('local');
                xr.enabled = true;
            })
            .catch(function (err) {
                console.error('Unable to start session', err);
            });
    }
}

// 添加按钮以启动XR会话
const button = document.createElement('button');
button.textContent = 'Enter VR';
button.addEventListener('click', enterXR);
document.body.appendChild(button);

render();

代码解释

  • HTML结构：页面包含一个<canvas>元素和一个按钮，用于启动VR会话。
  • Three.js场景：创建了场景、相机和渲染器，并添加了一个立方体作为3D模型。
  • WebXR启用：通过renderer.xr.enabled = true;启用了WebXR功能。
  • 渲染循环：render()函数负责持续渲染场景，而renderXR()在XR会话中调用。
  • XR会话：enterXR()函数检查是否支持沉浸式VR，并请求启动XR会话。

使用Web组件增强AR体验

Web组件（Web Components）是一组Web平台API，它们允许开发者创建可重用的自定义HTML元素。结合WebXR API，Web组件可以用来封装AR体验的特定功能，如手势识别、环境映射等，从而增强AR应用的交互性和可维护性。

示例代码

<!-- 定义自定义Web组件 -->
<script>
    class ARGestureComponent extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            this.shadowRoot.innerHTML = `
                <style>
                    :host {
                        display: block;
                    }
                </style>
                <button id="gestureButton">Tap to interact</button>
            `;
            this.gestureButton = this.shadowRoot.querySelector('#gestureButton');
            this.gestureButton.addEventListener('click', this.handleGesture.bind(this));
        }

        handleGesture() {
            // 在这里处理手势事件，例如触发AR场景中的动作
            console.log('Gesture detected');
        }
    }

    customElements.define('ar-gesture', ARGestureComponent);
</script>

<!-- 使用自定义Web组件 -->
<ar-gesture></ar-gesture>

代码解释

  • 自定义Web组件：ARGestureComponent是一个自定义的Web组件，它封装了一个按钮和手势处理逻辑。
  • 阴影DOM：使用attachShadow方法创建阴影DOM，以隔离组件的样式和结构。
  • 事件处理：handleGesture函数在按钮被点击时触发，可以扩展以处理更复杂的AR手势。

调试和性能优化技巧

调试和优化WebXR应用是确保其在各种设备上运行流畅的关键。以下是一些调试和性能优化的技巧：

  1. 使用开发者工具：大多数现代浏览器都提供了开发者工具，可以用来检查WebXR的运行状态和性能指标。
  2. 减少渲染负载：优化3D模型，减少多边形数量，使用纹理压缩，避免不必要的渲染循环。
  3. 异步加载资源：使用Promise或async/await异步加载3D模型和纹理，以减少初始加载时间。
  4. 使用WebXR设备API：直接使用WebXR设备API可以更精细地控制XR会话，从而提高性能。

示例代码

// 异步加载3D模型
async function loadModel() {
    const loader = new THREE.GLTFLoader();
    const model = await loader.loadAsync('path/to/model.gltf');
    scene.add(model.scene);
}

loadModel();

代码解释

  • 异步加载：使用async/await语法异步加载3D模型，避免阻塞主线程，提高加载速度和用户体验。

通过以上步骤和技巧，你可以构建一个基本的VR场景，使用Web组件增强AR体验，并对WebXR应用进行调试和性能优化。这些实践将帮助你创建更加沉浸和交互式的XR体验。

WebXR：最佳实践与未来趋势

跨设备的兼容性策略

在WebXR开发中，跨设备兼容性是至关重要的。不同的设备，如VR头盔、AR眼镜、手机、桌面浏览器等，可能支持不同的WebXR特性。为了确保WebXR应用能够在各种设备上无缝运行，开发者需要采取一系列策略来检测和适应设备能力。

检测设备能力

// 检测WebXR是否可用
if ('xr' in navigator) {
  console.log('WebXR is supported');
} else {
  console.log('WebXR is not supported');
}

// 检测设备是否支持特定的XR模式
const sessionInit = {
  requiredFeatures: ['local-floor', 'bounded-floor'],
  optionalFeatures: ['hand-tracking']
};

navigator.xr.isSessionSupported('immersive-vr', sessionInit)
  .then(supported => {
    if (supported) {
      console.log('Immersive VR session is supported');
    } else {
      console.log('Immersive VR session is not supported');
    }
  });

适应设备特性

let session = null;

function startSession() {
  navigator.xr.requestSession('immersive-vr', sessionInit)
    .then(newSession => {
      session = newSession;
      session.addEventListener('end', onSessionEnd);
      session.start();
    });
}

function onSessionEnd() {
  session.removeEventListener('end', onSessionEnd);
  session = null;
}

在上述代码中，我们首先检查设备是否支持immersive-vr模式，如果支持，我们就请求一个XR会话。会话开始后，我们监听会话结束事件，以便在会话结束时进行适当的清理。

性能优化与用户体验

WebXR应用的性能优化和用户体验紧密相关。优化性能不仅可以减少延迟，提高渲染速度，还能延长电池寿命，减少设备过热，从而提升用户体验。

减少渲染负载

使用空间分区和对象剔除技术可以显著减少渲染负载。例如，只渲染用户视线范围内的对象，或者在对象被遮挡时剔除渲染。

// 使用空间分区
let spatialPartition = new THREE.SpatialPartition();

// 添加对象到空间分区
spatialPartition.addObject(object);

// 在渲染前检查对象是否在视线范围内
spatialPartition.update();

function render() {
  spatialPartition.visibleObjects.forEach(object => {
    // 渲染可见对象
    renderer.render(scene, camera);
  });
}

提升交互响应

WebXR应用中的交互响应是用户体验的关键。使用WebXR的input API可以获取控制器的输入状态，从而实现更流畅的交互。

// 监听控制器输入
session.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  if (inputSource.targetRayMode === 'tracked-pointer') {
    console.log('Controller is now selecting');
  }
});

WebXR与Web组件的未来发展方向

WebXR与Web组件的结合，将为Web开发带来新的可能性。Web组件允许开发者创建可重用的、封装的HTML标签，这将使得XR应用的构建更加模块化和高效。

WebXR组件化

未来的WebXR应用可能由一系列XR组件构成，每个组件负责一个特定的功能，如渲染一个3D模型，处理用户输入，或者提供物理模拟。

<!-- 使用WebXR组件 -->
<xr-model src="model.gltf"></xr-model>
<xr-input type="controller"></xr-input>
<xr-physics></xr-physics>

WebXR与Web组件的标准化

随着WebXR和Web组件的标准化，开发者将能够更轻松地在不同的XR平台和设备上部署应用。标准化的API和组件将减少开发者的负担，使得他们能够专注于应用的创新和用户体验的提升。

结合AI与XR

未来的WebXR应用可能还会结合AI技术，如自然语言处理、计算机视觉等，以提供更智能、更个性化的体验。例如，一个AR应用可能能够识别用户的声音命令，或者分析用户的环境，以提供更准确的AR内容。

// 使用AI识别用户命令
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';

recognition.onresult = (event) => {
  const command = event.results[event.results.length - 1][0].transcript;
  if (command === 'show model') {
    // 显示3D模型
    model.visible = true;
  }
};

在这个例子中，我们使用了webkitSpeechRecognition API来识别用户的语音命令。当用户说“show model”时，我们就显示3D模型。

结论

WebXR与Web组件的结合，将使得XR应用的开发更加模块化、标准化，同时也将为应用的创新和用户体验的提升提供新的可能性。开发者需要关注跨设备的兼容性策略，以及性能优化和用户体验的提升，以构建出优秀的XR应用。
在这里插入图片描述

标签：Web,26,07,会话,WebXR,组件,session,XR
From： https://blog.csdn.net/chenjj4003/article/details/143723721

相关文章

  • 应急响应-知攻善防web3
    应急响应-知攻善防web3前景需要：小苕在省护值守中，在灵机一动情况下把设备停掉了，甲方问：为什么要停设备？小苕说：我第六感告诉我，这机器可能被黑了。这是他的服务器，请你找出以下内容作为通关条件：Windows:administrator/xj@1234561.请输入攻击者第一个ip地址:192.168.75.129在p......
  • WebXR：虚拟现实(VR)基础理论_2024-07-26_15-18-02.Tex
    WebXR：虚拟现实(VR)基础理论WebXR：虚拟现实(VR)基础理论WebXR简介WebXR的历史与发展WebXR是WebXRDeviceAPI的简称，它是一个用于在网页上创建沉浸式虚拟现实(VR)和增强现实(AR)体验的API。WebXR的目标是简化开发者在不同设备和平台上创建XR体验的过程，提供一个......
  • 一、机器学习算法与实践_07支持向量机与集成学习算法笔记
    1支持向量机1.1定义SVM（SupportVectorMachine，即：支持向量机）是一种监督学习算法，主要用于分类问题，但也可用于回归分析（称为支持向量回归，SupportVectorRegression，简称SVR）1.2核心思想最大间隔原则：SVM试图找到一个超平面（在二维空间中是一条直线，在三维空间中是一个平面，在更......
  • 力扣刷题——3261. 统计满足 K 约束的子字符串数量 II
    看了题目的两个初始用例，感觉能用前缀和和滑动窗口来解决，前缀和设定为从下标0到当前位置所有符合条件的答案数量，于是先写了一个：vector<longlong>countKConstraintSubstrings(strings,intk,vector<vector<int>>&queries){intn=s.size();vector<longlong>pre......
  • 在webstorm里面使用prettier
    1.安装Prettierbash复制代码npminstall--save-devprettier2.创建Prettier配置文件在项目根目录下创建一个.prettierrc文件来定义Prettier的代码风格规则。以下是一个简单的Prettier配置文件示例：json复制代码{"semi":false,//不加分号......
  • [开题报告]基于javaweb的宠物医院平台dz56j9计算机毕业设计源码、研究背景、意义、目
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着人们生活水平的提高和城市化进程的加速，宠物已成为许多家庭的重要成员。宠物数量的增加带动了宠物相关产业的发展，其中宠物医院作为宠物健康保障的......
  • 2024年全新WebGIS开发学习方法
    现在每天都有越来越多的企业依靠与地理信息位置相关的数据来改善运营和增加利润，包括：客户位置、货物位置等，这些数据信息现在已经成为许多业务逻辑中不可或缺的一部分。但是，很少有人同时会GIS和编程，程序员分为很多种，但是GIS开发通常是指前端+GIS开发，大部分做前端的程序员，不会G......
  • springboot毕设基于JavaWeb的校园点餐平台源码+论文+部署
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、研究背景随着校园数字化建设的不断推进以及学生生活节奏的加快，传统的校园餐饮模式面临着诸多挑战。目前，校园内餐饮需求多样且分散，学生在点餐过程中往往需......
  • Web服务器（Linux）
    www简介Web网络服务也叫WWW(WorldWideWeb全球信息广播)万维网服务，一般是指能够让用户通过浏览器访问到互联网中文档等资源的服务Web网络服务是一种被动访问的服务程序，即只有接收到互联网中其他主机发出的请求后才会响应，最终用于提供服务程序的Web服务器会通过HTTP（超......
  • 【Java Web】JSTL及其核心库介绍 JSTL函数
    文章目录JSTL介绍核心库表达式控制\<c:out>\<c:set>\<c:remove>\<c:catch>流程控制\<c:if>\<c:choose>循环标签\<c:forEach>URL标签\<c:import>\<c:url>\<c:param>\<c:redirect>格式化JSTL函数JSTL介绍JSTL（JavaSer......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99