错失冰墩墩，代码来补救！
随着“2022北京冬奥会”的盛大开幕，冰墩墩的热度与日俱增，线上被抢空，线下排长龙，为购买冰墩墩苦恼的竟少了几根秀发！如今冬奥马上就要拉下帷幕，还没抢到“冰墩墩”不要紧，这款程序来帮忙，国内一位程序员dragonir用前端+建模的方式自己就实现了线上拥有“冰墩墩”，同时将代码开源到了GitHub上，不得不感叹科技的力量，程序员的伟大，让拥有“冰墩墩”变得如此简单！
立体感的“冰墩墩”轻松实现
这一部分是不需要用户去自己去码代码，是小编让大家了解一些具体的实现逻辑。云开发平台可以将原Github项目直接fork到自己的仓库上，马上来看一下“冰墩墩”技术如何实现的吧！
1.引入资源
首先引入开发页面所需要的库和外部资源，OrbitControls 用于镜头轨道控制、TWEEN 用于补间动画实现、GLTFLoader 用于加载 glb 或 gltf 格式的 3D 模型、以及一些其他模型、贴图等资源。
importReactfrom'react'; import { OrbitControls } from"three/examples/jsm/controls/OrbitControls"; import { TWEEN } from"three/examples/jsm/libs/tween.module.min.js"; import { GLTFLoader } from"three/examples/jsm/loaders/GLTFLoader"; importbingdundunModelfrom'./models/bingdundun.glb'; // ...
2.页面DOM结构
页面 DOM 结构非常简单，只有渲染 3D 元素的 #container 容器和显示加载进度的 .olympic_loading 元素。
<div><divid="container"></div> {this.state.loadingProcess===100?'' : ( <divclassName="olympic_loading"><divclassName="box">{this.state.loadingProcess} %</div></div> )} </div>
3.场景初始化
初始化渲染容器、场景、相机。
container=document.getElementById('container'); renderer=newTHREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled=true; container.appendChild(renderer.domElement); scene=newTHREE.Scene(); scene.background=newTHREE.TextureLoader().load(skyTexture); camera=newTHREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.set(0, 30, 100); camera.lookAt(newTHREE.Vector3(0, 0, 0));
4.添加光源
本示例中主要添加了两种光源：DirectionalLight 用于产生阴影，调节页面亮度、AmbientLight 用于渲染环境氛围。
// 直射光constlight=newTHREE.DirectionalLight(0xffffff, 1); light.intensity=1; light.position.set(16, 16, 8); light.castShadow=true; light.shadow.mapSize.width=512*12; light.shadow.mapSize.height=512*12; light.shadow.camera.top=40; light.shadow.camera.bottom=-40; light.shadow.camera.left=-40; light.shadow.camera.right=40; scene.add(light); // 环境光constambientLight=newTHREE.AmbientLight(0xcfffff); ambientLight.intensity=1; scene.add(ambientLight);
5.加载进度管理
使用 THREE.LoadingManager 管理页面模型加载进度，在它的回调函数中执行一些与加载进度相关的方法。本例中的页面加载进度就是在 onProgress 中完成的，当页面加载进度为 100% 时，执行 TWEEN 镜头补间动画。
constmanager=newTHREE.LoadingManager(); manager.onStart= (url, loaded, total) => {}; manager.onLoad= () => { console.log('Loading complete!')}; manager.onProgress= (url, loaded, total) => { if (Math.floor(loaded/total*100) ===100) { this.setState({ loadingProcess: Math.floor(loaded/total*100) }); // 镜头补间动画Animations.animateCamera(camera, controls, { x: 0, y: -1, z: 20 }, { x: 0, y: 0, z: 0 }, 3600, () => {}); } else { this.setState({ loadingProcess: Math.floor(loaded/total*100) }); } };
6.创建地面
本示例中凹凸起伏的地面是使用 Blender 构建模型，然后导出 glb 格式加载创建的。当然也可以只使用 Three.js自带平面网格加凹凸贴图也可以实现类似的效果。使用 Blender 自建模型的优点在于可以自由可视化地调整地面的起伏效果。
varloader=newTHREE.GLTFLoader(manager); loader.load(landModel, function (mesh) { mesh.scene.traverse(function (child) { if (child.isMesh) { child.material.metalness= .1; child.material.roughness= .8; // 地面if (child.name==='Mesh_2') { child.material.metalness= .5; child.receiveShadow=true; } }); mesh.scene.rotation.y=Math.PI/4; mesh.scene.position.set(15, -20, 0); mesh.scene.scale.set(.9, .9, .9); land=mesh.scene; scene.add(land); });
7.添加“冰墩墩”
在添加之前，需要在「室内设计网」找到冰墩墩的原始模型，并且需要在 Blender中转换模型格式，还需要在 Blender 中调整模型的贴图法线，才能还原渲染图效果
透明塑料或玻璃质感实现代码：
loader.load(bingdundunModel, mesh=> { mesh.scene.traverse(child=> { if (child.isMesh) { // 内部if (child.name==='oldtiger001') { child.material.metalness= .5child.material.roughness= .8 } // 半透明外壳if (child.name==='oldtiger002') { child.material.transparent=true; child.material.opacity= .5child.material.metalness= .2child.material.roughness=0child.material.refractionRatio=1child.castShadow=true; } } }); mesh.scene.rotation.y=Math.PI/24; mesh.scene.position.set(-8, -12, 0); mesh.scene.scale.set(24, 24, 24); scene.add(mesh.scene); });
云平台一键部署“冰墩墩”
1.创建环境
想要一键部署“冰墩墩”，需要以下账号和服务：
- Github账号 (https://github.com/)，
- 阿里云账号，并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/)，为保证最好的使用体验，请使用Chrome浏览器。开通OSS服务。
- 未开通阿里云OSS的用户，点击链接 (https://workbench.aliyun.com/product/open?code=oss)开通OSS服务。OSS开通免费，有一定的免费额度，超过额度之后按量付费。
2.创建“冰墩墩”应用
- 创建前端应用。打开快速开始 https://workbench.aliyun.com/page/quickstart，点击创建「前端应用」按钮。
- 云资源访问授权。如果您之前没有使用过云开发平台，会出现云资源授权管理的选项，往下拉出现直至同意授权的字样，点击「同意授权」后出现授权成功，点击进入「下一步」。
- 绑定Github账号。授权完成后选择来源仓库为Github，按照提示点击去绑定，绑定GitHub帐号，登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。
- 选择fork好的“bingdundun”代码仓库。选择第一步中的代码仓库，主干分支，并点击下一步。主干分支一般指的是代码的master或main等分支。
- 填写基本信息，完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。
3.线上一键部署
- 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署，部署状态变成绿色已部署以后可以点击访问部署网站查看效果。
收获线上“冰墩墩”
一段段复杂的代码汇聚成了冬奥顶流“冰墩墩”，让每一位关注冬奥盛况的人都能够在此刻圆梦，感谢dragonir将代码开源到Github。点击图片可以立即前往云开发平台开始获取你的专属墩了。
注：参考文章「牛批，「冰墩墩」代码，开源了！！」
作者源代码地址：https://github.com/dragonir/3d/tree/master/src/containers/Olympic
本文涉及奥运元素3D模型仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
