準(zhǔn)備工作：
1、three.js? ?https://threejs.org/build/three.js
2、搭建項(xiàng)目環(huán)境 我使用的live-server
3、720°全景圖
目錄結(jié)構(gòu)
mian.js
; (function () {
? // 在THREEjs中，渲染一個(gè)3d世界的必要因素是場(chǎng)景（scene）、相機(jī)（camera）、渲染器（renderer）。渲染出一個(gè)3d世界后，可以往里面增加各種各樣的物體、光源等，形成一個(gè)3d世界。
? // 創(chuàng)建場(chǎng)景
? const scene = new THREE.Scene()
? // 創(chuàng)建透視攝像機(jī)
? // new THREE.PrespectiveCamera('視角', '指投影窗口長(zhǎng)寬比例', '表示重距離攝像機(jī)多遠(yuǎn)的位置開(kāi)始渲染', '表示距離攝像機(jī)多遠(yuǎn)的位置截止渲染');
? // 正交攝像機(jī)是一個(gè)矩形可視區(qū)域，物體只有在這個(gè)區(qū)域內(nèi)才是可見(jiàn)的物體無(wú)論距離攝像機(jī)是遠(yuǎn)或事近，物體都會(huì)被渲染成一個(gè)大小。一般應(yīng)用場(chǎng)景是2.5d游戲如跳一跳、機(jī)械模型
? // 透視攝像機(jī)是最常用的攝像機(jī)類(lèi)型，模擬人眼的視覺(jué)，近大遠(yuǎn)?。ㄍ敢暎?。Fov表示的是視角，F(xiàn)ov越大，表示眼睛睜得越大，離得越遠(yuǎn)，看得更多。如果是需要模擬現(xiàn)實(shí)，基本都是用這個(gè)相機(jī)
? const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000)
? // 創(chuàng)建ThreeJs渲染器
? const renderer = new THREE.WebGLRenderer({ antialias: true })
? // 設(shè)置渲染器場(chǎng)景的大小
? renderer.setSize(window.innerWidth, window.innerHeight)
? // 渲染器添加到頁(yè)面
? document.body.appendChild(renderer.domElement)
? // 上面的確是把3d世界畫(huà)出來(lái)了，只是沒(méi)有什么東西。在three.js中，我們需要增加光源和mesh
? // mesh即是網(wǎng)格。在計(jì)算機(jī)里，3D世界是由點(diǎn)組成的，無(wú)數(shù)的面拼接成各種形狀的物體。這種模型叫做網(wǎng)格模型。一條線是兩個(gè)點(diǎn)組成，一個(gè)面是3個(gè)點(diǎn)組成，一個(gè)物體由多個(gè)3點(diǎn)組成的面組成
? // 而網(wǎng)格（mesh）又是由幾何體（geometry）和材質(zhì)（material）構(gòu)成的
? //? 我們所能想象到的幾何體，框架都自帶了，我們只需要調(diào)用對(duì)應(yīng)的幾何體構(gòu)造函數(shù)即可創(chuàng)建。幾何體的創(chuàng)建方法都是new，如BoxBuffer：const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
? // 創(chuàng)建的時(shí)候，一般定義了渲染一個(gè) 3D 物體所需要的基本數(shù)據(jù)：Face 面、Vertex 頂點(diǎn)等信息。THREE.xxxGeometry指的是框架自帶的幾何體，不同幾何體所需要的參數(shù)有所不同，大概是width、height、radius、depth、segment、detail、angle等屬性
? // 更多geometry相關(guān)api
? // BufferGeometry和Geometry有什么不同?就實(shí)現(xiàn)的效果來(lái)說(shuō)它們都是一樣，但是BufferGeometry的多了一些頂點(diǎn)屬性，且性能較好。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，Geometry對(duì)象屬性少體驗(yàn)更好。THREE解析幾何體對(duì)象的時(shí)候，如果是Geometry，則會(huì)把對(duì)象轉(zhuǎn)換成ufferGeometry對(duì)象，再進(jìn)行下一步渲染
? // 創(chuàng)建幾何模型
? // THREE.BoxGeometry('x軸長(zhǎng)', 'y軸長(zhǎng)', 'z軸長(zhǎng)')
? const geometry = new THREE.SphereGeometry(50, 256, 256);
? // 創(chuàng)建貼圖 720°圖片，需要硬件支持 這里的圖是借用網(wǎng)絡(luò)上面的
? const texture = new THREE.TextureLoader().load('https://qhyxpicoss.kujiale.com/r/2019/07/01/L3D137S8ENDIADDWAYUI5L7GLUF3P3WS888_3000x4000.jpg?x-oss-process=image/resize,m_fill,w_1600,h_920/format,webp')
? //創(chuàng)建材質(zhì)
? const material = new THREE.MeshBasicMaterial({ map: texture })
? // 渲染球體的雙面
? material.side = THREE.DoubleSide;
? // 創(chuàng)建網(wǎng)格對(duì)象
? const mesh = new THREE.Mesh(geometry, material)
? // 網(wǎng)格對(duì)象填加到場(chǎng)景
? scene.add(mesh)
? // 攝像機(jī)放球體中心
? camera.position.set(-0.3, 0, 0)
? // 控制器（如果報(bào)錯(cuò)去github自己拷貝一個(gè)OrbitControls.js https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js）
? const controls = new THREE.OrbitControls(camera, renderer.domElement);
? controls.addEventListener("change", () => {
? ? renderer.render(scene, camera);
? });
? controls.minDistance = 1;
? controls.maxDistance = 2000;
? controls.enablePan = false;
? // 調(diào)整max
? controls.minDistance = 1 // controls.maxDistance = 200;
? controls.maxDistance = 2
? function animate () {
? ? requestAnimationFrame(animate)
? ? renderer.render(scene, camera)
? }
? animate()
? window.onresize = function () {
? ? camera.aspect = window.innerWidth / window.innerHeight
? ? camera.updateProjectionMatrix()
? ? renderer.setSize(window.innerWidth, window.innerHeight)
? }
})()
