three.js入門篇8 之 實現(xiàn)VR看房

初始化項目

• vue create vr360-vue3
• yarn add three

three.js 立方體實現(xiàn)VR看房

code

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

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from "three"
// 導(dǎo)入軌道控制器 - 控制物體的左右上下移動（ 可以設(shè)置xyz軸 ）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 初始化場景
const scene = new THREE.Scene()
// 初始化相機(jī)
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 設(shè)置相機(jī)位置 x y z
camera.position.set(0,0,10) 
// 把相機(jī)添加到場景之中
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; // 設(shè)置物體投影陰影
// 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) // 旋轉(zhuǎn)中心
  //     // 基礎(chǔ)材質(zhì)
  //   boxMaterials.push(
  //     new THREE.MeshBasicMaterial({
  //       color:'#ffff00',
  //       map:texttrue
  //     })
  //   )
  // } else {
  //     // 基礎(chǔ)材質(zhì)
    boxMaterials.push(
      new THREE.MeshBasicMaterial({
        color:'#ffff00',
        map:texttrue
      })
    )
  // }
})
const mesh = new THREE.Mesh(geometry,boxMaterials)
mesh.geometry.scale(1,1,-1) // 進(jìn)入內(nèi)部
scene.add(mesh)


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

// 創(chuàng)建軌道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐標(biāo)軸輔助器
// const axesHelper = new THREE.AxesHelper( 5 );
// scene.add( axesHelper );

// 渲染函數(shù) - 每一幀渲染一次
function render() {
  // 渲染下一幀 的時候 會調(diào)用 animate 函數(shù)
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}

// 將webgl渲染的canvas內(nèi)容添加到div上
const container = ref(null)
// dom節(jié)點掛載之后 渲染dom節(jié)點
onMounted(()=>{
  container.value.appendChild(renderer.domElement)
  // 設(shè)置控制器阻尼，讓控制器更具有真是效果
  controls.enableDamping = true
  render()
})



</script>

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

效果

three.js 球體HDR實現(xiàn)VR看房

code

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

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from "three"
// 導(dǎo)入軌道控制器 - 控制物體的左右上下移動（ 可以設(shè)置xyz軸 ）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 初始化場景
const scene = new THREE.Scene()
// 初始化相機(jī)
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 設(shè)置相機(jī)位置 x y z
camera.position.set(0,0,10) 
// 把相機(jī)添加到場景之中
scene.add( camera );

// 球體
const geometry = new THREE.SphereGeometry(10,40,40)
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
// 設(shè)置hdr環(huán)境圖
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) // 進(jìn)入內(nèi)部 反過來
  scene.add(sphere)
})

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

// 創(chuàng)建軌道控制器
const controls = new OrbitControls(camera,renderer.domElement)

// 渲染函數(shù) - 每一幀渲染一次
function render() {
  // 渲染下一幀 的時候 會調(diào)用 animate 函數(shù)
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}

// 將webgl渲染的canvas內(nèi)容添加到div上
const container = ref(null)
// dom節(jié)點掛載之后 渲染dom節(jié)點
onMounted(()=>{
  container.value.appendChild(renderer.domElement)
  // 設(shè)置控制器阻尼，讓控制器更具有真是效果
  controls.enableDamping = true
  render()
})



</script>

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

效果

文章來源地址http://www.zghlxwxcb.cn/news/detail-736110.html

到了這里，關(guān)于three.js入門篇8 之 實現(xiàn)VR看房的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！