首页 > 其他分享 >Threejs之看房案例(下)

Threejs之看房案例(下)

时间:2024-09-18 23:51:48浏览次数:11  
标签:Threejs intersects sprite 精灵 THREE 案例 new const 看房

本文目录

前言

Threejs之看房案例(上)这篇博客中我们已经完成了大厅的3d观看效果,但是我们会发现如果想去其他房间观看,没有交互,接下来我们将完成交互观看的效果。本篇博客已绑定资源包,资源包一键下载后,yarn dev访问http://localhost:5174/three-3d-kanfang/index.html即能一键跑起项目,可以在此基础上依瓢画葫芦,或者修改图片完成自定义的看房项目。

最终效果

请添加图片描述

1、点精灵

点精灵Threejs之看房案例(上)本篇文章的球形模式代码为基础,在此基础上如果需要交互的话,我们使用到射线进行交互。

1.1 添加点精灵

我们首先得有点精灵图进行标识厨房与大厅,加入代码如下所示:

        // 点精灵
        const spriteTexture = textureLoader.load('../assets/tips/kitchen.png');
        const spriteMaterial = new THREE.SpriteMaterial({map: spriteTexture});
        const sprite = new THREE.Sprite(spriteMaterial);
        sprite.name = 'kitchen'; // 可以通过这个属性,与相交的射线判断进入哪个房间
        sprite.scale.set(15, 6, 1);
        scene.add(sprite);

1.2 点精灵效果

请添加图片描述
可以看到效果那就是点精灵厨房位置没对上,那我们其实可以打开坐标轴来设置点精灵位置,打开坐标轴辅助器:

        // 打开坐标轴辅助器
        const axesHelper = new THREE.AxesHelper( 30 );
        scene.add( axesHelper );

效果:
在这里插入图片描述
在这里插入图片描述
我们可看到点精灵x y z轴都要设置为负的:sprite.position.set(-70,0,-50);后效果如下:
请添加图片描述
已经贴在了我们厨房门上。


2、添加事件

2.1 鼠标移动事件

添加鼠标移动事件,我们需要做的是将鼠标移动的点坐标转换为一个位于二维空间中的点,在标准化设备坐标中鼠标的二维坐标 —— X分量与Y分量应当在-1到1之间。然后将这个二维空间中的点方向来更新射线。并且还要将将此向量(坐标)从世界空间投影到相机的标准化设备坐标 (NDC) 空间。代码如下:

        // 事件
        const oHover = document.querySelector('.hover');
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        renderer.domElement.addEventListener("mousemove", (event) => {
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObject(sprite);
            
             console.log(intersects);
             if (intersects.length) {
                const worldVector = new THREE.Vector3(
                    intersects[0].object.position.x,
                    intersects[0].object.position.y,
                    intersects[0].object.position.z,
                );
                const dncPosition = worldVector.project(camera); // 将此向量(坐标)从世界空间投影到相机的标准化设备坐标 (NDC) 空间。
                const halfWidth = window.innerWidth/2;
                const halfHeight = window.innerHeight/2;
                const top = -halfHeight*dncPosition.y + halfHeight - 60;
                const left = halfWidth*dncPosition.x + halfWidth;

                oHover.style.top = top + 'px';
                oHover.style.left = left + 'px';
                oHover.style.display = 'block';
             }
             else {
                oHover.style.top = 0 + 'px';
                oHover.style.left = 0 + 'px';
                oHover.style.display = 'none';
             }
        })

2.1.1 效果

效果如下:
请添加图片描述

2.2 鼠标点击事件

好的,我们将进行鼠标点击时进入的厨房的效果。
加入代码:

        renderer.domElement.addEventListener("mousedown", (event) => {
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObject(sprite);

            if (intersects.length && intersects[0].object.name == 'kitchen') {
                const kitchenTexture = textureLoader.load('../assets/kitchen.png');
                const kitchenMaterial = new THREE.MeshBasicMaterial({map: kitchenTexture});
                sphere.material = kitchenMaterial; // 更改贴图为厨房贴图
            }
        })

2.2.1 效果

效果如下:

请添加图片描述
可以看到我们切换到了厨房里,但是会发现我们切换不回去了,并且点精灵位置和描述都不对,接下来我们将实现这一步。

2.3 切换互通

也是在鼠标点击下去的时候判断是不是跳转到客厅,代码如下:

 else if (intersects.length && intersects[0].object.name == 'living') {
                const livingTexture = textureLoader.load('../assets/livingRoom.jpg');
                const livingMaterial = new THREE.MeshBasicMaterial({map: livingTexture});
                sphere.material = livingMaterial; // 更改贴图为厨房贴图
                const kitchenSprite = textureLoader.load("../assets/tips/kitchen.png"); // 加载大厅精灵图 
                const kitchenSpriteMaterial = new THREE.SpriteMaterial({map: kitchenSprite}); // 精灵图
                sprite.name = 'kitchen'; // 厨房
                sprite.material = kitchenSpriteMaterial; // 更改精灵图
                sprite.position.set(-70,0,-50); // 更改位置
            }

