NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js

Ryan-Zhong

已于 2022-03-27 17:42:04 修改

阅读量2.6k

点赞数 1

分类专栏：前端文章标签： jquery html5 前端

于 2022-03-27 17:26:55 首次发布

本文链接：https://blog.csdn.net/weixin_33759271/article/details/123777244

版权

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用，以便大家了解。

案例下载地址：(演示例子)NFT数字藏品3D展示方案（obj、mtl、png）引用three.js-Javascript文档类资源-CSDN下载


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/three.js"></script>
        <script type="text/javascript" src="js/TrackballControls.js"></script>
        <script type="text/javascript" src="js/DDSLoader.js"></script>
        <script type="text/javascript" src="js/OBJLoader.js"></script>
        <script type="text/javascript" src="js/OBJMTLLoader.js"></script>
        <title></title>
    </head>
    <style>
        body {
            font-family: Monospace;
            color: #fff;
            margin: 0px;
            overflow: hidden;
            background-color: #000000;
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        #percent {
            position: absolute;
            width: 200px;
            height: 20px;
            color: red;
            text-align: center;
            border: 1px;
        }
        
        /* 进度条 */
        .progress {
            position: fixed;
            width: 50%;
            height: 100%;
            margin: 0 auto;
            left: 50%;
            margin-left: -25%;
        }

        .progress .mask {
            position: fixed;
            width: 1