index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div id="container"></div>
  3. </template>
  4. <script>
  5. import * as THREE from 'three'
  6. import { OrbitControls } from '@/assets/lib/three/OrbitControls'
  7. /* eslint-disable */
  8. export default {
  9. mounted() {
  10. // 场景
  11. var scene = null
  12. // 镜头
  13. var camera = null
  14. // 渲染器
  15. var renderer = null
  16. var controls = null
  17. function initThree() {
  18. scene = new THREE.Scene()
  19. camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100)
  20. camera.position.set(0, 0, 0.01)
  21. renderer = new THREE.WebGLRenderer()
  22. renderer.setSize(document.body.clientWidth, document.body.clientHeight)
  23. document.getElementById('container').appendChild(renderer.domElement)
  24. //镜头控制器
  25. controls = new OrbitControls(camera, renderer.domElement)
  26. // 一会儿在这里添加3D物体
  27. var texture = new THREE.TextureLoader().load(require('../../../assets/image/VR/2022100816/room.jpg'), undefined, undefined, function (err) {
  28. console.log('图片加载失败')
  29. })
  30. var sphereGeometry = new THREE.SphereGeometry(1, 50, 50)
  31. sphereGeometry.scale(1, 1, -1)
  32. var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture })
  33. var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
  34. scene.add(sphere)
  35. loop()
  36. }
  37. // 帧同步重绘
  38. function loop() {
  39. requestAnimationFrame(loop)
  40. renderer.render(scene, camera)
  41. }
  42. window.onload = initThree
  43. }
  44. }
  45. </script>
  46. <style lang="scss" scoped>
  47. </style>