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