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

fastmover

已于 2022-02-08 11:05:07 修改

阅读量5.9k

点赞数 5

文章标签： Three.js webgl

于 2019-09-12 15:14:31 首次发布

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

版权

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<

最低0.47元/天解锁文章

fastmover

关注

5
点赞
踩
40

收藏

觉得还不错? 一键收藏
5
评论
Three.js 入门篇-制作3D 动漫角色欣赏

Three.js 入门篇-制作3D 动漫角色欣赏前言一、与卡通相关又与前端相关的主题及制作思路二、Three.js加载3D模型代码一般思路三、源码及关键注释参考引用交流与学习前言废话不多说，先上一波炫酷前端效果展示，点我去欣赏。最近有个任务，刚搞完一个卡通网 kt5.cn，没有一点点流量。如何为卡通网带来点人气呢？，于是就有了这篇《Three.js 制作3D 动漫角色欣赏篇》，顺便想带旺一...
复制链接

扫一扫