threejs 之box贴图--6个面集中在一个图片上

weixin_34112030

于 2019-05-17 13:39:00 发布

阅读量2.6k

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2612473/blog/3050785

版权

本文介绍如何将立方体贴图的六个独立面合并到一张图片上，以减少HTTP请求。通过在canvas上截取图片并应用到纹理对象，更新材质并映射到ThreeJS的box形状，实现立方体的贴图效果。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

立方体贴图可以是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;
    }