首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)

大作业说明 通读完上一篇博文中提及的教程,觉得应该搞个大作业巩固一下所学的知识,想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》,于是决定仿一个MARVEL的片头动画作为three.js的课后练习...二.基本思路 简易片头动画的实现思路如下,除了正常的舞台元素外,需要背景音乐,使用THREE.AudioLoader就可以从后后台加载音乐,舞台中主要的实体元素是MARVEL这几个字母的立体模型,可以使用...THREE.TextGeometry来进行建模(【Three.js绘制字体模型】),它要求先载入字体文件,然后才能实例化,参考官方文档的实现就可以了。...有了字体模型以后,还需要一些影片素材贴在字体模型上,THREE.VideoTexture可以解决这个问题(【Three.js使用VideoTexture实现视频Video更新纹理】),它可以将HTML中的...当你构建一个立方体时,会发现它的faces属性数组中有12个面的信息,因为Three.js中默认使用三角面片来构建几何体,一个矩形表面需要用两个三角面片来构建,(你可以将立方体材料material中传入

3.1K51

【带着canvas去流浪(13)】用Three.js制作简易的MARVEL片头动画(下)

模型的制作 1.1 生成字体模型 1.2 多表面贴图 二. 镜头及动画 三. 大作业总结 ?...//www.github.com/dashnowords/blogs 博客园地址:《大史住在大前端》原创博文目录 华为云社区地址:【你要的前端打怪升级指南】 有了上一篇基础知识的储备,本节就来制作一下简易版的...模型的制作 1.1 生成字体模型 字体模型的生成使用到了THREE.TextGeometry,它需要先加载字体文件,然后在回调函数中生成字体模型,相当于在THREE.ShapeGeometry实例上绘制平面图形...大作业总结 通过大作业的练习,熟悉了很多three.js的特性,希望感兴趣的读者也可以自行练习,比如把整个片头动画都做出来什么的。

1.1K31

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券