當前位置：
首頁 >
NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js
發布時間：2024/3/13
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
????????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: 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);// modelvar 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軸旋轉π/4renderer.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>總結
以上是生活随笔為你收集整理的NFT 数字藏品 3D 展示方案（obj、mtl、png）引用 three.js的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么使用start方法启动Java的T
- 下一篇： 计算机组成与体系结构（软件设计师考试）