【前端知识】Three 学习日志（一）—— Three.js 的简单尝试
Three 学习日志（一）—— Three.js 的简单尝试 一、简单尝试 Three.js <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Learn Three.js</...
【前端知识】Three 学习日志（十一）—— 高光网格材质Phong
Three 学习日志（十一）—— 高光网格材质Phong 一、设置高光亮度属性 // 模拟镜面反射，产生一个高光效果const material = new THREE.MeshPhongMaterial({ color: 0xff0000, shininess: 10, //高光部分的亮度，默认30}); // 模拟镜面反射，产生一个高光效果const material = new THREE.M...
Three.js中实现对InstanceMesh的碰撞检测
1. 概述之前的文章提到，在Three.js中使用InstanceMesh来实现性能优化，可以实现单个Mesh的拾取功能那，能不能实现碰撞检测呢？肯定是可以的，不过Three.js中并没有直接的API可以实现对InstanceMesh的碰撞检测，需要手动实现回顾本文的描述的Three.js的场景前提： 使用InstanceMesh来构建数量众多的桥柱，这些柱子都是圆柱且材质相同使用一个初始圆柱和一系...
【前端知识】Three 学习日志（十）—— 常见几何体（长方体、球体、圆柱、矩形平面、圆形平面）
Three 学习日志（十）—— 常见几何体（长方体、球体、圆柱、矩形平面、圆形平面） 一、构建常用几何体 const geometry_list = [] // BoxGeometry：长方体const geometry_box = new THREE.BoxGeometry(100, 100, 100);geometry_list.push(geometry_box);// SphereGeome...
【前端知识】Three 学习日志（九）—— 阵列立方体和相机适配体验
Three 学习日志（九）—— 阵列立方体和相机适配体验 一、双层for循环创建阵列模型 //创建一个长方体几何对象Geometryconst geometry = new THREE.BoxGeometry(100, 100, 100);//材质对象Materialconst material = new THREE.MeshLambertMaterial({ color: 0x00ffff, /...
【前端知识】Three 学习日志（四）—— 相机控件
Three 学习日志（四）—— 相机控件 一、引入相机控件 <!-- 引入相机控件 --><script type="importmap"> { "imports": { "three": "../build/three.module.js", "three/addons/": "../examples/jsm/" } }</script> <script type="module"> // 引入轨道...
Three.js利用stats插件实现性能监听
关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景，本文主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second...
Three.js实现hello world以及绘制线的方法
本文主要和大家介绍关于Three.js入门之hello world以及如何绘制线的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，希望能帮助到大家。hello world首先使用我们先用three.js创建一个立方体的hello world类型的案例。<!doctype html> <html> <head> <meta charset="UTF-8"> <meta ...
Threejs实现数字人3D粽子
1，功能介绍 Threejs实现加载粽子模型，使用AI生成数字人并进行介绍，效果如下图 2，功能实现 第一步：粽子建模，模型下载地址：【免费】粽子模型glb，fbx，max资源-CSDN文库 第二步：数字人生成 首先使用ChatGPT生成文案 复制文案到腾讯智影中，并选择自己喜欢的数字人，最后生成数字人视频MP4 第三步：使用Threejs技术实现 首先，加载粽子模型并添加到场景中的函数。使用了Three...
three.js加载模型失败（跨域问题）
ead><meta charset="utf-8"> <title>test Load OBJ model </title> <script type="text/javascript" src="three.js-dev/build/three.js"></script> <script type="text/javascript" src="three.js-dev/examples/js/loade...