ThreeJS-VR看房（二十五）

2023-10-20 03:50
文章标签 二十五 threejs vr 看房

本文主要是介绍ThreeJS-VR看房（二十五），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 效果图：

素材：

六面图

https://www.aliyundrive.com/s/ana5vocK53x

点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

hdr文件

链接: https://pan.baidu.com/s/1r9OUJWb_hPcJhG7erNIUhg

提取码: 6c6z

复制这段内容后打开百度网盘手机App，操作更方便哦

VR看房案例一

关键代码：

//创建一个半径为1，经纬度分段数位20的球
    const boxBufferGeometry = new THREE.BoxBufferGeometry(5, 5, 5);
    //纹理加载器
    let textureLoader = new THREE.TextureLoader();
    const pngs = [
      '4_l.jpg',
      '4_r.jpg',
      '4_u.jpg',
      '4_d.jpg',
      '4_b.jpg',
      '4_f.jpg'
    ];
    
    let materials = [];
    pngs.forEach((item, index) => {
        let cubeTextureLoader =  textureLoader.load(`three/VR/${item}`);
        if(index == 3 || index == 2){
            cubeTextureLoader.rotation= Math.PI;
            cubeTextureLoader.center = new THREE.Vector2(0.5,0.5)
        }
        materials.push(new THREE.MeshStandardMaterial({map: cubeTextureLoader}))
    })

完整代码：

<template>
  <div id="three_div"></div>
</template>
  
  <script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  name: "HOME",
  components: {
    // vueQr,
    // glHome,
  },
  data() {
    return {};
  },
  mounted() {
    //使用控制器控制3D拖动旋转OrbitControls
    //控制3D物体移动

    //1.创建场景
    const scene = new THREE.Scene();
    console.log(scene);

    //2.创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    //设置相机位置
    camera.position.set(0, 0, 10);
    //将相机添加到场景
    scene.add(camera);
    //添加物体
    //创建一个半径为1，经纬度分段数位20的球
    const boxBufferGeometry = new THREE.BoxBufferGeometry(5, 5, 5);
    //纹理加载器
    let textureLoader = new THREE.TextureLoader();
    const pngs = [
      '4_l.jpg',
      '4_r.jpg',
      '4_u.jpg',
      '4_d.jpg',
      '4_b.jpg',
      '4_f.jpg'
    ];
    
    let materials = [];
    pngs.forEach((item, index) => {
        let cubeTextureLoader =  textureLoader.load(`three/VR/${item}`);
        if(index == 3 || index == 2){
            cubeTextureLoader.rotation= Math.PI;
            cubeTextureLoader.center = new THREE.Vector2(0.5,0.5)
        }
        materials.push(new THREE.MeshStandardMaterial({map: cubeTextureLoader}))
    })
    //根据几何体和材质创建物体
    const mesh = new THREE.Mesh(boxBufferGeometry, materials);
    mesh.geometry.scale(1,1,-1)
    //将物体加入到场景
    scene.add(mesh);
    //添加坐标轴辅助器
    // const axesHepler = new THREE.AxesHelper(5);
    // scene.add(axesHepler);
    //标准材质需要借助灯光

    //添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）
    const light = new THREE.AmbientLight(0xFFFFFF, 1);
    scene.add(light);
    //初始化渲染器
    const render = new THREE.WebGLRenderer();
    //设置渲染器的尺寸
    render.setSize(window.innerWidth, window.innerHeight);
    //使用渲染器，通过相机将场景渲染进来

    //创建轨道控制器，可以拖动,控制的是摄像头
    const controls = new OrbitControls(camera, render.domElement);
    //设置控制阻尼，让控制器有更真实的效果
    controls.enableDamping = true;

    //将webgl渲染的canvas内容添加到body上
    document.getElementById("three_div").appendChild(render.domElement);

    //渲染下一帧的时候就会调用回调函数
    let renderFun = () => {
      //更新阻尼数据
      controls.update();
      //需要重新绘制canvas画布
      render.render(scene, camera);
      //监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数
      //但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果
      window.requestAnimationFrame(renderFun);
    };
    // window.requestAnimationFrame(renderFun);
    renderFun();

    //画布全屏
    window.addEventListener("dblclick", () => {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        //document.documentElement.requestFullscreen();
        render.domElement.requestFullscreen();
      }
    });

    //监听画面变化，更新渲染画面，（自适应的大小）
    window.addEventListener("resize", () => {
      //更新摄像机的宽高比
      camera.aspect = window.innerWidth / window.innerHeight;
      //更新摄像机的投影矩阵
      camera.updateProjectionMatrix();
      //更新渲染器宽度和高度
      render.setSize(window.innerWidth, window.innerHeight);
      //设置渲染器的像素比
      render.setPixelRatio(window.devicePixelRatio);
      console.log("画面变化了");
    });
  },
  methods: {
    paush(animate) {
      animate.pause();
    },
  },
};
</script>
  
<style scoped lang="scss">
</style>
  

效果图：

