NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js-CFANZ编程社区

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

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

<!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: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.2);
           z-index: 99;
       }

       .progress .loading {
           width: 30em;
           height: 1em;
           background: #fff;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
           z-index: 100;
           border-radius: 1em;
       }

       .progress .trends {
           width: 0;
           height: 100%;
           background: #666666;
           box-shadow: 1px 1px 10px 666666;
           border-radius: 1em;
       }
   </style>
   <body>
       <div id="percent"></div>
       <div id="WebGL-output">

</div>
       
       <div id="progress" class="progress">
           <div class="mask"></div>
           <div class="loading">
               <div class="trends"></div>
           </div>
       </div>
       <script type="text/javascript">
           $(function() {
               //直接开启帧数检测
               //编辑代码处
               var scene = new THREE.Scene(); //场景构建
               var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //相机构建
               const clock = new THREE.Clock();
               //创建一个webgl对象
               var renderer = new THREE.WebGLRenderer({
                   antialias: false,
                   alpha: true // 设置透明
               });
               let object;
               // 容器
               var container;
               container = document.createElement('div');
               document.body.appendChild(container);

               renderer.setClearColor(0xEEEEEE);
               renderer.setSize(window.innerWidth, window.innerHeight);
               renderer.shadowMapEnabled = true; //激活阴影
               //构建一个坐标轴
               var axes = new THREE.AxisHelper(20);
               //scene.add(axes);
               //创建控件并绑定在相机上
               //控制器

               trackballControls = new THREE.TrackballControls(camera);
               trackballControls.rotateSpeed = 1.0;
               trackballControls.zoomSpeed = 1.0;
               trackballControls.panSpeed = 1.0;
               trackballControls.noZoom = true;
               trackballControls.noPan = true;
               trackballControls.staticMoving = true;
               trackballControls.dynamicDampingFactor = 0.3;
               //设置旋转速度
               trackballControls.rotateSpeed = 4;
               // 使动画循环使用时阻尼或自转意思是否有惯性
               trackballControls.enableDamping = true;
               //是否可以缩放
               trackballControls.enableZoom = true;
               //是否自动旋转
               trackballControls.autoRotate = true;

               //设置相机距离原点的最远距离
               trackballControls.minDistance = 5;
               //设置相机距离原点的最远距离
               trackballControls.maxDistance = 10;
               //是否开启右键拖拽
               trackballControls.enablePan = false;

               var planeGeometry = new THREE.PlaneGeometry(40, 20);
               //var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
               var planeMaterial = new THREE.MeshLambertMaterial({
                   color: 0xffffff
               });
               // //转换对光源有渲染的材质
               // var plane = new THREE.Mesh(planeGeometry, planeMaterial);
               // plane.rotation.x = -0.5 * Math.PI;
               // plane.position.x = 15;
               // plane.position.y = 0;
               // plane.position.x = 0;

               // scene.add(plane);
               // plane.receiveShadow = true;

               //添加材质灯光阴影
               var spotLight = new THREE.SpotLight(0xffffff);
               spotLight.position.set(-10, 20, 10);
               spotLight.castShadow = true;

               //创建一个环境灯光
               var ambientLight = new THREE.AmbientLight(0xffffff, 1.6);
               scene.add(ambientLight);

//创建一个点灯光
var pointLight = new THREE.PointLight(0xffffff, 1.9);

//给模型添加灯光
camera.add(pointLight);

scene.add(spotLight);

               // model
               var onProgress = function(xhr) {
                   if (xhr.lengthComputable) {
                       var percentComplete = xhr.loaded / xhr.total * 100;
                       var percent = document.getElementById("percent");
                       // percent.innerText = Math.round(percentComplete, 2) + '% 已经加载';
                       //加载条
                       play(Math.round(percentComplete, 2));
                   }
               };
               var onError = function(xhr) {};
               var mtlLoader = new THREE.MTLLoader();
               mtlLoader.setPath('a/');
               mtlLoader.load('SanCaiMa.mtl', function(materials) {

materials.preload();

                   var objLoader = new THREE.OBJLoader();
                   objLoader.setMaterials(materials);
                   objLoader.setPath('a/');
                   objLoader.load('SanCaiMa.obj', function(object) {

                       // 设置旋转中心点
                       object.children[0].geometry.computeBoundingBox();
                       object.children[0].geometry.center()

                       object.position.y = 1;
                       object.rotation.y = 0.2;
                       object.scale.set(2, 2, 2);
                       // 将模型加入到场景
                       scene.add(object);

                   }, onProgress, onError);
               });
               //渲染视图视角
               camera.position.x = -30;
               camera.position.y = 0;
               camera.position.z = 10;
               camera.lookAt(scene.position)
               $("#WebGL-output").append(renderer.domElement)
               renderScene();

               // 设置颜色
               renderer.setClearColor(0xffffff, 0);
               // 设置分辨率
               renderer.setPixelRatio(window.devicePixelRatio);
               // 设置渲染尺寸
               renderer.setSize(window.innerWidth, window.innerHeight);
               container.appendChild(renderer.domElement);
               // 自适应监听
               window.addEventListener('resize', resize, false);

               function renderScene() {
                   var clock = new THREE.Clock();
                   var delta = clock.getDelta();
                   trackballControls.update(delta);
                   requestAnimationFrame(renderScene);
                   renderer.render(scene, camera);
               }
               animate();

               // 监听窗口自适应
               function resize() {
                   camera.aspect = window.innerWidth / window.innerHeight;
                   camera.updateProjectionMatrix();
                   renderer.setSize(window.innerWidth, window.innerHeight);
               }

               // 时刻渲染
               function animate() {

                   requestAnimationFrame( animate );

                   // if(camera.position.x<30){
                       // camera.position.x += 0.08;
                       // camera.position.y += 0.02;
                       // camera.position.z += 0.001;
                   // }else{
                       // camera.position.x = -30;
                       // camera.position.y = 0;
                       // camera.position.z = 10;
                   // }

                   //camera.rotateX(Math.PI/4);//绕x轴旋转π/4
                   renderer.render( scene, camera );
                   //console.log(camera.rotation.x);
                   //trackballControls.update();
                   // renderer.render(scene, camera);
                   // //camera.rotateX(Math.PI/4);//绕x轴旋转π/4
                   // requestAnimationFrame(animate);

               }
               // 这是一个进度条函数进度条函数
               function play(a) {
                   document.getElementsByClassName("trends")[0].style.width = a + "%";
                   if (a < 100) {
                       document.getElementById("progress").style.display = "block";
                   } else {
                       document.getElementById("progress").style.display = "none";
                   }
               }

})
</script>

</body>
</html>