vue怎么制作写实

场景搭建
01：首先，在场景中建立摄像机，利用当前摄像机的角度并根据构图简单的摆放出石头、树和石阶的位置及透视关系。
02：根据摆放的位置细化石头及石阶模型。制作时，注意场景中石头摆放的透视关系，以及控制石头的面数，删除看不到的面需要删除以节省渲染时间。
树木形状的调节与树木贴图的制作
01：使用Paint Effects建立树。在Visor的trees中找到birchBlowingLight树的笔刷类型，通过笔刷在场景中任意位置绘制出初始树的形态。因为后续还可以继续调节，所以这里随意绘制即可。
02：在树的属性面板中，birchBlowingLight节点下调节Creation和Growth的参数。具体参数如下：
注：以下参数是为了配合此场景的构图而设置的，切记严重模仿。
03：调节好树的位置与形状之后，执行Modify下的Paint Effects to Polygons,将Paint Effects建立出的笔刷树转成Polygon形式，具体参数如下：
04：制作树叶贴图，在Photoshop中建立10241024像素且分辨率为150的项目。
05：由于现实生活中树叶在树上的位置和角度的不同，我们会看到树叶的正面与背面，所以为了使树叶更多样、更真实，我在这里收集了一棵树的9片叶子，拍摄他们的正面与反面，按33的方式摆放。
06：提取树叶的通道，使树叶正反两面的通道一致;并存储为32位的tga格式，目的是让Maya提取Alpha通道变为透明。
07：制作树叶的bump贴图，将正面color去色，对其调节曲线，使黑白对比明显。
08：制作树叶的Reflection反射贴图，和制作bump贴图方法一致，但整体更亮一些。
09：制作树叶Refraction折射贴图，这里提取树叶的叶筋，擦去多余部分。
10：制作树干的color和bump与制作树叶方法大致相同。
树材质节点的链接
01：打开Hypershade，创建一个mental ray下的mia_material_x材质球并赋予给树叶。
02：调节mia_material_x材质球参数，具体参数如下：
03:在生活中观察树叶的时候我们会注意到，树叶的正面与反面的样子是不相同的，所以为了真实我们建立一个mib_twosided双面材质节点，将我们制作树叶的正面和反面的贴图赋予到此节点上。首先建立两个2D Textures下File节点，分别将文件的路径指定到做好的树叶贴图的正面与反面（命名为yezi_Front和yezi_Back）。
04：再建立Utilities下的Gamma Correct节点，将正面和反面的贴图链接到Gamma Correct节点的value上。并将Gamma值改为0454。使树叶的Gamma值还原成真实值。
05：建立mental ray下的mib_twosided双面材质节点。
06：将链接正面和反面的Gamma Correct的节点分别对应链接到mib_twosided的Front和Back上。
07：将mib_twosided材质链接到mia_material_x（yezi）材质球的diffuse上。这样观察场景里的树叶正面与反面就不同了。
08：建立2D Textures下File节点路径指定到做好的bump材质，链接到mia_material_x材质球的Standard Bump上，并将bump节点的Bump Depth改为05。使树叶具有凹凸。
09：建立Utilities下的Multiply Divide，复制树叶正面节点（yezi_Front1）和Gamma节点，将其链接到Multiply Divide的Input1上，将Input2改为4。
10：将Multiply Divide节点链接到mia_material_x材质球的refr_trans_color上。
11：建立2D Textures下File节点路径指定做好的refr贴图上，分别链接到yezi_Front1的colorGain上和mia_material_x材质球的refr_color上。使树叶的叶筋部分颜色更深并且具有折射效果。
12：为了保留叶子部分，去掉贴图周围不需要的部分，我们抠掉贴图Alpha通道，使除叶子外多余的部分变为透明。建立Utilities下的Luminance和Reverse节点。
13：将链接mib_twosided节点的正面贴图yezi_Front链接到Reverse的other上，使outTransparency和input链接。
14：然后将Reverse节点链接到Luminance节点的value上。链接后将Luminance节点链接到mia_material_x材质球（yezi）属性下Advanced的Cutout Opacity上。这样渲染时树叶周围多余的颜色部分就看不到了，只留下树叶。
15：在现实生活中，在被光线直接照射的地方会更亮更透明一些，为了使叶子背光处更为明亮，我们建立mental ray下的mib_twosided节点和Utilities下的Luminance节点。
16：将mib_twosided节点的Front改为灰色，Back改为白色。然后将mib_twosided节点链接到Luminance节点的value上。
17：将Luminance节点链接到mia_material_x材质球（yezi）属性下BRDF的90 Degree Reflection上。
18：这样树叶的材质节点链接完成。
19：树干和石头的材质链接与树叶链接方式一致，但只需要color与bump贴图。将凹凸节点Bump Depth值改为05。
20：为了使9种不同的叶子随机分布在树枝上，需要调节树叶的UV，这里使用一个叫做djPFXUVs Layout的插件。选中树叶后点击插件的Layout Uvs，这样9种叶子贴图将随机分布在树叶上。为了场景中树木的多样性，可以根据需求多做几组树叶，再对树的形状进行适当的调整（方法同上），使场景更为真实，具有更高的可看性。
21：制作草地。选择地面，点击Rending模块下Paint Effects下的Make Paintable，这样使笔刷建出来的草地贴合地面。使用Paint Effects建立草地。在Visor的grasses中找到grassBermuda笔刷类型，通过笔刷在场景中适当位置绘制出初始草的形态。22：草地的材质贴图方法和制作树叶的一致，建立出的草叶长短不一，无法使用插件，为了确保建立草的UV正确，将草地属性下的Creation中的Length Min和Lenght Max的值相同，让每根草的长度一致。这样草的UV就符合插件使用的要求，为了增加细节使草地具有长短不一的真实效果，我们可以多创建几组草，将Length Min和Lenght Max的值更改，同时注意二者数值相同；这样草地就有了参差不齐的效果。（草叶的贴图制作方法和树叶的制作方法一致）。
灯光节点链接与渲染
01：在摄像机角度建立物理天光。
02：为了使渲染出的场景更为真实细腻，具有可调性。在Hypershade下建立Lenses的mia_exposure_photo节点，将此节点链接到mia_physicalsky1的other上，使其message与miSkyExposure链接。再将其链接到cameraShape1的default上。
03：将mia_exposure_photo节点中的F Number改为8；将mia_physicalsky1节点中的R/G/B Unit Conversion分别改为0318。
04：为了使渲染出的更细腻，具有更多的细节，在Render Settings下Commom中格式改为OpenEXR格式，并渲染单帧，Passes中加入景深层；将Quality下Framebuffer改为432浮点类型，质量为产品级别即可渲染。
背景的制作
01：在Vue中点击左侧标签栏的图标，建立远山和海洋对其进行简单的调整。
02：建立好场景之后，对山的材质进行更改，选择上在右侧材质球上点击右键Load a Material，打开材质库，选择适合的材质球赋予材质。
03：材质完成之后在右侧预览窗口观察，调节好之后，点击上面照相机图标进行渲染。如果效果不理想继续调节。
最终合成
01：在Nuke中导入渲染好的和背景。将场景文件的colorspace改为sRGB，添加ColorCorrect，ColorLookup等节点对其较色。
02：将渲染好的背景和素材飞鸟添加Transform节点进行位置调整，并添加LightWrap节点使背景和鸟相融合，更为整体，最后添加Merge节点与场景Merge。
03：为了达到近实远虚的效果，在下游添加ShuffleCopy节点提取场景中景深信息，再添加Zblure,使远处模糊，
04：添加Clamp节点使画面色彩RGB值不大于1小于0；最后添加Write节点渲染输出。

