ThreeJs技术交流（4）——Unity3D与ThreeJS、以及在3D场景中添加视频Unity3D和ThreeJS在3D场景中添加视频基于平面添加视频基于video.js视屏控件添加视频结束语 Unity3D和ThreeJS最近我正在学习Unity3D，ThreeJS的文章可能更新地会比较慢一点。其实Unity3D和ThreeJS既有相同点又有很大的区别，前者是世界首屈一指的3D游戏引擎，展现
转载
2024-03-06 10:22:08
359阅读
本文将详细描述如何使用Three.js给3D对象添加贴图（Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。）。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器（最好是Chrome/FireFox/Safari/Edge/IE11+）。 本文的在线演示结果和代码请点击这里：Three.js贴图实例。什么是贴图（Texture Mapping） 贴
转载
2024-09-30 13:49:08
52阅读
一个物理产品对应一个产品数字孪生体，那数字孪生体是如何打造，如何展示的呢？这就离不开可视化的应用，ThingJS具备轻量化的3D开发理念。数字孪生体产品数字孪生体是指产品物理实体的工作状态和工作进展在信息空间的全要素重建及数字化映射，是一个集成的多物理、多尺度、超写实、动态概率仿真模型，可用来模拟、监控、诊断、预测、控制产品物理实体在现实环境中的形成过程、状态和行为。产品数字孪生体对应产品物理实体
为什么我要写这样一篇文章呢？其实是这样的，最近我的一个老同学，一直在跟我吐槽unity的webGL有多坑多坑，当初我们是一起学的unity,也是怀着一颗做游戏的梦想，最后呢，他去做了游戏，我做了当时很火的VR和AR，这几年来呢，我这位同学一直在做手游，最近换了一家公司，说是要做页游，使用unity的webGL模块来做，他呢，遇到的坑是真多，结合我自己的工作经验，我总结一下unity的webgl和t
转载
2024-06-19 20:09:25
544阅读
文章目录多线条组合例子 专栏目录请点击多线条组合我们可以通过CurvePath把多个曲线、直线等合并成一个曲线例子<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margi
转载
2024-10-24 11:23:41
96阅读
Threejs开发项目加载的模型，可能会比较大，模型三角形面数越多，一方面是threejs渲染模型的性能下降，另一方面是加载模型的时间比较长，影响体验。因为三维模型文件往往比较大，所以Web3D项目相比较普通的前端web项目，需要加载文件体积比较大，需要花费的时间自然比较多，加载时间比较长的情况下，对于用户来说体验肯定不太好。二进制格式使用不同文件格式，文件的大小会有所不同，如果同一个模型，导出二
“未来早已到来，只是尚未流行。”——K.K 最近，由于业务的需求，笔者的团队终于迈进了3d时代。 其实，早在2017年，笔者便开始尝试前端的3d探索，因为当时主要的业务场景是运营活动，求新、创新便是活动的特性。不过，当时由于种种原因，最后未能落地，但未曾想到，会在3年后有了落地的时刻：  
题外话：关于黑色和白色在计算机中的颜色占比 黑色RBG=（0,0,0）、白色RBG=（1,1,1） 在现实生活中黑色吸收所有光，即所有光都不反射，因为本身的其RGB的颜色组成都是0； 白色反射所有光，即所有光都反射，因为本身的其RGB的颜色组成都是1。进入正题原理： 辉光的实现可以拆分成两部分： 1、原来比较亮的地方更亮 2、原来亮的地方附近也变亮 用纯数学的方式去表达就是： 1、更亮即 lumi
转载
2024-05-05 13:10:41
303阅读
由于浏览器是一个2d视口，而在里面显示three.js的内容是3d场景，所以，现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案，那就是THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）。 我们一般都会设置三维场景的显示区域，如果，指明当前显示的2d坐
转载
2024-10-13 19:49:45
134阅读
对于许多行业来说，数字孪生技术是未来。数字孪生定义数字孪生不仅仅是某物的副本或克隆，它是对象或系统的动态实时表示。数字孪生是一种虚拟模型，旨在准确反映物理对象。是物理对象、流程、服务或环境的数字表示，其行为和外观与现实世界中的对应物相似，可用于理解和优化其性能。 借助传感器、执行器和其他连接设备，数字孪生还可用于实时控制物理对象或系统。这使得在现实世界中实施新想法和策略之前，可以在
前言工欲善其事必先利其器流程思考数字孪生本质上一种基于实际物理数据的可视化方案，通过对接实际数据，在三维界面中展示孪生结果。 那么这个流程就很简单了。 整个流程分为三块：数据来源-》数据分析-》数据展示输入数据首先我们需要考虑我们能拿到什么。第一，实际物体的三维数据从哪里来，第二，实际数据怎么获取到。模型数据工业上常常会用到CAD模型，CAD模型具有精确、统一的特点，但是CAD不是三角面片，我们不
转载
2024-03-19 17:20:03
684阅读
1、组对象Group、层级模型-形成树状结构//创建两个网格模型mesh1、mesh2
const geometry = new THREE.BoxGeometry(20, 20, 20);
const material = new THREE.MeshLambertMaterial({color: 0x00ffff});
const group = new THREE.Group();
cons
转载
2024-03-06 16:03:24
150阅读
图形学中的相机定义了三维空间到二维屏幕的投影方式，根据投影方式的不同，相机可分为 正交投影相机 与 透视投影相机。正交投影相机 ： 近处、远处的物体大小尺寸保持一致，常适用于工程制图、建模软件，如CAD, UG 等。透视投影相机： 远处的物体比近处的物体小， 模拟的是现实中人眼的状态。 正交投影相机：1 var camera = new THREE.OrthographicC
转载
2024-02-26 20:57:03
256阅读
在人机交互的过程中会产生大量的数据，特别是信息时代的今天，几乎任何事物都可以以数据的形式表达。但是未经整理的数据的呈现对于普通用户是杂乱无章的，人们更习惯接受的呈现方式是图表甚至视频，将数据以更丰富的方式呈现，可以对我们理解数据产生更大的帮助。数据可视化和数字孪生都是用于帮助人们理解和分析数据的工具，但它们有着不同的定位和应用方式：数据可视化数据可视化侧重于将数据以图形、图表、地图等形式直观呈现出
转载
2024-09-19 06:43:53
114阅读
three.js WebGL第三方库，提供3D显示功能运行在浏览器中的3D引
原创
2023-06-26 06:35:32
107阅读
一、Three.js相关概念1. WebGLWebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。2. OpenGLOpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、Java 、C、C++ 、 python 等都能支持OpenG ，OpenGL的Javascript实现就是WebGL，另外很多CA
转载
2024-04-22 10:30:02
144阅读
目录1. threejs介绍2. thresjs的使用3. 组件介绍4. threejs的动画5. 参考资料前几天在网上看到一个threejs的实现的web 3d的动画，很炫酷，所以特地去了解了一下threejs。我们首先看下官方使用threejs实现的效果： 1. threejs介绍threejs是基于原生WebGL API和着色器封装得到的3D引擎，也就是一个.js库。直接
转载
2024-05-10 19:59:10
273阅读
简介Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，成为前端开发者完成3D绘图的得力工具。three.js官方文档 ：threejs.org/three.js中文文档 ： techbrood.com/threejs/doc…Three.js整体认知（附：Three.js功能概览）一、threejs
转载
2024-08-23 21:59:42
160阅读
使用场景当我们有大量的相同的几何体形状和相同的材质时，比如我有一千个立方几何体要渲染，他们的材质时相同的，但是坐标、大小矩阵变换这些不相同。如果按照常规的一个个Mesh的渲染，要生成一千个geometry，一千个material，一千个Mesh，占用太多内存和性能。我们可以使用合并几何体的方式，但这样合并后变为一个个体 ，失去了对单个小模型的控制。three.js还提供了InstanceMesh实
转载
2024-04-19 13:23:29
410阅读
ThreeJS学习6_几何体相关(BufferGeometry)使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销可以自定义顶点位置, 面片索引, 法向量, 颜色值目录ThreeJS学习6_几何体相关(BufferGeometry)1. BufferGeometry使用初体验2. 简单压缩几何体的方法3. 创建由点到线的几何体4. 创建由线到面的几何体5. 创
转载
2024-05-19 15:47:06
78阅读
