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>
相关推荐
轻语呢喃4 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想17 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷18 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson22 分钟前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js