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

news2025/1/18 16:53:33

指定模型高亮功能,附带设置背景颜色,获取随机数方法。
百度查看说是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================================================

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1470152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

牛客周赛 Round 34 解题报告 | 珂学家 | 构造思维 + 置换环

前言 整体评价 好绝望的牛客周赛,彻底暴露了CF菜菜的本质,F题没思路,G题用置换环骗了50%, 这大概是唯一的亮点了。 A. 小红的字符串生成 思路: 枚举 a,b两字符在相等情况下比较特殊 a, b input().split() if a b:print (2)print (a)pri…

【Redis】搞懂过期删除策略和内存淘汰策略

1、过期删除策略 1.1、介绍 Redis 是可以对 key 设置过期时间的,因此需要有相应的机制将已过期的键值对删除,而做这个工作的就是过期键值删除策略。 每当我们对一个 key 设置了过期时间时,Redis 会把该 key 带上过期时间存储到一个过期字典…

3.openEuler物理存储及逻辑卷管理(一):磁盘存储挂载与使用

openEuler OECA认证辅导,标红的文字为学习重点和考点。 如果需要做实验,建议下载麒麟信安、银河麒麟、统信等具有图形化的操作系统,其安装与openeuler基本一致。 磁盘大类: HDD, (Hard Disk Drive的缩写) : 由一个或者多个铝制或者玻璃制成的磁性碟 片,磁头,…

流计算之Flink

文章目录 概要有界无界流集群JobManagerTaskManagersTasks 和算子链Task Slots 和资源 小结 概要 Apache Flink 是一个框架和分布式处理引擎,用于在无边界和有边界数据流上进行有状态的计算。Flink 能在所有常见集群环境中运行,并能以内存速度和任意规模…

深度解析:Integer.parseInt() 源码解读

深度解析:Integer.parseInt() 源码解读 关键要点 解析字符:用于将字符转换为对应的数字值 Character.digit(s.charAt(i),radix) 确定limit:根据正负号分别设定 int limit -Integer.MAX_VALUE;【正】 limit Integer.MIN_VALUE;【负】 负数…

通过几天JAVA学习总结和查询资料编写一个学生管理系统(简单版)

目录 需求分析 需求: 分析: 学生管理系统开始菜单界面 学生类: 功能实现: 添加功能 删除功能 修改功能 查询功能 项目实现 项目实现分析: 1.实现菜单选择功能 2.实现添加学生信息功能 3.实现删除学生信…

【DAY04 软考中级备考笔记】数据结构基本结构和算法

数据结构基本结构和算法 2月25日 – 天气:晴 周六玩了一天,周天学习。 1. 什么是数据结构 数据结构研究的内容是一下两点: 如何使用程序代码把现实世界的问题信息化如何用计算机高效地处理这些信息从创造价值 2. 什么是数据 数据是信息的…

Pod 异常问题排查

文章目录 前言1、诊断流程2、常用的排查方法3、Pod 状态、原因分析及故障处理总结 前言 通过 Kubernetes 部署服务,服务并未按照计划正常提供服务。如何通过 Pod 状态,进行异常问题的定制就显得特别重要了! 1、诊断流程 2、常用的排查方法 …

基于ZYNQ的PCIE高速数据采集卡的设计(一)

作为信息处理的第一步,数据采集的作用越来越重要。目前,数据采集已经在航 空、民用、军事、医疗等领域得到广泛应用。随着相关技术的不断发展,信号频率越 来高,带宽越来越大,使得数据采集技术逐渐向高速大数据的方向…

最新计算机毕业设计题目100例

文章目录 0 前言1 计算机毕设选题推荐2 开题指导3 最后 0 前言 大家好!大四的同学们毕业设计即将开始了,你们做好准备了吗? 学长给大家精心整理了最新的计算机毕业设计选题,希望能为你们提供帮助。如果在选题过程中有任何疑问&a…

C++之std::tuple(二) : 揭秘底层实现原理

相关系列文章 C之std::tuple(二) : 揭秘底层实现原理 C三剑客之std::any(一) : 使用 C之std::tuple(一) : 使用精讲(全) C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二):深入剖析 深入理解可变参数(va_list、std::initializer_list和可变参数模版) st…

创作纪念日:记录我的成长与收获

机缘 一开始是在我深入学习前端知识的Vue.js框架遇到了一个问题,怎么都解决不了,心烦意乱地来csdn上找解决方法。开心的是真被我找到了,真的很感恩,也意识到在这个平台上分享自己的经验是多么有意义的事情,可能随便的…

外包干了3个月,技术倒退明显...

先说情况,大专毕业,18年通过校招进入湖南某软件公司,干了接近6年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

在使用nginx的时候快速测试配置文件,并重新启动

小技巧 Nginx修改配置文件后需要重新启动,常规操作是启动在任务管理器中关闭程序然后再次双击nginx.exe启动,但是使用命令行就可以快速的完成操作。 将cmd路径切换到nginx的安装路径 修改完成配置文件后 使用 nginx -t校验nginx 的配置文件是否出错 …

相机选型介绍

摄影测量中,相机是非常重要的角色,合适的相机产出合适的图像,得到合适的重建精度,这是相机的重要性。 您也许第一反应是,摄影测量所需的理想相机,是有着超高分辨率的相机,但事实可能并非如此&a…

HTML+CSS+JS:轮播组件

效果演示 一个具有动画效果的卡片元素和一个注册表单,背景为渐变色,整体布局简洁美观。 Code <div class="card" style="--d:-1;"><div class="content"><div class="img"><img src="./img/果果k_01.jpg…

【全网首发】上周申请的谷歌Gemini 1.5 Pro已通过!百万token的Gemini 1.5 Pro开箱测试(一)

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

【接口加密】接口加密的未来发展与应用场景

目录 3.1 接口加密与区块链技术的结合 3.1.1 区块链技术的安全特性与优势 3.1.2 接口加密在区块链中的应用案例 3.2 接口加密与物联网安全 3.2.1 物联网安全的挑战与需求 3.2.2 接口加密在物联网领域的实际应用 3.3 接口加密在金融与电子商务领域的应用 随着信息技术的不…

【初始RabbitMQ】延迟队列的实现

延迟队列概念 延迟队列中的元素是希望在指定时间到了之后或之前取出和处理消息&#xff0c;并且队列内部是有序的。简单来说&#xff0c;延时队列就是用来存放需要在指定时间被处理的元素的队列 延迟队列使用场景 延迟队列经常使用的场景有以下几点&#xff1a; 订单在十分…

Spring Boot 笔记 025 主界面

1.1 路由搭建 1.1.1 安装vue router npm install vue-router4 1.1.2 在src/router/index.js中创建路由器&#xff0c;并导出 import { createRouter, createWebHistory } from vue-router//导入组件 import LoginVue from /views/Login.vue import LayoutVue from /views/La…