文章中使用到的案例图片都来源于:Humus - Textures
里面有很多免费的资源,可以直接下载,每个资源里面都提供6个不同方位的图片,我们通过threejs稍微处理一下,就能实现以下3D效果的场景了。
文章来源地址https://www.toymoban.com/news/detail-765451.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>
文章来源:https://www.toymoban.com/news/detail-765451.html
到了这里,关于three.js实战模拟VR全景视图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!