three.js入门篇8 之 实现VR看房

three.js入门篇8 之 实现VR看房

初始化项目

• vue create vr360-vue3
• yarn add three

three.js 立方体实现VR看房

code

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import {
    
     ref, onMounted } from 'vue'
import * as THREE from "three"
// 导入轨道控制器 - 控制物体的左右上下移动（ 可以设置xyz轴 ）
import {
    
     OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 初始化场景
const scene = new THREE.Scene()
// 初始化相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 立方体
const geometry = new THREE.BoxGeometry( 40, 40, 40)
// const materials = new THREE.MeshBasicMaterial({color:0x00ff00})
// const mesh = new THREE.Mesh(geometry,materials)
// mesh.castShadow = true; // 设置物体投影阴影
// scene.add(mesh)

// 立方体纹理加载
let arr = ['home1_left','home1_right','home1_top','home1_bottom','home1_front','home1_back'];
let boxMaterials = []
arr.forEach(item=>{
    
    
  const texttrue = new THREE.TextureLoader().load(`./img/living/${
      
      item}.jpg` ) // 纹理贴纸
  // if ( item === 'home1_top' || item === 'home1_bottom' ) {
    
    
  //   texttrue.rotation = Math.PI;
  //   texttrue.center = new THREE.Vector2(0.5,0.5) // 旋转中心
  //     // 基础材质
  //   boxMaterials.push(
  //     new THREE.MeshBasicMaterial({
    
    
  //       color:'#ffff00',
  //       map:texttrue
  //     })
  //   )
  // } else {
    
    
  //     // 基础材质
    boxMaterials.push(
      new THREE.MeshBasicMaterial({
    
    
        color:'#ffff00',
        map:texttrue
      })
    )
  // }
})
const mesh = new THREE.Mesh(geometry,boxMaterials)
mesh.geometry.scale(1,1,-1) // 进入内部
scene.add(mesh)


// 设置渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
// const axesHelper = new THREE.AxesHelper( 5 );
// scene.add( axesHelper );

// 渲染函数 - 每一帧渲染一次
function render() {
    
    
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}

// 将webgl渲染的canvas内容添加到div上
const container = ref(null)
// dom节点挂载之后 渲染dom节点
onMounted(()=>{
    
    
  container.value.appendChild(renderer.domElement)
  // 设置控制器阻尼，让控制器更具有真是效果
  controls.enableDamping = true
  render()
})



</script>

<style lang="scss" scoped>
* {
    
    
  padding:0;
  margin: 0;
}
.container {
    
    
  height:100;
  width:100%;
  background:'#f0f0f0'
}
</style>

效果

three.js 球体HDR实现VR看房

code

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import {
    
     ref, onMounted } from 'vue'
import * as THREE from "three"
// 导入轨道控制器 - 控制物体的左右上下移动（ 可以设置xyz轴 ）
import {
    
     OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 初始化场景
const scene = new THREE.Scene()
// 初始化相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 球体
const geometry = new THREE.SphereGeometry(10,40,40)
import {
    
    RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
// 设置hdr环境图
const rgbeLoader = new RGBELoader()
rgbeLoader.load("./img/hdr/001.hdr",(texture)=>{
    
    
  const materials = new THREE.MeshBasicMaterial({
    
    
    map:texture,
    color:'#ffff00',
  })
  const sphere = new THREE.Mesh(geometry,materials)
  sphere.geometry.scale(1,1,-1) // 进入内部 反过来
  scene.add(sphere)
})

// 设置渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)

// 渲染函数 - 每一帧渲染一次
function render() {
    
    
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}

// 将webgl渲染的canvas内容添加到div上
const container = ref(null)
// dom节点挂载之后 渲染dom节点
onMounted(()=>{
    
    
  container.value.appendChild(renderer.domElement)
  // 设置控制器阻尼，让控制器更具有真是效果
  controls.enableDamping = true
  render()
})



</script>

<style lang="scss" scoped>
* {
    
    
  padding:0;
  margin: 0;
}
.container {
    
    
  height:100;
  width:100%;
  background:'#f0f0f0'
}
</style>

效果