Ionic 是一个广为人知的桥接app开发方案，它丰富的组件以及完善的文档，对于快速开发app是一种好的选择。然而不同的人使用的技术栈不一样， Ionic 组件已经可以和 Vue 集成，对于使用 Vue 开发移动端应用的同学来说，多了一种选择。
github地址
本篇主要参照Youtube视频: >

插件通常用来为 Vue 添加 全局功能 ，所谓全局即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次，在任何组件就可以直接使用 。（类似于我们在window上添加的方法属性那样，任何地方都可以用）
下面几种常见的用途：

主要两种使用方式
一：全局引入方式
（1）使用步骤
通过全局方法 Vueuse() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

也可以传入一个可选的选项对象：

（2）在mainjs中配置
比如：使用element-ui为例：

组使用件中

二：组件引入方式
比如，以使用 swiper为例

组件中使用

vue插件其实就是一个简单的 js对象而已 ，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。
一：开发插件有四种方法

二：添加实例方法
其中最常用的：4 添加实例方法的写法和使用方法，下面举例说明toast 最简单插件开发过：
（1）新建一个plugin目录，编辑插件toastjs文件

（2）在 mainjs 中，需要导入 toastjs 并且通过全局方法 Vueuse() 来使用插件

（3）我们在组件中来获取该插件定义的 $msg 属性，比如在根组件Appvue中

