网页全景看房ThreeJs（一键复制）

发布日期：2025-01-23 16:36    点击次数：138

原文地址链接

https://mp.weixin.qq.com/s/jrLr5KyReLeMWciCIsynNA 

网页全景看房ThreeJs（一键复制）原创 雪天前端 雪天前端 2024-05-22 23:50 陕西 1人听过雪天前端前端技术分享，这是最通俗易懂的文字，不信你看看176篇原创内容公众号

最近看了看Three.js,做了个入门级的小案例--简易版的全景看房（可上下左右拖动，可滚轮调整远近，可操作面板自动转动），vue2项目，注释详细，需要学习three.js的道友可以一键复制去学习，代码看着挺多，其实不复杂。

先看效果准备前提条件

1. 创建一个vue2项目

2. 安装threeJs--主包

npm i three

3. 安装lil-gui--用于控制面板

npm i lil-gui

4. 安装tweenJs--用于做动画

npm i @tweenjs/tween.js@^18

项目源码

安装以上包之后，创建一个空的.vue文件，CV以下代码运行即可

<template>  <div>    <div id="container" ref="container"></div>  </div></template><script>  import * as THREE from 'three';  import TWEEN from '@tweenjs/tween.js'  import {    OrbitControls  } from "three/examples/jsm/controls/OrbitControls"  import GUI from 'lil-gui';  export default {    data() {      return {        bigImg: require("../assets/2.webp"), // 全景图片路径        container: null, // 页面容器        camera: null, // 相机        renderer: null, // 渲染器        scene: null, // 场景        material: null, // 添加材质        texture: null, // 创建纹理贴图        skyBox: null, // 网格        controls: null, // 轨道控制        clock: null, // 轨道更新时间        // 鼠标属性        bMouseDown: false,        x: -1,        y: -1,        isClickCamera: false, // 是否点运动相机        raycaster: null,        mouse: null,        // 面板操作        myObject: {          isRotation: false, // 是否自动旋转          isEnablePan: false, // 是否开启右键拖拽        }      }    },    mounted() {      this.init();      this.animate();      this.initGui()    },    created() {},    methods: {      // 初始化轨道控制      initControls() {        this.controls = new OrbitControls(this.camera, this.renderer.domElement);        this.controls.target = new THREE.Vector3(0, 0, 0);        this.controls.minDistance = 18; // 相机最近        this.controls.maxDistance = 90; // 相机最远 太远就会显示出球体        this.controls.autoRotate = this.myObject.isRotation; // 图片自动旋转        this.controls.enableDamping = true; // 使动画循环使用时阻尼或自转 意思是否有惯性        this.controls.enablePan = this.myObject.isEnablePan; // 是否开启右键拖拽        this.controls.autoRotateSpeed = 0.5; // 阻尼系数      },      init() {        // 页面容器        this.container = document.getElementById('container');        // 创建渲染器        this.renderer = new THREE.WebGLRenderer();        this.renderer.setPixelRatio(window.devicePixelRatio);        // 设置画布的宽高        this.renderer.setSize(window.innerWidth, window.innerHeight);        // 判断容器中子元素的长度        let childs = this.container.childNodes;        if (this.container.childNodes.length > 0) {          this.container.removeChild(childs[0]);          this.container.appendChild(this.renderer.domElement);        } else {          this.container.appendChild(this.renderer.domElement);        }        // 创建场景        this.scene = new THREE.Scene();        // 创建相机        this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 10000);        this.camera.position.set(5, 0, 0);        this.camera.lookAt(new THREE.Vector3(0, 0, 0)); //让相机指向原点        // 创建轨道控制器        this.initControls();        // 添加材质        this.material = new THREE.MeshBasicMaterial();        // 创建纹理贴图        this.texture = new THREE.TextureLoader().load(this.bigImg);        this.material.map = this.texture;        const sphereGeometry = new THREE.SphereGeometry(100, 100, 100);        this.skyBox = new THREE.Mesh(sphereGeometry, this.material);        this.skyBox.geometry.scale(1, 1, -1);        // 添加到场景中去        this.scene.add(this.skyBox);        // 鼠标事件监听        this.renderer.domElement.addEventListener('pointerdown', this.onMouseDown, false);        this.renderer.domElement.addEventListener('pointerup', this.onMouseUp, false);        this.renderer.domElement.addEventListener('pointermove', this.onMouseMove, false);        // 监听布局变化        window.addEventListener('resize', this.onWindowResize, false);      },      // 更新相机动画      tweenCamera(position, target) {        new TWEEN.Tween(this.camera.position).to({          x: position.x,          y: position.y,          z: position.z        }, 600).easing(TWEEN.Easing.Sinusoidal.InOut).start();        new TWEEN.Tween(this.controls.target).to({          x: target.x,          y: target.y,          z: target.z        }, 600).easing(TWEEN.Easing.Sinusoidal.InOut).start();      },      // 鼠标按下      onMouseDown(event) {        event.preventDefault(); // 取消默认事件        console.log("---onMouseDown---");        this.isClickCamera = true;      },      // 鼠标放开      onMouseUp(event) {        event.preventDefault(); // 取消默认事件        console.log("---onMouseUp---");        if (this.isClickCamera) {          console.log("---移动相机---", event);          // 红色代表X轴，绿色代表Y轴，蓝色代表Z轴          this.mouse = new THREE.Vector3(); // 三维坐标对象          // 屏幕坐标到标准化设备坐标(Normalized Device Coordinates, NDC)转换          this.mouse.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 +            1, 0.5);          this.mouse.unproject(this.camera);          this.raycaster = new THREE.Raycaster(this.camera.position, this.mouse.sub(this.camera.position)            .normalize()); // 投手          var intersects = this.raycaster.intersectObjects(this.scene.children);          if (intersects.length > 0) {            var selected = intersects[0]; // 取第一个物体            console.log("x坐标:" + selected.point.x);            console.log("y坐标:" + selected.point.y);            console.log("z坐标:" + selected.point.z);            this.camera.position.set(selected.point.x, selected.point.y, selected.point.z);          }        }      },      // 鼠标移动      onMouseMove(event) {        event.preventDefault(); // 取消默认事件        console.log("---onMouseMove---");        this.isClickCamera = false;      },      onWindowResize() {        // 窗口缩放的时候,保证场景也跟着一起缩放        this.camera.aspect = window.innerWidth / window.innerHeight;        this.camera.updateProjectionMatrix();        this.renderer.setSize(window.innerWidth, window.innerHeight);      },      animate() {        requestAnimationFrame(this.animate);        this.controls.update(); // 更新轨道控制        TWEEN.update();        this.renderer.render(this.scene, this.camera);      },      initGui() {        // 初始化        const gui = new GUI();        // 点击控制是否自动旋转        gui.add(this.myObject, 'isRotation').onChange(value => {          console.log(value);          this.myObject.isRotation = value          console.log(this.myObject.isRotation, '当前状态');          // 需重新调用控制器才能生效          this.initControls();        });      },    }  }</script><style scoped></style>

使用的图片（来源网络）

threeJS是一个强大的开源JavaScript库，用于创建3D图形的交互式网页应用程序。它具有许多优点，使得它成为开发人员首选的3D图形库之一。

提供了丰富的功能和灵活性，使开发人员能够轻松地创建复杂的3D场景和动画效果。它包含了大量的内置功能和效果，如阴影、纹理映射、光照、粒子效果等，同时还支持各种3D模型和几何体的加载和渲染。

具有优秀的跨平台性能和兼容性，可以在各种设备和浏览器上运行，包括桌面电脑、笔记本电脑、平板电脑和手机。这意味着开发人员可以开发一次，然后在各种设备上进行测试和部署，同时确保用户有一致的用户体验。

拥有庞大的社区支持和资源库，开发人员可以从中获取各种教程、示例和插件，帮助他们解决问题和加快开发进度。这使得学习和使用threeJS变得更加容易和高效。

threeJS的优点包括丰富的功能和灵活性、跨平台性能和兼容性以及庞大的社区支持和资源库，这些优势使得它成为开发3D图形应用程序的理想选择。

【往期推荐】

登录页-几种好看的背景（一键复制）电脑端注册页面Echarts大屏展示页（附源码一键复制）上百个精美网页Loading效果PC端登录页源码(一键复制)Vue3优秀的UI组件库(高颜值)雪天前端前端技术分享，这是最通俗易懂的文字，不信你看看176篇原创内容公众号工具63vue73uniapp91node9工具 · 目录上一篇网页刮刮卡效果阅读 1932​雪天前端

人划线

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。