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

文章中使用到的案例图片都来源于: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>
相关推荐
sunbyte2 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
coding随想37 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录11 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20911 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode11 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互