three.js伪入门教程之旋转的九尾妖狐

WebGL 专栏收录该内容
3 篇文章 0 订阅

WebGL是一项利用JavaScript API呈现3D计算机图形的技术,其原生API灵活且高性能,但是这些优点的代价就是入门困难,在后续文章我会慢慢和大家分享我学习WebGL的感悟和心得。three.js是一个封装了WebGL API的轻量级库,官方称是其为傻瓜而生的(难道我连傻瓜都不如么……,学习起来略吃力丫)。本文将通过介绍使用three.js在浏览器里渲染一只旋转的九尾妖狐模型引导大家入门three.js。

目标读者

熟悉javascript,无图形编程经验的开发人员。

示例下载

示例的源代码,模型,纹理都可以在这里下载(访问密码58a5)。

效果预览

gif录制设置为10帧/s,实际效果更流畅。


获取模型和纹理文件

本小节可跳过,如果你的电脑上没有安装英雄联盟,maya,photoshop的话……
如果你天生爱折腾,那么我们一步一步来获取英雄联盟游戏里英雄的模型和纹理吧。
  1. 打开英雄联盟安装目录,比如C:/Program Files/腾讯游戏/英雄联盟体验服,打开目录下的Game文件夹,里面你会发现很多压缩包,所有英雄的模型和纹理就在这些压缩包里。比如本文使用的是九尾妖狐模型是CharacterSkins.zip解压后的DATA/Characters/Ahri/Skins/Skin04/Ahri_Skin04.skn文件,而纹理是CharacterTextures.zip解压后的DATA/Characters/ahri/skins/skin04/Ahri_Skin04_TX_CM.dds。如果你想提取其他英雄的,可以到其他相似的路径里寻找。好,现在你已经找到了skn和dds文件,把它们拷贝到你喜欢的文件夹里去。
  2. 点击这个链接下载maya插件riotfiletranslator。这个插件允许你将skn格式文件导入到maya中去。如果你安装的是maya2014,或许你应该使用这个链接来下载插件。
  3. 如果你安装的是maya2011~2013,解压压缩包,将MayaFolder里的icons和scripts文件夹复制到maya安装目录下。将plugin文件夹里和你版本相符的mll文件复制到maya安装目录下的bin/plug-ins里。打开maya,点击菜单栏里的窗口——设置/首选项——插件管理器,将riotfiletranslator.mll和objExport.mll的已加载和自动加载勾选起来。
  4. maya菜单栏点击文件——导入,导入你喜欢英雄的skn文件。将状态栏上的模块选择器修改为多边形模块。选中你的模型,菜单栏点击法线——反向。OK,现在可以导出你的模型了。选中你的模型,菜单栏点击文件——导出当前选择,文件名随意,文件格式改为OBJexport,可以保存了。
  5. 点击这个链接(32位)或这个链接(64位)下载并安装photoshop插件NVIDIA Texture Tools。这个插件允许你将dds格式文件导入到ps中去。用ps打开你喜欢英雄的dds文件,将图像大小修改为2048px*2048px。最后将图像导出为jpg格式。
如果你坚持完成了以上步骤,恭喜你,你获得了你喜欢英雄的obj模型文件和jpg图像纹理。如果你懒的动手,示例下载里已经包含了九尾妖狐的模型和纹理。

three.js伪入门

为了能显示出物体,three.js需要三种东西:场景(scene),摄像机(camera)和渲染器(renderer)(或许这就是three.js名称的由来,谁知道呢)。创建了场景后你就可以往场景里添加物品,比如在场景里放一个白炽灯(点光源),放一个箱子(由六面网格构成),然后由摄像机实时记录,最后渲染器渲染出摄像机拍下的画面。
下面我们来看看怎么让九尾妖狐显现在我们的浏览器里。
        //在形成完整的DOM树后触发函数
        addEventListener("DOMContentLoaded", function () {
            //创建场景
            var scene = new THREE.Scene(),
                //创建透视摄像机,参数分别代表视场角,屏幕宽高比,视锥近截面,视锥远截面
                camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000),
                //创建渲染器
                renderer = new THREE.WebGLRenderer(),
                //创建纹理
                texture = new THREE.Texture(),
                //创建环境光,参数为十六进制的颜色
                ambientLight = new THREE.AmbientLight(0xaaaaaa),
                //创建定向光源,参数为十六进制的颜色
                directionalLight = new THREE.DirectionalLight(0xffeedd),
                imgURL = "ahri.jpg",
                objURL = "ahri.obj",
                obj = null;
            //将摄像机向z轴(屏幕外)移动260
            camera.position.z = 260;
            //设置视口大小
            renderer.setSize(innerWidth, innerHeight);
            //指定定向光源由z正半轴射向原点(平行光从屏幕外射向屏幕中心)
            directionalLight.position.set(0, 0, 1);
            //承诺在图片纹理和模型加载完后调用函数,values[0]为图片对象,values[1]为模型对象
            Promise.all([loadImage(), loadObject()]).then(function (values) {
                //指定纹理使用的图片
                texture.image = values[0];
                //纹理在创建后发生了改变(由上一语句引发),必须设置needsUpdate属性为true
                texture.needsUpdate = true;
                obj = values[1];
                //遍历模型对象的属性,指定纹理
                obj.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        child.material.map = texture;
                    }
                });
                //将模型下移一些,使其能居中
                obj.position.y = -70;
                //将模型,环境光,定向光源添加入场景
                scene.add(obj);
                scene.add(ambientLight);
                scene.add(directionalLight);
                document.body.appendChild(renderer.domElement);
                //开始渲染
                render();
                function render() {
                    //高性能循环渲染
                    requestAnimationFrame(render);
                    //每次渲染前将模型沿Y轴旋转0.05
                    obj.rotation.y += 0.05;
                    //渲染
                    renderer.render(scene, camera);
                }
            });
            //图片加载函数
            function loadImage() {
                //承诺加载完成后返回图片对象
                return new Promise(function (resolve) {
                    new THREE.ImageLoader().load(imgURL, resolve);
                });
            }
            //模型加载函数
            function loadObject() {
                //承诺加载完成后返回模型对象
                return new Promise(function (resolve) {
                    new THREE.OBJLoader().load(objURL, resolve);
                });
            }
        });


或许你可以这么想象,在一个漆黑的夜里,阿狸在山上冷得在不停的转圈,月亮刚爬上山头,月光从正前方照亮阿狸……
好吧,以上都是我无聊的想象。你可以下载示例然后在chrome浏览器里观看。如果你有任何疑问或发现错误请在下面留言评论。如果你从中受益请期待博主的webgl系列,下个webgl系列文章将不使用three.js,从webgl基础说起……
  • 5
    点赞
  • 18
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值