立方体贴图可以是6个独立的图片,为了减少HTTP请求也可以把6张图片合并在一起做成一个图片,原理是在创建的canvas上把图片按顺序截取显示在画布上,并并把显示图片的画布赋予纹理对象的image属性,并设置材质对象的needsUpdate = true,然后把生成的纹理映射成材质对象,通过形状与材质生成box。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - panorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}