google glb 模型的 webXR 演示

最新推荐文章于 2024-03-06 16:48:09 发布

Android学习小分队

最新推荐文章于 2024-03-06 16:48:09 发布

阅读量650

点赞数 1

分类专栏： Android AR glb 文章标签： javascript 开发语言 ecmascript android

本文链接：https://blog.csdn.net/m0_56144365/article/details/126341144

版权

演示链接 - mritunjay.vercel.app/dog

（webXR 目前仅在 android for chrome 中支持）

以前有 webVR，现在被新的 webXR api 弃用。这里的 XR 代表它提供的混合现实功能。webXR api 仅处理用于 3D 模型渲染和操作的会话时间、调度和周围环境信息，我们将使用threejs。

我将假设您至少具备 3D 的基本知识，并且对 JavaScript 有一定的熟练程度。

快速开始在您的项目 yarn add three 中为 3d 模型添加 threejs 模块，我们使用的是 google glb 格式的 beagle(dog) 模型。您可以从storage.googleapis.com/ar-answers-in-search 下载它。

首先，我们将初始化一些向前推进的变量，我们将为它赋值

// index.js component file
import React from 'react';
import * as THREE from 'three';


export function BeagleARView() {
  let renderer = null;
  let scene = null;
  let camera = null;
  let model = null;
  let mixer = null;
  let action = null;
  let reticle = null;
  let lastFrame = Date.now();
  let spotLight;

  // light variables
  let lightSpotColor = 0xDDDDDD;
  let lightSpotIntensity = 0.7;

我们将在这里添加一个初始化函数来更新值，然后我们将了解一些使用threejs的3D基础知识。关于threejs的事情：

场景：场景就像虚拟空间，具有坐标信息并设置渲染的内容和位置。因此，我们可以添加多个对象（3D 模型）、灯光并移除它们。
渲染器：它显示/绘制场景。Threejs 使用 webGL 进行渲染和图像处理。
相机：有多种类型的相机。我们将使用透视相机，它可以根据您的观察点工作并根据观察位置改变对象大小。

// inside BeagleARView component 
  const initScene = (gl, session) => {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
      75, // fov (angle, field of view)
      window.innerWidth / window.innerHeight, // aspect
      0.1, // frustum near length
      1000, // frustu

最低0.47元/天解锁文章