Three.js 入门篇-制作3D 动漫角色欣赏_前端 3d人物模型制作-CSDN博客

本文链接：https://blog.csdn.net/u012609766/article/details/100771979

本文介绍如何利用Three.js和WebGL技术制作3D动漫角色展示。通过从3dWarehouse获取3D模型，结合Three.js进行加载和渲染，实现3D动漫角色在网页上的动态效果。提供代码思路和关键注释，并分享了在线效果和参考资料。

摘要由CSDN通过智能技术生成

Three.js 入门篇-制作3D 动漫角色欣赏

作者最新发布文章：《Webgl / Three.js 从入门到“放弃”指南》
本文同步发布于：http://www.a4z.cn/fe/2019/09/12/three-js-3d-anime/

前言

废话不多说，先上一波炫酷前端效果展示，点我去欣赏。最近有个任务，刚搞完一个卡通网 kt5.cn，没有一点点流量。 如何为卡通网带来点人气呢？ ，于是就有了这篇《Three.js 制作3D 动漫角色欣赏篇》，顺便想带旺一下给卡通网。

一、与卡通相关又与前端相关的主题及制作思路

突发奇想，要不针对一些3d动漫的角色，搞个展示show的页面吧：

3D模型哪里来？ ，当然是去大名鼎鼎的3dwarehouse（https://3dwarehouse.sketchup.com/），大品牌，放心；谷歌出品、必是精品；
如何把3d模型展示出来了，当然是选择来自 **未来前端技术 **的Three.js，支持多种3D模型的加载，敲定AR/VR不在话下；
二话不说下载3D 模型撸代码开干。

二、Three.js加载3D模型代码一般思路

Three.js的代码经典思路：

创建一个场景Scene
给场景加个相机Camera
创建一个渲染器Renderer
把3D模型加载进来，添加到场景
渲染循环（动画）。如果3D模型自带动画就直接播放其动画、不然后就自己添加平移/缩放/旋转等效果动画

三、源码及关键注释

点击查看在线效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3D 动漫角色欣赏 : Centaur-Vert</title>
    <meta
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
      name="viewport"
    />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link type="text/css" rel="stylesheet" href<