Threejs之看房案例（上）

已于 2024-09-17 23:19:16 修改
阅读量1.4k 收藏 23
点赞数 25
分类专栏： Three.js进阶 文章标签： 数码相机 threejs 前端 webgl 3d
于 2024-09-17 20:30:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44103733/article/details/142310647
版权

本文目录

前言

Three.js是一个基于WebGL的JavaScript 3D库，它允许在网页上创建和显示3D图形。在房地产行业中，Three.js常被用于实现全景看房案例，为用户提供沉浸式的房屋浏览体验。

效果展示

立方体模式效果：
请添加图片描述
球体模式效果：
请添加图片描述

一、立方体模式

立方体模式的话，我们需要有6张照片，分别是房间的上下左右前后照片，有这6张图片素材，我们分别贴在立方体的6个面上，然后把相机至于其中，就能实现看房效果。

1.1 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
        import * as THREE from 'three';

        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            75, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 0, 30);
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });

        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement);


        // 控制器
        const control = new OrbitControls(camera, renderer.domElement);
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true;
        const images = [
            '../assets/left.png',
            '../assets/right.png',
            '../assets/top.png',
            '../assets/bottom.png',
            '../assets/front.png',
            '../assets/back.png',
        ];
        let materials = [];
        images.forEach((imgUrl, index) => {
            const texture = new THREE.TextureLoader().load(imgUrl);
            
            if (index == '3') {
                texture.rotation = -Math.PI/2;
                texture.center = new THREE.Vector2(0.5, 0.5);
            }
            if (index == '2') {
                texture.rotation = Math.PI/2;
                texture.center = new THREE.Vector2(0.5, 0.5);
            }
            const material = new THREE.MeshBasicMaterial({
                map: texture
            });
            materials.push(material);
        });
        
        const cube = new THREE.Mesh(new THREE.BoxGeometry(40, 40, 40), materials);

        cube.geometry.scale(12, 12, -12);
        scene.add(cube);

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

1.2 代码解析

  1. 立方体模式下，我们6张图代表一个场景，我们创建了images数组将图片地址填入，接着遍历创建texture贴图，分别贴在立方体6个面上，顺序为左右上下前后。
  2. 如果发现图片位置不对的话，我们可以将贴图旋转，核心代码texture.rotation = -Math.PI/2; texture.center = new THREE.Vector2(0.5, 0.5); 选择的角度可以自己定，调到合适为止。
  3. cube.geometry.scale(12, 12, -12);我们将立方体的z轴缩放为负的，立方体在Z轴方向上的尺寸会减小，并且其方向会与默认情况相反，即从屏幕内向屏幕外看去，立方体的正面实际上是在屏幕的“背后”。让场景中有深度感，这种变换也可以用来实现一些特殊的效果，比如模拟从特定角度观察物体时的透视收缩效果，或者创建视觉上的错觉，使物体看起来像是被“推”到了屏幕的背后或前面。
  4. camera.position.set(0, 0, 1);按道理我们相机的位置如果不设定，默认是在原点(0,0,0)的位置。那不就是刚好在这个立方体的正中心，那为什么我们还要多此一举设置一个z轴为1，因为我们用了OrbitControls轨道控制器，Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。注意这句话，使得相机围绕目标进行轨道运动，默认情况下，OrbitControls会围绕目标物体的中心进行轨道运动。如果目标物体是一个三维对象，那么默认的轨道就是该对象的中心。而在这个案例中，我们使用了const control = new OrbitControls(camera, renderer.domElement);控制器将会围绕原点(0,0,0)进行旋转，如果此时你设置相机也为原点的话，或者不设置相机位置，那么场景将会旋转不起来，不相信的话，自己可以尝试下。

1.3 效果

请添加图片描述

二、球形模式

在球形模式下，我们只用一张全景图即可了。

2.1 代码

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
        import * as THREE from 'three';

        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            75, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 0, 30);
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });

        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement);


        // 控制器
        const control = new OrbitControls(camera, renderer.domElement);
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true;

        // 贴图
        const texture = new THREE.TextureLoader().load('../assets/livingRoom.jpg');
        // 创建球体
        const sphereGeometry  = new THREE.SphereGeometry(16, 32, 32);
        const sphereMaterial = new THREE.MeshBasicMaterial({
            map: texture
        });
        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.geometry.scale(12,12,-12);
        scene.add(sphere);
        
        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

2.2 代码解析

  1. 我们发现球体的就一张全景图就可以了，但是它还是要进行sphere.geometry.scale(12,12,-12);，如果没有设置这个的话如下图效果：
    请添加图片描述
    就会在球外观看，所以我们必须得设置这个属性。

2.3 效果

我们设置了z轴的负数缩放这使得我们在球体里去观察，效果如下：
请添加图片描述
可以看到跟立方体的效果基本上是一致的。

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。