VR看房案例二

关键代码：

    //创建一个半径为1，经纬度分段数位20的球
    const boxBufferGeometry = new THREE.SphereBufferGeometry(5, 50, 50);
    //纹理加载器
    let rgbeLoader = new RGBELoader();
    rgbeLoader.load('three/VR/Living.hdr', loader => {
        //纹理加载器加载图片
        const material = new THREE.MeshStandardMaterial({
            map: loader
        });
        //根据几何体和材质创建物体
        const mesh = new THREE.Mesh(boxBufferGeometry, material);
        mesh.geometry.scale(1,1,-1);
        //将物体加入到场景
        scene.add(mesh);
    })

完整代码：

<template>
  <div id="three_div"></div>
</template>
  
  <script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader"
export default {
  name: "HOME",
  components: {
    // vueQr,
    // glHome,
  },
  data() {
    return {};
  },
  mounted() {
    //使用控制器控制3D拖动旋转OrbitControls
    //控制3D物体移动

    //1.创建场景
    const scene = new THREE.Scene();
    console.log(scene);

    //2.创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    //设置相机位置
    camera.position.set(0, 0, 10);
    //将相机添加到场景
    scene.add(camera);
    //添加物体
    //创建一个半径为1，经纬度分段数位20的球
    const boxBufferGeometry = new THREE.SphereBufferGeometry(5, 50, 50);
    //纹理加载器
    let rgbeLoader = new RGBELoader();
    rgbeLoader.load('three/VR/Living.hdr', loader => {
        //纹理加载器加载图片
        const material = new THREE.MeshStandardMaterial({
            map: loader
        });
        //根据几何体和材质创建物体
        const mesh = new THREE.Mesh(boxBufferGeometry, material);
        mesh.geometry.scale(1,1,-1);
        //将物体加入到场景
        scene.add(mesh);
    })
    //添加坐标轴辅助器
    // const axesHepler = new THREE.AxesHelper(5);
    // scene.add(axesHepler);
    //标准材质需要借助灯光

    //添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）
    const light = new THREE.AmbientLight(0xFFFFFF, 1);
    scene.add(light);
    //初始化渲染器
    const render = new THREE.WebGLRenderer();
    //设置渲染器的尺寸
    render.setSize(window.innerWidth, window.innerHeight);
    //使用渲染器，通过相机将场景渲染进来

    //创建轨道控制器，可以拖动,控制的是摄像头
    const controls = new OrbitControls(camera, render.domElement);
    //设置控制阻尼，让控制器有更真实的效果
    controls.enableDamping = true;

    //将webgl渲染的canvas内容添加到body上
    document.getElementById("three_div").appendChild(render.domElement);

    //渲染下一帧的时候就会调用回调函数
    let renderFun = () => {
      //更新阻尼数据
      controls.update();
      //需要重新绘制canvas画布
      render.render(scene, camera);
      //监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数
      //但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果
      window.requestAnimationFrame(renderFun);
    };
    // window.requestAnimationFrame(renderFun);
    renderFun();

    //画布全屏
    window.addEventListener("dblclick", () => {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        //document.documentElement.requestFullscreen();
        render.domElement.requestFullscreen();
      }
    });

    //监听画面变化，更新渲染画面，（自适应的大小）
    window.addEventListener("resize", () => {
      //更新摄像机的宽高比
      camera.aspect = window.innerWidth / window.innerHeight;
      //更新摄像机的投影矩阵
      camera.updateProjectionMatrix();
      //更新渲染器宽度和高度
      render.setSize(window.innerWidth, window.innerHeight);
      //设置渲染器的像素比
      render.setPixelRatio(window.devicePixelRatio);
      console.log("画面变化了");
    });
  },
  methods: {
    paush(animate) {
      animate.pause();
    },
  },
};
</script>
  
<style scoped lang="scss">
</style>
  

效果图： 

这篇关于ThreeJS-VR看房（二十五）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/244443。

相关文章

apk反编译修改教程系列-----修改apk 解除软件限制功能 实例操作步骤解析_6【二十五】

apk反编译修改教程系列-----修改apk 解除软件限制功能 实例操作步骤解析_6【二十五】

目前很多软件都需要票票才可以使用完全的功能。纯免费的功能性app已经很少见了。 今天继续以一款app为大家来演示如何去除软件的限制功能。教程的目的主要是学习反编译的基础修改方法，了解app的修改步骤以及基础的入门修改常识。每个使用修改方法不一定适用于所有app。只是给你另外的思路与步骤参考。 反编译工具：MT**绿色版 演示apk;**清单 app
阅读更多...
VR虚拟展厅的应用场景有哪些？

VR虚拟展厅的应用场景有哪些？

虚拟展厅作为一种利用虚拟现实技术构建的三维展示空间，其应用场景广泛且多样。视创云展为企业虚拟展厅搭建提供技术支持。以下是一些主要的应用场景： 1. 博物馆和艺术展览 文物保护与展示： 在博物馆中，为了保护珍贵的文物和艺术品，许多展品被放置在专门的展览柜中，限制了观众的观赏体验。虚拟展厅通过3D建模和虚拟现实技术，可以让观众在不接触实物的情况下，全方位、多角度地观赏文物和艺术品的细节，了解
阅读更多...
【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十五）

