my_loan/htmldev/shiningH5/src/views/VR/2022100816/index.vue

<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from '@/assets/lib/three/OrbitControls'

/* eslint-disable */
export default {
  mounted() {
    // 场景
    var scene = null
    // 镜头
    var camera = null
    // 渲染器
    var renderer = null
    var controls = null

    function initThree() {
      scene = new THREE.Scene()
      camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100)
      camera.position.set(0, 0, 0.01)
      renderer = new THREE.WebGLRenderer()
      renderer.setSize(document.body.clientWidth, document.body.clientHeight)
      document.getElementById('container').appendChild(renderer.domElement)
      //镜头控制器
      controls = new OrbitControls(camera, renderer.domElement)

      // 一会儿在这里添加3D物体
      var texture = new THREE.TextureLoader().load(require('../../../assets/image/VR/2022100816/room.jpg'), undefined, undefined, function (err) {
        console.log('图片加载失败')
      })
      var sphereGeometry = new THREE.SphereGeometry(1, 50, 50)
      sphereGeometry.scale(1, 1, -1)
      var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture })

      var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
      scene.add(sphere)

      loop()
    }

    // 帧同步重绘
    function loop() {
      requestAnimationFrame(loop)
      renderer.render(scene, camera)
    }

    window.onload = initThree
  }
}
</script>

<style lang="scss" scoped>

</style>