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

说学逗唱攻城狮2023-12-24 10:34

文章中使用到的案例图片都来源于：Humus - Textures

里面有很多免费的资源，可以直接下载，每个资源里面都提供6个不同方位的图片，我们通过threejs稍微处理一下，就能实现以下3D效果的场景了。

html 复制代码

<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>