【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十五）

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》：python零基础入门学习 《python运维脚本》： python运维脚本实践 《shell》：shell学习 《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战 《k8》从问题中去学习k8s 《docker学习》暂未更新 《ceph学习》ceph日常问题解决分享 《日志收集》ELK
阅读更多...
构建全景式智慧文旅生态：EasyCVR视频汇聚平台与AR/VR技术的深度融合实践

构建全景式智慧文旅生态：EasyCVR视频汇聚平台与AR/VR技术的深度融合实践

在科技日新月异的今天，AR（增强现实）和VR（虚拟现实）技术正以前所未有的速度改变着我们的生活方式和工作模式。而EasyCVR视频汇聚平台，作为一款基于云-边-端一体化架构的视频融合+AI智能分析平台，可以通过其强大的数据接入、处理、转码及分发能力，与AR/VR技术形成完美结合，为多个领域带来了前所未有的创新应用。 在此背景下，增强现实（AR）和虚拟现实（VR）等前沿技术结合EasyCVR平台在
阅读更多...
leetcode解题思路分析（二十五）178 - 185题

leetcode解题思路分析（二十五）178 - 185题

分数排名 编写一个 SQL 查询来实现分数排名。 如果两个分数相同，则两个分数排名（Rank）相同。请注意，平分后的下一个名次应该是下一个连续的整数值。换句话说，名次之间不应该有“间隔”。 MySQL常用窗口函数有rank, dense_rank, row_number， 区别在于第一个对同样数据会并列排行，后面的会+n，而第二个则只会+1，第三个就单纯顺序排行，没有并列关系 # Write
阅读更多...
【Unity 3D】学习笔记二十五：unity游戏脚本（五）

【Unity 3D】学习笔记二十五：unity游戏脚本（五）

克隆游戏对象 在游戏中，可能会连续出现相同的游戏对象来实现游戏的某种效果，如发射子弹。这就要用上克隆游戏对象，克隆游戏对象与创建游戏对象的呈现方式是完全一样的，但在执行效率上来讲，克隆游戏对象的效率要高。 在克隆游戏对象的代码中，需要使用Instantiate(  )方法来克隆游戏对象。不废话，先上代码。 //球体对象var obj : GameObject;function S
阅读更多...
2020-08-21 利用Graphics.DrawMeshNow绘制运行时Gizmos，VR可用，HDRP可用

2020-08-21 利用Graphics.DrawMeshNow绘制运行时Gizmos，VR可用，HDRP可用

先放效果图： 功能本身为测试用例，所以写的并不是很严谨，三角线使用的是缩放后的圆柱Mesh，黄色使用Box的Mesh，绿色使用Sphere的Mesh。 box和sphere也可以同时生成多个，但需要修改VrGizmos.cs中的两个方法DrawSphere、DrawBox，逻辑类似三角线的方法DrawSegments 放上VrGizmos.cs的源码： using System.Coll
阅读更多...
前端宝典二十五：vue2高阶用法mixin、transition、slot

前端宝典二十五：vue2高阶用法mixin、transition、slot

本文主要探讨vue2中几个高阶的用法：mixin、transition、slot 一、mixin 在 Vue 中，mixin（混入）是一种用于在多个组件之间共享代码的机制。它允许你定义可重用的选项对象，并将其混入到不同的组件中。 1、使用方法 创建一个混入对象： const myMixin = {data() {return {sharedData: '这是混入中的共享数据',};},m
阅读更多...
虚幻引擎VR游戏开发 | VR设备和术语

虚幻引擎VR游戏开发 | VR设备和术语

四款Unreal Engine默认配套按键映射的VR设备 IMC按键映射 Oculus Touch (R) Grip Axis: 代表Oculus Rift或Quest设备的右手控制器的抓握轴输入。Valve Index (R) Grip Axis: 代表Valve Index设备的右手控制器的抓握轴输入。Vive (R) Grip: 代表HTC Vive设备的右手控制器的抓握按
阅读更多...
(游戏设计草稿) 《外卖员模拟器》 (3D 科幻 角色扮演 开放世界 AI VR)

(游戏设计草稿) 《外卖员模拟器》 (3D 科幻 角色扮演 开放世界 AI VR)

游戏名称: 外卖员模拟器. 游戏类型: 3D, 科幻, 角色扮演 (RPG), 开放世界, AI, VR. 游戏的主要目的: 技术测试/验证. 1 文案 (超低空科幻流派) 2030 年, 基于 AI (人工智能) 的 自动驾驶 和 人形机器人 技术已经大规模普及使用, 但是 AI 的能力遭遇了瓶颈, AI 只能解决 99% 的问题, 而对于这最后 1% 的问题, 却无论如何也解决不了,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2