VUE3+ThreeJs实现3D全景场景,可自由旋转视角

这篇具有很好参考价值的文章主要介绍了VUE3+ThreeJs实现3D全景场景,可自由旋转视角。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、介绍 😜 😜

three.js是一个用于在Web上创建三维图形的JavaScript库。它可以用于创建各种类型的三维场景,包括游戏、虚拟现实、建筑和产品可视化等。three.js提供了许多功能和特性,包括3D渲染、光照、材质、几何形状、动画、交互和相机控制等。使用three.js,开发人员可以轻松地创建复杂的三维场景,使用户可以与这些场景进行交互,从而提供更好的用户体验。

文章中使用到的案例图片都来源于:Humus - Textures

这个网站里面有很多免费的资源。每个资源里面都提供6个不同方位的图片。我们只需要通过threejs稍微处理一下,就能实现3d场景了。

demo演示 😝 😝

VUE3+ThreeJs实现3D全景场景,可自由旋转视角

二、three.js的基本使用方法 😁 😁

想要使用three.js显示内容的话,我们需要三样东西:场景、相机和渲染器,这样我们就可以使用相机渲染场景。

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

三、源码 😎 😎

安装依赖,选择其中一种安装即可。

# npm
npm install three

# yarn
yarn add three
<template>
  <div v-loading="loading" style="position: relative">
    <div style="position:absolute;left:0;top:0;opacity:0.5;height: 35px;width: 100%;z-index: 9999;display: flex;justify-content: flex-start;align-items: center;padding: 0 20px">
      <el-button size="mini" @click="changeName('indoor')">室内</el-button>
    </div>
    <div ref="environment"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import {
  Scene,
  PerspectiveCamera,
  WebGL1Renderer,
  AmbientLight,
  CubeTextureLoader,
  Mesh,
  PlaneGeometry,
  MeshLambertMaterial,
} from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

export default defineComponent({
  components: {},
  setup() {

    const loading = ref(true)

    let scene: any = new Scene()

    const environment = ref<HTMLDivElement>()

    /**
     * 默认场景
     */
    const nameDefault = ref<string>('indoor')

    /**
     * 切换场景事件
     */
    const changeName = (environmentName: string) => {
      if (nameDefault.value === environmentName) {
        return
      }
      if (environmentName === '') {
        environmentName = nameDefault.value
      }
      loading.value = true
      scene.background = new CubeTextureLoader()
          .setPath(`/ambient/${environmentName}/`)
          .load(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'], function () {
            loading.value = false
            nameDefault.value = environmentName
          })
    }

    /**
     * 初始化
     */
    const init = () => {
      loading.value = true
      /**
       * 相机 PerspectiveCamera(视野大小, 视图的长宽比, 近景, 远景)
       */
      const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000)
      camera.position.set(0, 0, 300)
      camera.lookAt(scene.position)

      /**
       * antialias消除锯齿
       */
      const renderer = new WebGL1Renderer({antialias: true})
      // 背景颜色
      renderer.setClearColor(0xffffff)
      // 设置设备像素比
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(window.innerWidth, window.innerHeight)

      /**
       * 添加环境灯光
       */
      scene.add(new AmbientLight(0xFFFFFF, 2))

      environment.value?.appendChild(renderer.domElement)

      const planeGeometry = new PlaneGeometry(60, 20)
      // 材质 MeshBasicMaterial和MeshLambertMaterial的区别 MeshLambertMaterial它不会自己发光,而是需要一个光源照射
      const planeMaterial = new MeshLambertMaterial({color: 0xcccccc})
      // 用来定位音源的网格模型
      const audioMesh = new Mesh(planeGeometry, planeMaterial);
      // 设置网格模型的位置,相当于设置音源的位置
      audioMesh.position.set(0, 0, 300);
      scene.add(audioMesh);

      window.addEventListener('resize', () => onWindowResize())

      /**
       * 轨道控制器 也就是鼠标转动等操作
       */
      let orbitControls = new OrbitControls(camera, renderer.domElement)
      orbitControls.autoRotateSpeed = 1
      orbitControls.minDistance = 50

      renderScene()
      function renderScene(){
        requestAnimationFrame(renderScene)
        renderer.render(scene, camera)
      }

      const onWindowResize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight)
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
      }
    }

    onMounted(() => {
      init()
      changeName('')
    })

    return {
      environment,
      changeName,
      loading
    }
  },
})
</script>

