3D模型拆分与合并展示

[{"insert":"模型准备：整体模型与每层的模型。\n实现：在3D世界中设置组件的自定义ID可在动作组中以ids[自定义ID]的形式获取到所对应的对象，此时获取到的为编辑器自定义的对象，属性$el才是three.js所创建的对象。设置摄像机的ID，能够在自定义函数中一次性拿到后面需要用到的renderer，scene和camera对象，其中renderer为渲染器，scene为场景，用于放置物体。\n"},{"insert":{"image":"R10580997-830d8c3400cee095ec7564e386474da2_4426_460_57.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-ae13d2b5dabcb385649ae7f76b7170f7_24817_341_133.png"}},{"insert":"\n因为本案例使用了glTF模型，设置renderer的outputEncoding为sRGBEncoding。glTF模型中纹理的颜色信息为sRGB空间，渲染器默认输出为线性空间(linearEncoding)，需要同样设置为sRGB输出才不会导致颜色失真，但此时其他处于线性空间的纹理（Texture）也会转换到sRGB输出导致颜色失真（如自行添加的图片），需要为其设置色彩空间为sRGB。\n"},{"insert":{"image":"R10580997-3cf82bb7f4c07b229f711ff6a7bea914_5300_282_26.png"}},{"insert":"\n本案例需要显示模型的阴影，可以获取模型的对象并对模型中的所有mesh对象设置阴影，如图所示。\n"},{"insert":{"image":"R10580997-48dffcca4679e91e6b30e9b6a74496b5_26452_480_148.png"}},{"insert":"\n其中castShadow表示mesh是否产生阴影，receiveShadow表示mesh是否接受阴影。material为mesh的材质，shadowSide属性设置的是该材质将会产生阴影的面，一般使用光线投射产生深度贴图的做法进行阴影映射时，若被照射的面既接受投影也产生投影就会在物体表面产生条纹阴影，出现摩尔纹。\n"},{"insert":{"image":"R10580997-3b49ec2cae8227f999470cb825c0e073_453642_1137_638.png"}},{"insert":"\n这种现象叫shadow acne（阴影失真）。这种现象可以用两种方法解决，一是设置光源的bias值使得采样位置偏移；二是设置shadowSide为背面，但需要模型所有面对光源的面都必须为正面。\n"},{"insert":{"image":"R10580997-c713bb741bc00be1dc635882550fa7f1_7234_206_115.png"}},{"insert":"\n如果物体影子有锯齿可以给光源的shadowMap设置自定义分辨率，属性位置为el.shadow.mapSize，可查阅"},{"attributes":{"link":"https://threejs.org/docs/index.html?q=light#api/zh/lights/shadows/LightShadow"},"insert":"https://threejs.org/docs/index.html?q=light#api/zh/lights/shadows/LightShadow"},{"insert":"获取相关信息。\n"},{"insert":{"image":"R10580997-da1cabfe47831cd81e6ab21bb71d9137_6838_210_40.png"}},{"insert":"\n设置后的效果\n"},{"insert":{"image":"R10580997-da2dbc39a83208a34c1f89c4625a877c_9418_241_174.png"}},{"insert":"\n模型主体的分离和合并使用时间轴实现，分离和合并时进行播放，单层概览时跳转到时间轴的相关位置。\n"},{"insert":{"image":"R10580997-d5078929fb3bdf0960cad9d21c5ac51b_8322_363_171.png"}},{"insert":"\n光效部分使用了three的后期处理器，需要引入EffectComposer和RenderPass组件，EffectComposer用于管理后期处理过程链，后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。renderPass通常位于链的开头渲染场景，并将渲染好的场景传递给下一个后期处理步骤。\n为了使色彩不失真，创建EffectComposer时需要传入一个encoding为sRGB的renderTarget，渲染时将会以这个renderTarget的配置进行渲染。\n"},{"insert":{"image":"R10580997-d14a5819adaa8c98510b8e62b4da6fb2_46836_582_184.png"}},{"insert":"\n使用后处理后不再使用renderer进行渲染而使用composer渲染作为替代，requestAnimationFrame的作用为浏览器重绘前（下一帧开始前）执行传入的函数。\n"},{"insert":{"image":"R10580997-d415c78a6118e0954c2502a19407e5b5_14312_252_83.png"}},{"insert":"\n房子外发光的部分使用的是outlinePass组件，可以设置边线大小、宽度、边缘浓度、呼吸频率等效果，可在"},{"attributes":{"link":"https://threejs.org/examples/?q=outline#webgl_postprocessing_outline"},"insert":"https://threejs.org/examples/?q=outline#webgl_postprocessing_outline"},{"insert":"尝试不同效果的组合。\n"},{"insert":{"image":"R10580997-0f132115160cd91d4ae005e47118b4ec_99481_578_357.png"}},{"insert":"\n设置属性后添加到composer中，设置outlinePass实例的属性selectedObjects为一个数组，内容为需要发光的mesh对象。本案例在分离概览中会根据鼠标目前的位置使某一层发光，如果不想使用编辑器自带的鼠标移动事件可以自己监听window的mousemove事件，获取到的坐标通过three自带的光线投射raycaster类进行拾取鼠标当前坐标下的物体。intersectObject方法接收一个mesh数组，可以在"},{"attributes":{"link":"https://threejs.org/docs/index.html#api/zh/core/Raycaster"},"insert":"https://threejs.org/docs/index.html#api/zh/core/Raycaster"},{"insert":"查阅相关配置。\n"},{"insert":{"image":"R10580997-51340786ac12d2a6d8a37d5f7c57bc8f_82430_466_395.png"}},{"insert":"\n流光部分的移动原理是对纹理贴图进行位移，贴图使用这样拥有渐变透明效果的图片。\n"},{"insert":{"image":"R10580997-a8d40dea1a175b28f4465a3afb61a73f_473931_1181_591.png"}},{"insert":"\n通过在3D世界中添加图片再获取图片对象的方式可以拿到图片对象的map，即texture，后面可以使用这个texture创建材质，wrapS表示纹理在材质上水平方向的包裹方式，在UV映射中对应U，wrapT表示垂直方向的包裹方式，在UV映射中对应V，使用RepeatWrapping可以使材质无限重复。\n"},{"insert":{"image":"R10580997-5b9e1ae36164304bc95af25d7469a745_20051_321_105.png"}},{"insert":"\n创建流光实体，首先根据位置创建曲线。\n"},{"insert":{"image":"R10580997-14015887622b93a50fcf633e77040024_20827_263_110.png"}},{"insert":"\n再根据曲线创建管道几何体并创建材质，注意材质要设置transparent，否则没有透明效果。接着便能够生成mesh对象，然后将mesh对象的图层从默认的0切换至1，与其他不需要辉光效果的物体区分开。\n"},{"insert":{"image":"R10580997-815c9f9dbef6917a6cbc79c2bc127246_49307_497_209.png"}},{"insert":"\n接着只要定时给texture对象设置偏移量即可达到贴图移动的效果\n"},{"insert":{"image":"R10580997-d907e8ca4e23214f1d6490e1963bc981_19552_313_108.png"}},{"insert":"\n设置光效需要用到UnrealBloomPass组件，它能够产生辉光效果。这里又创建了一个EffectComposer对象用于分开渲染。\n"},{"insert":{"image":"R10580997-ba58fa64c6df9becbddb441484903ae0_52501_568_200.png"}},{"insert":"\n然后创建一个自定义的shaderPass，它的构造函数接受一个shaderMaterial，在后期处理中会根据这个自定义的shaderMaterial进行处理。shaderMaterial的配置需要使用GLSL编写。此处将原来的纹理值与bloomCompoer渲染后的颜色值进行了混合，并设置了pass的needsSwap为true，使新渲染的结果能传递给一个pass。\n"},{"insert":{"image":"R10580997-05801fd48cb4bc9f7a3a5d7d982428ee_98903_583_433.png"}},{"insert":"\n在渲染函数中需要先执行bloomComposer的渲染生成辉光效果，再执行composer的渲染混合效果并渲染到屏幕上。\n"},{"insert":{"image":"R10580997-4943c3e151b5461c6e6f3706567b2c06_28677_290_160.png"}},{"insert":"\n上图中进行bloomComposer的渲染前根据是否处于辉光渲染图层遍历了一遍scene将其及子孙中不需要辉光渲染的材质都改成了黑色材质，以避免辉光渲染，并在渲染到屏幕前将其还原。\n"},{"insert":{"image":"R10580997-63a2199e78724056ebb0d0923b39b87e_107857_506_489.png"}},{"insert":"\n最后，如果觉得渲染出来的锯齿感很强，可以在后期处理链的最后添加FXAAShader设置抗锯齿效果，其他的抗锯齿方案可以在three官网查询。\n"},{"insert":{"image":"R10580997-95d9a3da6a077de5bcb8778d638da629_28801_552_106.png"}},{"insert":"\n"}]