Three.js 完全学习指南（十四）VR/AR 应用开发

前言

大家好，我是鲫小鱼。是一名不写前端代码的前端工程师，热衷于分享非前端的知识，带领切图仔逃离切图圈子，欢迎关注我，微信公众号：《鲫小鱼不正经》。欢迎点赞、收藏、关注，一键三连！！

VR/AR 应用开发

在 Three.js 中，我们可以使用 WebXR API 来创建 VR/AR 应用。本章将介绍如何使用 Three.js 开发 VR/AR 应用，包括设备交互、空间定位和手势识别等。

WebXR 基础

1. 场景设置

图 14.1: VR 场景示例

// VR 场景管理器
class VRSceneManager {
    constructor() {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(
            70,
            window.innerWidth / window.innerHeight,
            0.01,
            1000
        );

        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.xr.enabled = true;
        document.body.appendChild(this.renderer.domElement);

        this.controllers = [];
        this.setupVR();
    }

    setupVR() {
        // 添加控制器
        this.controller1 = this.renderer.xr.getController(0);
        this.controller2 = this.renderer.xr.getController(1);
        this.scene.add(this.controller1);
        this.scene.add(this.controller2);

        // 添加控制器模型
        this.controller1.add(this.buildControllerModel());
        this.controller2.add(this.buildControllerModel());

        // 添加控制器事件
        this.controller1.addEventListener('selectstart', this.onSelectStart.bind(this));
        this.controller1.addEventListener('selectend', this.onSelectEnd.bind(this));
        this.controller2.addEventListener('selectstart', this.onSelectStart.bind(this));
        this.controller2.addEventListener('selectend', this.onSelectEnd.bind(this));

        // 添加控制器移动事件
        this.controller1.addEventListener('squeezestart', this.onSqueezeStart.bind(this));
        this.controller1.addEventListener('squeezeend', this.onSqueezeEnd.bind(this));
        this.controller2.addEventListener('squeezestart', this.onSqueezeStart.bind(this));
        this.controller2.addEventListener('squeezeend', this.onSqueezeEnd.bind(this));
    }

    buildControllerModel() {
        const geometry = new THREE.BoxGeometry(0.02, 0.02, 0.02);
        const material = new THREE.MeshBasicMaterial({ color: 0x808080 });
        return new THREE.Mesh(geometry, material);
    }

    onSelectStart(event) {
        const controller = event.target;
        const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);

        controller.add(cube);
        controller.userData.selected = cube;
    }

    onSelectEnd(event) {
        const controller = event.target;
        if (controller.userData.selected) {
            controller.remove(controller.userData.selected);
            controller.userData.selected = null;
        }
    }

    onSqueezeStart(event) {
        const controller = event.target;
        controller.userData.squeezed = true;
    }

    onSqueezeEnd(event) {
        const controller = event.target;
        controller.userData.squeezed = false;
    }

    update() {
        // 更新控制器状态
        this.controllers.forEach(controller => {
            if (controller.userData.squeezed) {
                // 处理挤压状态
            }
        });
    }

    render() {
        this.renderer.render(this.scene, this.camera);
    }
}

2. AR 场景设置

// AR 场景管理器
class ARSceneManager {
    constructor() {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(
            70,
            window.innerWidth / window.innerHeight,
            0.01,
            1000
        );

        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.xr.enabled = true;
        document.body.appendChild(this.renderer.domElement);

        this.setupAR();
    }

    setupAR() {
        // 添加 AR 控制器
        this.controller = this.renderer.xr.getController(0);
        this.scene.add(this.controller);

        // 添加点击事件
        this.controller.addEventListener('selectstart', this.onSelectStart.bind(this));
        this.controller.addEventListener('selectend', this.onSelectEnd.bind(this));

        // 添加平面检测
        this.setupPlaneDetection();
    }

    setupPlaneDetection() {
        this.planeGeometry = new THREE.PlaneGeometry(1, 1);
        this.planeMaterial = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            transparent: true,
            opacity: 0.5
        });

        this.plane = new THREE.Mesh(this.planeGeometry, this.planeMaterial);
        this.plane.visible = false;
        this.scene.add(this.plane);
    }

    onSelectStart(event) {
        const controller = event.target;
        const position = new THREE.Vector3();
        controller.getWorldPosition(position);

        // 创建 AR 对象
        this.createARObject(position);
    }

    onSelectEnd(event) {
        // 处理选择结束事件
    }

    createARObject(position) {
        const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const cube = new THREE.Mesh(geometry, material);

        cube.position.copy(position);
        this.scene.add(cube);
    }

    update() {
        // 更新 AR 状态
    }

    render() {
        this.renderer.render(this.scene, this.camera);
    }
}

空间定位

1. 空间锚点

// 空间锚点管理器
class SpatialAnchorManager {
    constructor(scene) {
        this.scene = scene;
        this.anchors = new Map();
    }