控制台输出：Hello World
三：添加全局资源
这里主要介绍过滤器
（1）在plugin目录新建插件filterjs文件

（2）在 mainjs 中，需要导入 filterjs 并且通过全局方法 Vueuse() 来使用插件

（3）HelloWorldvue页面上使用

添加全局资源也可以不放在插件里面实现，可以直接在mainjs入口文件创建Vue实例前添加：

其他组件就可以通过this直接使用:

（1）核心区别

简单来说，插件就是指对Vue的功能的增强或补充。
（2）其他区别

一个Vue插件可以是一堆Vue组件的集合（插件干的事就是把内部的组件帮你倒入到vue全局下），也可以是用来扩展Vue功能的，比如 Vuex， Vue-Router。

测试完成，下面就要把的内容打包发布到npm 上去,具体步骤可以参照
><template>
<el-form :model="formData" :rules="formRules" ref="form">
<el-form-item v-for="(item, index) in formConfig" :label="itemlabel" :key="index">
<template v-if="itemtype === 'input'">
<el-input v-model="formData[itemfield]" :placeholder="itemplaceholder" @input="handleInput(itemfield)" />
</template>
<template v-else-if="itemtype === 'select'">
<el-select v-model="formData[itemfield]" placeholder="请选择" @change="handleSelect(itemfield)">
<el-option v-for="option in itemoptions" :key="optionvalue" :label="optionlabel" :value="optionvalue" />
</el-select>
</template>
<!-- 其他表单元素类型 -->
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formConfig: [], // 表单数据结构
formData: {}, // 表单数据
formRules: {} // 表单验证规则
}
},
methods: {
handleInput(field) {
// 处理输入框 input 事件
},
handleSelect(field) {
// 处理下拉框 change 事件
}
// 其他事件处理函数
}
}
</script>

一般Ionic项目创建可以使用ionic-cli命令，即：

然而查看该命令说明和源码是没有Vue的项目模版的（见 STARTER_TEMPLATES中的projectType ）。

所以使用Vue来创建项目：

这是Vue很基础的东西，安装依赖并运行看下：

此时可以看到项目能正常运行的，一般来说，应用都需要和路由打交道，所以添加下路由：

对Ionic集成，安装ionic相关依赖（其中@ionic/core是组件部分，@ionic/vue是封装成Vue方式调用的接口部分）：

安装完成后，在mainjs中添加配置：

再次运行，发现命令行会有告警提示：

同时页面也会报错，显示空白页面，这是一个BUG（前期的版本是没有这个BUG的），我们需要安装ionicons，而且它对版本有要求，要在V4510以下，所以执行：

此时再次运行，没有告警也没有错误提示，但是还是空白页面，调试页面发现有这样一个样式：

我也不知道这是干嘛用的，改了再说：

此时页面看到有东西了， 那我们尝试下ionic的组件能不能用 ，在Homevue页面添加一个按钮：

可以看到组件渲染出来了，为了和ionic的dom结构保持一致，把Appvue稍微改动一下，变为如下：

我们再试试看事件能不能响应，页面稍微改一下：

运行，发现能正常使用的。

为了支持Ionic的路由和使用其动画和样式，@ionic/vue里在vue-router的基础上做了封装，所以处理一下，打开routerjs，修改一下（把Router替换为IonicVueRouter即可）：

此时看到路由也是正常使用的。

众所周知，Ionic默认是使用android/md（Material Design）模式的，如果想使用ios模式，在<html>上添加mode="ios"，即：

indexhtml添加meta项：

至此，基本项目配置就完成了，后续再谈论更多细节。

工具地址： >