安装好依赖,复制源码,下载好相对应的图片就能使用。这里只是一个简单的demo。纯属学习记录。

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。

VUE3+ThreeJs实现3D全景场景,可自由旋转视角文章来源地址https://www.toymoban.com/news/detail-507796.html

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

到了这里,关于VUE3+ThreeJs实现3D全景场景,可自由旋转视角的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • threeJs实现3D地球-旋转-自定义贴图-透明发光

    //---html (angular)---         //---ts--- 效果图:

    2024年04月17日
    浏览(40)
  • uniapp vue3中使用threejs渲染3D模型

    前言: 因为公司需求, 需要在App中内嵌一个3D模型. 在市场上看了一下情况, 大部分都是vue2的, 并没有vue3的版本...现在vue3也不是个新东西了. 后期模型会放入App内. 下面写法并不支持App(已解决在App中渲染, 关注我可见), 支持h5 template: js: 上面写法并不优雅, 只是临时作为一个demo可

    2024年02月12日
    浏览(41)
  • vue3.0 使用echarts与echarts-gl 实现可旋转,可放大3D饼图

    echarts与echarts-gl 实现3D饼图 实现效果: 旋转效果 缩放效果 实现步骤 1、安装echarts npm install echarts npm install echarts-gl 2、页面定义容器 3、js中引入echarts VUE 组件完整源码:

    2024年04月26日
    浏览(40)
  • HTML5开发实例-3D全景(ThreeJs全景Demo) 详解(图)

    在现在市面上很多全景H5的环境下,要实现全景的方式有很多,可以用css3直接构建也可以用基于threeJs的库来实现,还有很多别的制作全景的软件使用 本教学适用于未开发过3D全景的工程狮 如果觉得内容太无聊可以直接跳到最后 下载代码 整个3D全景所用的相关理论就不多说了

    2024年02月06日
    浏览(32)
  • ThreeJS-3D教学六-物体位移旋转

    之前文章其实也有涉及到这方面的内容,比如在ThreeJS-3D教学三:平移缩放+物体沿轨迹运动这篇中,通过获取轨迹点物体动起来,其它几篇文章也有旋转的效果,本篇我们来详细看下,另外加了tween.js知识点,tween可以很好的协助 three 做动画,与之相似的还有 gsap.js方法类似。

    2024年02月04日
    浏览(48)
  • Unity3D相机围绕物体自由旋转

    写了一个相机围绕物体360°自由旋转的脚本,比较实用,分享出来给大家使用,配置如下: Hierarchy界面  LookPovit:为物体Auto Aircraft的中心空对象; AroundPovit:用于相机的空对象,作为父类,主要作用是为了保持与被观察物体的位置一致,可防止Auto Aircraft出现抖动而影响相机

    2024年02月11日
    浏览(66)
  • 使用Vue3实现360度全景效果

    全景展示是一种很炫酷的效果,能够带给用户身临其境的感觉,特别是在旅游、房产等行业非常实用。本文将介绍如何使用Vue3来实现360度全景效果。 首先,我们需要安装两个库: pannellum 和 vue-pannellum 。它们可以帮助我们实现360度全景展示的功能。 在Vue3中,我们可以使用

    2023年04月24日
    浏览(33)
  • vue基于threejs实现的3D可视化编辑器

    随着5G网络的渐渐普及,物联网在人们的生活中渐渐广泛使用,社会向着越来越智能化的方向发展。当康科技经过不懈努力,研发属于自己的一款3D可视化编辑器,助力企业应用实现3D可视化服务。 编辑器界面如下: 操作视频演示: 3D可视化编辑器v1.0版本完成 主要功能点如下

    2024年02月13日
    浏览(43)
  • ThreeJS-3D教学一:基础场景创建

    Three.js 是一个开源的 JS 3D 图形库,用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上,并提供了丰富的功能和工具,使开发者可以轻松地构建令人惊叹的 3D 可视化效果。 Three.js 提供了一套完整的工具和 API,用于创建和管理 3D 场景、几何体、纹理、光照

    2024年02月07日
    浏览(56)
  • 基于vue3.0实现vr全景编辑器

    随着社会的不断发现,现实生活中有很多时候会使用到全景现实,比如房地产行业vr看房,汽车行业vr看车之类的,全景可视化真实还原了现场的场景,真正做到沉浸式体验。 现在我们基于vue3.0版本开发出了一款沉浸式的编辑器,只需要使用全景相机在现场拍摄全景场景,然

    2024年02月15日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包