你华还是你华
关注
专栏目录
Threejs之看房案例（下）
你华还是你华
09-18 1676
点精灵Threejs之看房案例（上）本篇文章的球形模式代码为基础，在此基础上如果需要交互的话，我们使用到射线进行交互。我们首先得有点精灵图进行标识厨房与大厅，加入代码如下所示： 1.2 点精灵效果 可以看到效果那就是点精灵厨房位置没对上，那我们其实可以打开坐标轴来设置点精灵位置，打开坐标轴辅助器： 效果： 我们可看到点精灵 轴都要设置为负的：后效果如下： 已经贴在了我们厨房门上。添加鼠标移动事件，我们需要做的是将鼠标移动的点坐标转换为一个位于二维空间中的点，在标准化设备坐标中鼠标的二维坐标 ——
Three.js 示例集合：探索智慧城市场景、粮仓、浮雕、降雨与三维地球
gitblog_09743的博客
09-06 374
Three.js 示例集合：探索智慧城市场景、粮仓、浮雕、降雨与三维地球 项目地址:https://gitcode.com/open-source-toolkit/9641d 欢迎来到这个Three.js示例库，这里汇集了多种创新和实用的WebGL应用示例，旨在帮助开发者深入理解并掌握Three.js在创建交互式3D图形方面的强大能力。本仓库包含一系列精心挑选和编写的案例，覆盖从基础到进阶的多个层...
three.js实现3D全景看房
10-23
three.js实现3D全景看房（移动端）。 three.js的基本使用（入门阶段），全景自动展示，以及手动拖拽滑动控制房屋方向角度。
ThreeJS 官方案例学习（webgl_animation_keyframes）
qq_59315646的博客
05-24 225
【代码】ThreeJS 官方案例学习（webgl_animation_keyframes）
threejs-example:Three.js 的简单例子
06-08
Three.js 示例 从 Three.js 教程创建的 Three.js 的简单示例：
网页全景看房ThreeJs
qq_43422957的博客
07-06 635
最近看了看Three.js,做了个入门级的小案例--简易版的全景看房（可上下左右拖动，可滚轮调整远近，可操作面板自动转动），vue2写的，注释详细，需要学习three.js的道友可以一键复制去学习，代码看着挺多，其实不复杂。它包含了大量的内置功能和效果，如阴影、纹理映射、光照、粒子效果等，同时还支持各种3D模型和几何体的加载和渲染。threeJS的优点包括丰富的功能和灵活性、跨平台性能和兼容性以及庞大的社区支持和资源库，这些优势使得它成为开发3D图形应用程序的理想选择。本文首发于公众号【雪天前端】
Threejs示例一
weixin_46415189的博客
11-17 2209
three.js教程demo
Threejs之看房案例
最新发布
09-18
Threejs之看房案例，实现大厅跳转到厨房，厨房跳转到大厅功能。
three.js项目（立方体贴图实现3D全景看房）（源码+项目说明）.zip
03-09
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目...three.js项目（立方体贴图实现3D全景看房）（源码+项目说明）.zip
three.js项目（立方体贴图实现3D全景看房）（完整源码+说明）.zip
03-27
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、...
threejs简单例子,threejs中文实例,JavaScript
09-10
three.js开发例子，代码实现了创建3D场景，导入一个3D楼房模型并呈现。
ThreeJs官方案例源码
07-20
ThreeJs官方案例源码
threejs一些示例及源码,包括智慧城市.粮仓,浮雕,下雨,三维地球....
04-28
threejs一些示例及源码,包括智慧城市.粮仓,浮雕,下雨,三维地球....
threejs 3D模型案例
06-28
threejs 3D模型案例
threejs官方案例
03-22
包含各种模型和动画加载，以及其他特效案例，功能案例。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在CSDN，方便大家学习，发扬IT开源共享精神，共同促进IT进步。
Three.js 3D看房案例：大厅与厨房的互动跳转
资源摘要信息: "Threejs之看房案例" 是一个关于使用Three.js实现3D看房功能的教程或示例项目。Three.js是一个基于WebGL的JavaScript库，它使得开发者能够在浏览器中创建和显示3D图形。该案例重点演示了如何在3D空间...
threejs实例（一）
prince132的博客
04-03 364
成果一、实现物体的移动旋转缩放。
threejs实例（四）
prince132的博客
04-03 381
Three.js 默认使用shadow maps（阴影贴图），阴影贴图的工作方式就是具有投射阴影的光能对所有能被投射阴影的物体从光源渲染阴影。现在将创建一堆球体，对于每个球体都将创建一个基础的THREE.Object3D，并且将同时创建阴影平面网格和球体网格。在3D引擎里，雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。在three.js中添加雾是通过创建 Fog 或者 FogExp2 实例并设定scene的fog 属性。
threejs vr看房
05-01
ThreeJS VR看房是指利用ThreeJS技术开发的虚拟现实看房应用程序。此类应用程序旨在通过虚拟现实技术模拟现实场景，让用户在不出门的情况下走访自己感兴趣的物业，从而节省时间和成本。 ThreeJS是一种基于WebGL的图形渲染引擎，可用于创建各种3D图形和动画效果。该引擎具有跨平台、跨浏览器、易于使用、丰富的功能和支持各种多媒体类型的优点。因此，利用ThreeJS技术构建VR看房应用程序已经成为业界的一个趋势。 通过ThreeJS VR看房应用程序，用户可以使用VR头戴式设备沉浸式地体验物业，察看物业的各个角落、内部设计、装修风格等细节信息。此外，ThreeJS VR看房应用程序还支持多种互动方式，例如用户可以通过所佩戴的VR控制器选择房间、打开门窗等动作，与应用程序互动，从而更好地满足用户的需求。 总的来说，通过利用ThreeJS VR技术开发VR看房应用程序，可以实现用户与虚拟世界的深度互动，从而为用户提供更好、更高效的房屋看房体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你华还是你华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值