1、按照依赖
以来主要使用的
npm i three //安装three.js依赖
npm install file-loader //安装文件装载器
npm install url-loader //安装url装载器
2、原理分析
主要的原理是将模型放入一个透明的圆球中,然后移动鼠标,可以看到不同的场景对应的模型场景。
其中因为是.hdr文件格式,主要使用的是RGBELoader加载器。不同的模型文件使用不同的加载器。
3、代码案例
以下的代码案例在安装之后,直接可以使用,具体的开发步骤还是前面加载和基础步骤一样:
第一步:实例化场景、相机。
第二步:实例化模型,并将模型加载到场景。
第三步:场景渲染,并将场景加载到对样的div子元素中。
4、参考文档
喝水不忘挖井人。以下是自己查看的项目的文档,可以做借鉴,其中的.hdr文件就是从文档提供的链接地址下载的。
vue 项目使用three.js 实现3D看房效果_three 租房 怎么做 前端-CSDN博客
5、代码案例
<template>
<main ref="containerRef" class="container">
</main>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";//rebe加载器
const containerRef = ref()
//设置场景宽度,高度
const width = window.innerWidth, height = window.innerHeight;
let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(
75,window.innerWidth/window.innerHeight,0.1,1000
)
//设置相机的位置
camera.position.set(0, 0, 1)
let renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
//添加全景展示
const geometry = new THREE.SphereGeometry(5,32,32)
const loader = new RGBELoader()
loader.loadAsync("src/assets/file/house/house02.hdr").then((texture)=>{
const material = new THREE.MeshBasicMaterial({map:texture})
const sphere = new THREE.Mesh(geometry,material)
sphere.geometry.scale(1,1,-1)
scene.add(sphere)
})
//设置监听事件
const controls = new OrbitControls(camera,renderer.domElement)
//绘制画布
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera)
}
onMounted(()=>{
//增加监听事件
controls.addEventListener('change',function(){
renderer.render(scene,camera)
})
//将渲染元素加载到画面
containerRef.value.appendChild(renderer.domElement);
render()
})
</script>
<style scoped lang="less">
.container{
cursor: pointer;
width:500px;
height:500px;
}
</style>