threejs视频教程学习(6):vr看房
前言
实现
基本原理
现创建一个立方体,将摄像机放在立方体内部。将立方体6个面贴上房子的贴图。
基础设置
<template> <div id="container"></div> </template> <script setup lang="ts"> import { onMounted } from vue; import * as THREE from three; // 引入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls; onMounted(() => { // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); // 设置相机位置 camera.position.set(100, 100, 100); // 设置相机视锥体的长宽比 camera.aspect = window.innerWidth / window.innerHeight; // 更新相机投影矩阵 camera.updateProjectionMatrix(); // 将相机添加到场景中 scene.add(camera); // 初始化渲染器 const renderer = new THREE.WebGLRenderer({ antialias: true // 抗锯齿 }); // 设置渲染的尺寸 renderer.setSize(window.innerWidth, window.innerHeight); // 使用渲染器,通过相机将场景渲染 renderer.render(scene, camera); // 将渲染的内容输出到dom元素中 document.getElementById(container)?.appendChild(renderer.domElement); // 监听窗口的变化 window.addEventListener(resize, () => { // 重新设置 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // 创建轨道控制器 const controls = new OrbitControls(camera, renderer.domElement); // 设置控制器阻尼 controls.enableDamping = true; // 创建渲染函数 const render = () => { controls.update(); renderer.render(scene, camera); requestAnimationFrame(render); }; render(); /** *************vr看房的后续逻辑************* */ }); </script>
创建立方体并贴图
创建立方体
// 创建并添加一个立方体 const geometry = new THREE.BoxGeometry(3, 3, 3); // 几何体 const material = new THREE.MeshBasicMaterial({ color: 0x11abc3 }); // 材质 const cube = new THREE.Mesh(geometry, material); // 物体 scene.add(cube);
颜色贴图
//颜色贴图 const baseUrl = ../../../../public/imgs/living/; const imgList = [4_l.jpg, 4_r.jpg, 4_u.jpg, 4_d.jpg, 4_b.jpg, 4_f.jpg]; const boxMaterial = []; imgList.forEach(item => { // 加载纹理 const texture = new THREE.TextureLoader().load(baseUrl + item); // 创建材质 boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture })); }); cube.material = boxMaterial;
设置相机的观察方向 主要是通过修改物体的z轴来实现
// 将物体反转,是视觉到物体内部。核心是将z轴设置为-1 cube.geometry.scale(1, 1, -1);
中间这块的纹理贴图有问题,简单处理一下
imgList.forEach(item => { // 加载纹理 const texture = new THREE.TextureLoader().load(baseUrl + item); // 调整上下两个贴图 if (item === 4_u.jpg || item === 4_d.jpg) { // 旋转纹理的角度 texture.rotation = Math.PI; // 设置纹理旋转中心点为平面向量中心点 texture.center = new THREE.Vector2(0.5, 0.5); // 创建材质 boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture })); } else { // 创建材质 boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture })); } });
动图太大了,就放一个普通图 补充: 如果是hdr全景图的话,可以创建一个球体,将全景图映射到球体表面。 视频中并没有讲解房间直接的切换,原理应该是有多个物体,通过点击传送点的方式,将摄像头放到另一个物体中。