当前位置：首页 > news >正文

three.js实战模拟VR全景视图

news 2025/8/8 9:48:57

文章中使用到的案例图片都来源于：Humus - Textures
里面有很多免费的资源，可以直接下载，每个资源里面都提供6个不同方位的图片，我们通过threejs稍微处理一下，就能实现以下3D效果的场景了。
在这里插入图片描述

<template><div id="view-3D"></div>
</template><script setup>
import {  onMounted } from "vue";
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'onMounted(() => {init()renderScene()
})
// 定义场景
const scene = new THREE.Scene()
// 创建一个能看场景的相机
const camare = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 定义渲染器
const renderer = new THREE.WebGLRenderer()
// 轨道控制器
let orbitControls
const init = () => {// 给场景设置纹理贴图const texture = new THREE.CubeTextureLoader().setPath('/assets/').load(['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg'])scene.background = texture// 设置相机的位置camare.position.set(0, 0, 300)// 设置相机看的方向camare.lookAt(scene.position)// 设置要渲染的场景大小renderer.setSize(window.innerWidth, window.innerHeight)// 把相机添加到场景中scene.add(camare)// 在页面元素上画出元素document.getElementById('view-3D').appendChild(renderer.domElement)// 创建轨道控制器，使鼠标前后左右上下方位移动orbitControls = new OrbitControls(camare, renderer.domElement)
}
const renderScene = () => {// 创建动画刷新机制  请求再次执行渲染函数render，渲染下一帧requestAnimationFrame(renderScene)// 更新控制器orbitControls.update()// 最后一步渲染场景renderer.render(scene, camare)
}
</script>