    createAnchor(position, rotation) {
        const anchor = new THREE.Object3D();
        anchor.position.copy(position);
        anchor.rotation.copy(rotation);

        const id = Math.random().toString(36).substr(2, 9);
        this.anchors.set(id, anchor);
        this.scene.add(anchor);

        return id;
    }

    attachObject(anchorId, object) {
        const anchor = this.anchors.get(anchorId);
        if (anchor) {
            anchor.add(object);
        }
    }

    detachObject(anchorId, object) {
        const anchor = this.anchors.get(anchorId);
        if (anchor) {
            anchor.remove(object);
        }
    }

    removeAnchor(anchorId) {
        const anchor = this.anchors.get(anchorId);
        if (anchor) {
            this.scene.remove(anchor);
            this.anchors.delete(anchorId);
        }
    }
}

2. 空间映射

// 空间映射管理器
class SpatialMappingManager {
    constructor(scene) {
        this.scene = scene;
        this.meshes = new Map();
    }

    createMesh(geometry, position, rotation) {
        const material = new THREE.MeshBasicMaterial({
            color: 0x808080,
            wireframe: true
        });

        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.copy(position);
        mesh.rotation.copy(rotation);

        const id = Math.random().toString(36).substr(2, 9);
        this.meshes.set(id, mesh);
        this.scene.add(mesh);

        return id;
    }

    updateMesh(id, geometry) {
        const mesh = this.meshes.get(id);
        if (mesh) {
            mesh.geometry.dispose();
            mesh.geometry = geometry;
        }
    }

    removeMesh(id) {
        const mesh = this.meshes.get(id);
        if (mesh) {
            this.scene.remove(mesh);
            mesh.geometry.dispose();
            mesh.material.dispose();
            this.meshes.delete(id);
        }
    }
}

手势识别

1. 手势检测器

// 手势检测器
class GestureDetector {
    constructor() {
        this.gestures = new Map();
        this.setupGestures();
    }

    setupGestures() {
        // 定义手势
        this.gestures.set('pinch', {
            start: this.onPinchStart.bind(this),
            update: this.onPinchUpdate.bind(this),
            end: this.onPinchEnd.bind(this)
        });

        this.gestures.set('rotate', {
            start: this.onRotateStart.bind(this),
            update: this.onRotateUpdate.bind(this),
            end: this.onRotateEnd.bind(this)
        });
    }

    onPinchStart(event) {
        // 处理捏合开始
    }

    onPinchUpdate(event) {
        // 处理捏合更新
    }

    onPinchEnd(event) {
        // 处理捏合结束
    }

    onRotateStart(event) {
        // 处理旋转开始
    }

    onRotateUpdate(event) {
        // 处理旋转更新
    }

    onRotateEnd(event) {
        // 处理旋转结束
    }
}

2. 手势控制器

// 手势控制器
class GestureController {
    constructor(scene, camera) {
        this.scene = scene;
        this.camera = camera;
        this.detector = new GestureDetector();
        this.selectedObject = null;

        this.setupEvents();
    }

    setupEvents() {
        // 添加手势事件监听
        this.detector.gestures.forEach((handlers, gesture) => {
            switch (gesture) {
                case 'pinch':
                    this.setupPinchEvents(handlers);
                    break;
                case 'rotate':
                    this.setupRotateEvents(handlers);
                    break;
            }
        });
    }

    setupPinchEvents(handlers) {
        // 设置捏合事件
    }

    setupRotateEvents(handlers) {
        // 设置旋转事件
    }

    selectObject(object) {
        this.selectedObject = object;
    }

    deselectObject() {
        this.selectedObject = null;
    }

    update() {
        // 更新手势状态
    }
}

实战：创建 VR/AR 应用

让我们创建一个简单的 VR/AR 应用：

// 创建 VR 场景
const vrScene = new VRSceneManager();

// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
vrScene.scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
vrScene.scene.add(directionalLight);

// 添加空间锚点管理器
const anchorManager = new SpatialAnchorManager(vrScene.scene);

// 添加手势控制器
const gestureController = new GestureController(vrScene.scene, vrScene.camera);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 更新 VR 场景
    vrScene.update();

    // 更新手势控制器
    gestureController.update();

    // 渲染场景
    vrScene.render();
}

animate();

// 窗口大小改变时更新
window.addEventListener('resize', () => {
    vrScene.camera.aspect = window.innerWidth / window.innerHeight;
    vrScene.camera.updateProjectionMatrix();
    vrScene.renderer.setSize(window.innerWidth, window.innerHeight);
});

练习

1. 创建一个基础的 VR 场景
2. 实现空间定位和锚点
3. 添加手势识别和交互
4. 实现 AR 场景和平面检测

下一步学习

在下一章中，我们将学习：

• 性能监控与调试
• 性能优化技巧
• 内存管理
• 渲染优化

最后感谢阅读！欢迎关注我，微信公众号：《鲫小鱼不正经》。欢迎点赞、收藏、关注，一键三连！！！