从Unity到Three.js(outline 模型描边功能)

2024-02-26 04:04

本文主要是介绍从Unity到Three.js(outline 模型描边功能),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

指定模型高亮功能,附带设置背景颜色,获取随机数方法。
百度查看说是gltf格式的模型可以携带PBR材质信息,如果可以这样,那就完全可以在blender中配置好材质导出了,也就不需要像在unity中调整参数了。

import * as THREE from 'three'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';//创建场景
const scene = new THREE.Scene();
//配置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//动态创建的cube模型
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0000FF });
const cube = new THREE.Mesh(geometry, material);
cube.position.x += 4;
scene.add(cube);// 加载模型文件  模型在工程根目录
loadModelGLB('../testmodel.glb', loadModelSucceed, loadModelFail);
var cube2 = new THREE.Mesh(geometry, material);
cube2.position.x -= 2.5;
scene.add(cube2);camera.position.z = 5;//================================指定模型边缘高亮=================================================
let composer;
//创建高亮组件
var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
//封装的指定模型高亮方法
function outlineObj(obj) {// 描边composer = new EffectComposer(renderer);const renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);//模型描边颜色,默认白色         outlinePass.visibleEdgeColor.set(0xffff00);//高亮发光描边厚度outlinePass.edgeThickness = 4;//高亮描边发光强度outlinePass.edgeStrength = 6;//模型闪烁频率控制,默认0不闪烁 猜测是插值控制显色,数字是变化的时间outlinePass.pulsePeriod = 1;composer.addPass(outlinePass);// 将描边模型添加进去outlinePass.selectedObjects.push(obj);
}
//================================指定模型边缘高亮 END=================================================//计时器
const clock = new THREE.Clock();
let timer = 0;
function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;//使用高亮组件必须使用此函数composer.render();//renderer.render(scene, camera);timer += clock.getDelta();//每一秒变换一次背景颜色if (timer >= 1) {timer = 0;scene.background = new THREE.Color(getRandomColorValue());//设置背景色}}
//获取随机颜色值
function getRandomColorValue() {var red = Math.round(Math.random() * 255); // 生成0-255之间的随机整数作为红色分量var green = Math.round(Math.random() * 255); // 生成0-255之间的随机整数作为绿色分量var blue = Math.round(Math.random() * 255); // 生成0-255之间的随机整数作为蓝色分量return "rgb(" + red + ", " + green + ", " + blue + ")"; // 返回RGB格式的随机颜色值
}outlineObj(cube2);
outlineObj(cube);
animate();//==============================加载模型================================================
//加载GLB模型,传入路径、加载完成的回调、加载失败的回调
function loadModelGLB(path, succeed, fail) {const loader = new GLTFLoader();loader.load(path, function (gltf) {succeed(gltf);}, undefined, function (error) {fail(error);});
}//加载完成的回调
function loadModelSucceed(gltf) {let returnGltf = gltf.scene;returnGltf.rotation.y += 2;//配置加载的模型设置returnGltf.traverse(function (child) {if (child.isMesh) {child.frustumCulled = false;//模型阴影child.castShadow = true;//模型自发光child.material.emissive = child.material.color;child.material.emissiveMap = child.material.map;}
});scene.add(returnGltf);outlineObj(returnGltf);}
//加载失败回调
function loadModelFail(msg) {console.error(msg);
}
//==============================加载模型 END================================================

请添加图片描述

这篇关于从Unity到Three.js(outline 模型描边功能)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/747657

相关文章

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

详解如何使用Python从零开始构建文本统计模型

《详解如何使用Python从零开始构建文本统计模型》在自然语言处理领域,词汇表构建是文本预处理的关键环节,本文通过Python代码实践,演示如何从原始文本中提取多尺度特征,并通过动态调整机制构建更精确... 目录一、项目背景与核心思想二、核心代码解析1. 数据加载与预处理2. 多尺度字符统计3. 统计结果可

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

SpringBoot整合Sa-Token实现RBAC权限模型的过程解析

《SpringBoot整合Sa-Token实现RBAC权限模型的过程解析》:本文主要介绍SpringBoot整合Sa-Token实现RBAC权限模型的过程解析,本文给大家介绍的非常详细,对大家的学... 目录前言一、基础概念1.1 RBAC模型核心概念1.2 Sa-Token核心功能1.3 环境准备二、表结

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式?二、使用步骤1.使用$Value 注解2.使用@Configur

SpringBoot后端实现小程序微信登录功能实现

《SpringBoot后端实现小程序微信登录功能实现》微信小程序登录是开发者通过微信提供的身份验证机制,获取用户唯一标识(openid)和会话密钥(session_key)的过程,这篇文章给大家介绍S... 目录SpringBoot实现微信小程序登录简介SpringBoot后端实现微信登录SpringBoo