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相关推荐

今日NFT/数字藏品热点
NFT/数字藏品热点 1.MetaMundo推出可互操作的Metaverse NFT市场 7月19日消息,总部位于阿姆斯特丹的MetaMundo周二表示,它已经推出了3D NFT市场.MetaMund ...
腾讯云生态合作伙伴企鹅云对话“头号玩家”：重新梳理NFT数字藏品的价值链
5月26日下午三点,由腾讯云生态合作伙伴企鹅云主办,主题为<打通数字藏品爆发的最后一道屏障>的线上分享会在腾讯会议线上直播间成功举办.本次活动请到了腾讯云微搭生态运营专家张倩.Oasis ...
火讯财经创始人龙典受访36氪：“数藏云”为中小品牌提供一站式NFT数字藏品解决方案
近日,火讯财经创始人.中信出版社<数字化引擎>龙典就<搭上数字藏品这班车,企服公司迎来新一轮业绩爆发?>的采访主题接受了36氪的采访,深度解读企服公司在数字藏品东风下的生存之道 ...
探索全新时代的数字艺术市场！了解NFT数字藏品交易平台的运作！
当谈到数字时代的艺术革命时,非同质化代币(NFT)数字藏品无疑是一个炙手可热的话题.但是,对于大多数人来说,了解NFT的工作原理和运作方式可能还有些困惑.不用担心,今天"小谢"将为 ...
国内NFT数字藏品平台有哪些值得玩？
温馨提示:本篇文章内容仅作为个人观点分享,不作任何投资建议. NFT数字藏品是什么? 数字藏品是使用以太坊区块链技术进行唯一标识的经数字化的特定作品.艺术品和商品,包括但不限于数字画作.图片.音乐.视 ...
当神话故事邂逅 NFT数字藏品：知名艺术家张宏携《西游》拉开元宇宙序幕
明代吴承恩创作的中国古代第一部浪漫主义章回体长篇神魔小说,<西游>向大家描绘了孙悟空出世跟随菩提祖师学艺及大闹天宫后,遇见了唐僧.猪八戒.沙僧和白龙马,西行取经,一路上历经艰险,降妖除魔, ...
新版NFT数字藏品源码系统源码+已接支付
正文: 新版NFT数字藏品源码系统源码+已接支付,其它的就没什么好介绍的了,有兴趣的自行拿去研究吧. 程序: wwtegs.lanzoub.com/iUs7u0888jwb 图片:
下一个行业风口：NFT 数字藏品，是机遇还是泡沫？
引言 2021年3月,艺术家Beeple花费5000多天制成的作品<每一天:前5000天>,作为史上第一件公开拍卖的纯数字艺术品,在顶级拍卖行佳士得以高达6900万美元(约合4.5亿人民币 ...
NFT数字藏品平台支付接口如何申请？
NFT数字藏品平台支付接口申请流程如下: 很多的第三方支付商家都想要申请支付接口,但是并不知道应该具体怎么进行操作.那么今天就来详细的和大家说下第三方支付接口的申请过程,希望以下的介绍可以给大家带来帮 ...

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

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

最新文章

热门文章