效果:
请添加图片描述


3. 完整代码

最后给出完整代码:

<!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>

标签:Threejs,intersects,sprite,精灵,THREE,案例,new,const,看房
From: https://blog.csdn.net/weixin_44103733/article/details/142332966

相关文章

  • 【原理图PCB专题】案例:原理图设计检查为什么要检查全局网络?
            本案例发生在新人的PCB设计文件中,当然就算硬件老人们,其实只要不注意也很容易出现这种全局网络乱用的问题。    如下所示是给新人的接口参考图纸,要求使用嘉立创绘制16个相同的接口做一个工装板。同时还要增加单片机实现切换控制功能。可以看到座子的24......
  • 智能汽车管家:工作流程优化实现案例
    大家好啊,小雨今天来体验一下百度千帆AppBuilder,这是一个智能体平台。作为喜欢玩工作流的人,今天我们的主题依然是如何通过工作流来满足所有需求。那么,让我来介绍一下今天的助手——汽车管家。汽车管家效果展示在线体验地址:https://cloud.baidu.com/qianfandev/matchs如何找到......
  • 重庆“1361数字城市”模式,入选国家数据局案例!
    近期,国家数据局发布《国家数字经济创新发展试验区建设案例集》。其中,数字重庆“打造三级数字化城市运行和治理中心 探索城市精准治理新路径”入选。关注“智慧城市指北”公众号,回复关键字“20240911”,获取获得“数字经济创新发展试验区建设案例集”(前20个案例)资料的方式,案例......
  • 应用案例分享 | 智驾路试数据分析及 SiL/HiL 回灌案例介绍
    概述    为有效利用海量的路试数据并发挥其价值,经纬恒润推出了OrienLink路试数据分析及开环/闭环回灌测试系统。该系统采用统一的数据存储标准平台,基于云计算技术提供的大规模存储、高带宽和高算力,能够对路试数据进行深入的场景挖掘。通过软件在环(SiL)和硬件在环(HiL)回灌验......
  • Hadoop(十五)项目考核 WordCount案例
    一、需求分析需求:在给定的文本文件中统计输出每一个单词出现的总次数SEVENTEEN.txt文本内容如下:saythenameseventeenhelloweareseventeennicetomeetyouyouverynice按照MapReduce编程规范,分别编写Mapper,Reducer,Driver1、Mapper(1)将MapTask传过来的文本内容......
  • Javaweb之SpringBootWeb案例之修改员工的修改回显的详细解析
     3.修改员工需求:修改员工信息编辑在进行修改员工信息的时候,我们首先先要根据员工的ID查询员工的信息用于页面回显展示,然后用户修改员工数据之后,点击保存按钮,就可以将修改的数据提交到服务端,保存到数据库。具体操作为:根据ID查询员工信息保存修改的员工信息3.1查询回显3.1.1接口......
  • linux 操作系统下的 depmod 命令介绍和使用案例
    linux操作系统下的depmod命令介绍和使用案例depmod命令在Linux操作系统中用于生成内核模块的依赖关系和相关的映射文件。它分析内核模块并创建一个依赖列表,以确保在使用modprobe加载和卸载模块时,所有必需的模块都能得到正确处理。depmod命令介绍功能生成依赖列表:depmod......
  • GEE 案例:利用UCSB-CHG/CHIRPS/DAILY数据采用非监督分类实现某区域的降水区域的划分
    目录简介数据函数ee.Clusterer.wekaKMeans(nClusters, init, canopies, maxCandidates, periodicPruning, minDensity, t1, t2, distanceFunction, maxIterations, preserveOrder, fast, seed)Arguments:Returns: Clusterer代码结果简介利用UCSB-CHG......
  • GEE 案例:利用2001-2024年的MODIS数据长时序ndvi指数归一化后的结果分析
    目录简介指数数据代码结果简介利用2001-2024年的MODIS数据长时序ndvi指数归一化后的结果分析,并加载时序图。指数NDVI指数(NormalizedDifferenceVegetationIndex)是用来评估地表植被覆盖度和健康程度的指数。它通过计算红光和近红外光反射率的差异来衡量植被的光合......
  • 数据库数据恢复—Oracle数据库打开报错“system01.dbf需要更多的恢复来保持一致性,数据
    Oracle数据库故障&检测:打开oracle数据库报错“system01.dbf需要更多的恢复来保持一致性,数据库无法打开”。数据库没有备份,无法通过备份去恢复数据库。恢复zxfg用户下的数据。出现“system01.dbf需要更多的恢复来保持一致性”这个报错的原因可能是控制文件损坏、数据文件损坏,数据......