❤️❤️--three.js

Three.js系列：坐标信息

1.层级结构Three.js描述的场景Sence，是一个以Sence为根节点的层级结构，如下图所示。其中Group不是必须的，并且可嵌套的。
betty_grant·2023-10-28 16:00

【毕业季】Three.js动态相册

活动地址：毕业季·进击的技术er前言岁月匆匆，又是一年毕业季，这次做个动态相册展示图片，放些有意思的内容，一起回忆下校园生活吧。目录预期效果实现流程基本流程工程文件搭建场景放置图片鼠标事件相机运动完整代码实现效果预期效果相册展示和点选切换，利用相机旋转和移动来实现一个点击切图平滑过渡的效果。实现流程基本流程1、搭建场景2、放置图片3、鼠标事件4、相机运动工程文件工程文件结构如下图：static：存
Mr_Bobcp·2023-10-28 16:29

基于Threejs开发的3D点位编辑器

技术栈three.js：一个用于创建3D图形的JavaScript库。Vue.js：一个流行的JavaScript框架，用于构建用户界面。功能点添加、编辑和删除点位。上传参考模型。
菜鸡饶·2023-10-28 16:28

Three.js 监听纹理加载

本文简介本文介绍Three.js的基础方法：监听材质加载。在《Three.js基础纹理贴图》里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
德育处主任Pro·2023-10-28 00:12

three.js学习笔记(三)——material材质

什么是材质Material材质用于在几何体的每个可见像素上添加颜色基础网格材质MeshBasicMaterial初始化基础网格材质MeshBasicMaterial，这种材质不受光照的影响。constmaterial=newTHREE.MeshBasicMaterial()接下来我们往场景中添加三个网格物体//球形缓冲几何体constsphere=newTHREE.Mesh(newTHREE.Sp
hongsir_12·2023-10-27 09:54

sdf 渲染文字在three.js中

sdf渲染文字在three.js中最终效果:上面是SDF文字贴图,下面是在webgl中渲染。实现使用tiny-sdf制作sdf文字贴图。
DSLMing·2023-10-27 09:50

Three.js 优化之合并 Mesh(1)

参考:Three.jsOptimizeLotsofObjectsThree.js优化之合并Mesh(1)Three.js优化方向模型不应该太大,添加到场景的时间太长模型loader可以使用woker优化合并
DSLMing·2023-10-27 09:19

改变对象位置的几种方式

参考Three.js中矩阵和向量的使用教程(附例子)改变对象位置的几种方式改变对象的位置、缩放、角度有多种方式。这里以位置为例。让其在出现y轴正方向5处。
DSLMing·2023-10-27 09:19

three.js 中shader 的几种呈现方式

three.js中shader的几种呈现方式这里以改变box的颜色为例。
DSLMing·2023-10-27 09:19

three.js 错误记录: GL_INVALID_OPERATION

错误信息：[.WebGL-0x7feb0c1a0600]GLERROR:GL_INVALID_OPERATION:glDrawArrays:attempttoaccessoutofrangeverticesinattribute0原因:可能是数组没有类型化多个uv的情况，每个uv的数量要和几何体顶点的总数量相等letgeometry=newTHREE.BufferGeometry();geomet
DSLMing·2023-10-27 09:49

Three.js 材质的 blending

Three.js材质的blending//blendingmodesexporttypeBlending=|typeofNoBlending|typeofNormalBlending|typeofAdditiveBlending
DSLMing·2023-10-27 09:15

层级结构化的3D场景运动变换（three.js webgl_hierarchy2例子)

Three.js中的webgl_hierarch2例子展示了如何进行3D场景的层级结构化矩阵变换。
绿风烟·2023-10-27 00:15

Three.js 基础纹理贴图

本文简介带尬猴，我嗨德育处主任尽管Three.js文档已经比较详细了，但对于刚接触Three.js的工友来说，最麻烦的还是不懂如何组合。
德育处主任Pro·2023-10-26 22:57

【three.js第六课】物体3D化

1.在【three.js第五课】的基础上引入AnaglyphEffect.js文件。
小张帅三代·2023-10-26 20:08

【three.js第三课】鼠标事件，移动、旋转物体

1.下载three.js的源码包后，文件夹结构如下：2.在【three.js第一课】的代码基础上，引入OrbitControls.js文件，此文件主要用于对鼠标的操作。
小张帅三代·2023-10-26 20:37

【three.js第二课】页面自适应

1.在【three.js第一课】的基础上加入以下代码，改变窗口大小时，页面内容会自适应//加入事件监听器,窗口自适应window.addEventListener('resize',function()
小张帅三代·2023-10-26 20:07

【three.js第四课】自定义材料、贴图。

2.在【three.js第三课】的代码基础上添加自定义的材料//自定义材料cubeMaterial数组//map:用于加载图片，THREE.TextureLoader().load('图片的地址')方法引入要放的图片
小张帅三代·2023-10-26 20:07

【three.js第五课】光线的添加和感光材料

材料分类：MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。光线分类注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果1.Ambien
小张帅三代·2023-10-26 20:07

【three.js 第一课】创建场景，显示几何体

1.three.js中文手册网址：https://www.techbrood.com/threejs/docs/注意事项：代码中出现的newTHREE中的THREE必须为大写。demo1body{margin:0;}canvas{width:100%;height:100%;}varscene=newTHREE.Scene();//创建场景//创建一个摄像机对象varcamera=newTHREE
小张帅三代·2023-10-26 20:06

three.js第一课

官网1.创建场景2.创建几何体3.创建材质4.创建网格模型5.将几何体、材质加入网格模型，设置网格模型的位置，将网格模型加入场景中6.创建相机，构造函数中设置角度、最后面视椎体的长宽比，相机离视椎体近端面的距离、视椎体的远端面的距离，设置相机的位置，设置相机看向的位置7.创建渲染器，设置渲染器的画布大小，设置要渲染的相机和场景Documentvarscene=newTHREE.Scene();//
张毫洁·2023-10-26 20:28

前端3D规划

学习Three.js：Three.js是一个基于WebGL的JavaScript库，它提供了许多方便的API，使得在网页上创建
ZHWenDong·2023-10-26 07:37

three.js 深度不完全解读

深度不完全解读一、深度值的获取1、方法1:FBO的深度附件深度信息通过渲染管线中的深度缓冲区（depthbuffer）来计算和存储。缓冲区用于存储每个像素点的深度值。在渲染过程中，渲染器会根据每个像素点的深度值来确定最终像素的可见性和着色。consttarget=newTHREE.WebGLRenderTarget();target.depthTexture=newTHREE.DepthTextu
DSLMing·2023-10-26 05:52

threejs(2)-Geometry进阶详解

一、全面讲解UV与应用在本节中，我们将讨论Three.js中的UV映射，包括UV映射的概念、与顶点位置的关系和区别以及如何在Geometry中设置UV坐标。
拾荒李·2023-10-25 22:55

threejs实现液体管道流动的动态效果

实现点：添加纹理、设置纹理的偏移、eg18-2:Three.js旋转的盒子(重构)--加入阴影varrenderer=null;//初始化渲染器functioninitThree(){renderer=
WFF的赵本山·2023-10-25 21:11

68 Three.js 导入OBJ格式和MTL的格式

Three.js可以很好地理解OBJ文件和MTL文件，而且Blender也支持这两种文件格式。
暮志未晚Webgl·2023-10-24 14:16

Three.js（八）—— 几何体对象、曲线、三维模型

文章目录8、几何体对象、曲线、三维模型8.1常见几何体和曲线API介绍几何体曲线8.2直线、椭圆、圆弧、基类Curve圆弧线ArcCurve曲线Curve方法.getPoints()几何体方法.setFromPoints()绘制圆弧线案例绘制直线效果8.3样条曲线、贝塞尔曲线一条光滑样条曲线案例贝塞尔曲线8.4多个线条组合曲线CurvePathU型案例8.5曲线路径管道成型TubeGeometry
summer_du·2023-10-24 11:01

❤️动态爱心代码合集❤️

Docker-compose容器编排》文章目录爱心代码合集three.jshtml+javascriptc++python-1python-2爱心代码合集所有代码均来源于网络，若侵犯到你的利益请联系删除three.js
AllenIverrui·2023-10-23 12:41

Vue中three.js导入gltf模型文件时报错

在vue项目中导入gltf/glb模型文件的时候出错了。以下是报错的原因：在gltf加载器的代码没有问题的情况下，出现这个错误的原因有两个：1、gltf模型文件被加密了2、draco压缩了而我加载的gltf文件不是加密的，所以第一个原因pass掉，那么就是draco压缩了。解决的方法是，在vue项目中，我们需要将draco文件夹复制一份到public目录下，不然在加载gltf/glb资源的时候就会
忽而秃头·2023-10-23 00:35

webgl计算包围盒大小

使用three.js；代码；第一个three.js示例body{margin:0;overflow:hidden;}varscene=newTHREE.Scene();vargeometry=newTHREE.SphereGeometry
bcbobo21cn·2023-10-22 01:13

THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等

THREE.JS绘制飞线攻击线迁移线拓扑图动画线条等在THREE中如何绘制飞线；使用的是Points+Shader封装的一个飞线方法；可以用于攻击线路，指向效果等；显卡GT7306000根飞线帧数在30FPS
饶砳砳·2023-10-21 23:00

Three.js + Tensorflow.js 构建实时人脸点云

本文重点介绍使用Three.js和Tensorflow.js实现实时人脸网格点云所需的步骤。它假设你之前了解异步javascript和Three.js基础知识，因此不会涵盖基础知识。
新缸中之脑·2023-10-21 14:07

three.js 实现星空粒子效果

threejs星空粒子效果Titlebody{margin:0;overflow:hidden;//隐藏body窗口区域滚动条}//创建场景对象varscene=newTHREE.Scene();//粒子系统vargeom=newTHREE.Geometry();varmaterial=newTHREE.ParticleBasicMaterial({//创建粒子模型size:0.01,//粒子大小
丢了个猪·2023-10-20 21:42

WebGL学习笔记-使用3D引擎threeJS实现星空粒子移动

Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下载地址:http://
weixin_30497527·2023-10-20 21:12

html5 3d引擎 星空,使用3D引擎threeJS实现星空粒子移动效果

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
知书达·2023-10-20 21:12

html5 3d引擎 星空,使用3D引擎threeJS实现星空粒子移动

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
包茅子·2023-10-20 21:42

ThingJS，three.js，unity 3D开发框架比较

基于WebGL周边衍生了众多的第三方库，其中Three.js属于开发应用，做了一定的渲染细节封装，ThingJS则封装更多对模型的操作，力求让更多无3D开发经验的人员上手。
夏潇潇雨歇·2023-10-20 08:33

three.js学习笔记(十二)——使用Blender自定义模型

这次我们将学习如何用3D软件创建自己的模型选择软件有很多软件如Cinema4D、Maya、3DSMax、Blender、ZBrush、MarmosetToolbag、SubstancePainter等都很不错。当然它们在用户体验、性能、功能、兼容性、价格等方面也有所不同。这次我们选择Blender，因为它是免费的，性能卓越同时适用于所有主流操作系统，还有一个广泛的社区。下载Blender官网下载地
hongsir_12·2023-10-20 06:19

three.js实现3D图形渲染

Three.js是一个JavaScript库，用于在浏览器中创建和显示3D图形。
smallmww·2023-10-19 16:10

用three.js在网页实现3D模型的展示

首先，下载three.js文件，在threejs官网能下，这里附上地址链接一条https://threejs.org/然后，下载解压，会得到three.js-master文件，在build目录找到three.js
从来不是我_4320·2023-10-19 15:26

【three.js / React-three-fiber】加载3D模型性能优化

在本文中，我们将探讨如何在three.js/React-three-fiber中对加载三维模型进行性能优化。我们将介绍一些实践方法和技巧，让你的虚拟世界或网站能够以更好的性能运行。二、
蓝瑟·2023-10-19 11:48

three.js学习笔记(五)——Shadows阴影

Three.js有一个内置的解决方案，虽然其并不完美，但用起来很方便。阴影是怎么工作的？
hongsir_12·2023-10-19 11:17

three.js学习笔记(二十)——性能优化提示

初设import'./style.css'import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'/***Base*///Canvasconstcanvas=document.querySelector('canvas.webgl')//Sceneconstsce
hongsir_12·2023-10-19 11:17

android+webgl+性能优化,WebGL Three.js大量文本渲染性能优化方案演示

JavaScript语言：JaveScriptBabelCoffeeScript确定/*https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/*/require(['src/cartogram','underscore'],function(Cartogram,_){
长不大的BEN·2023-10-19 11:16

three.js 性能优化 实例化网格模型InstancedMesh

three.js还提供了InstanceMesh实例
Felicia_1001101·2023-10-19 11:45

Three.js使用InstancedMesh实现性能优化

1.引言有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？
野生的大熊·2023-10-19 11:09

webGL编程指南实战教程

学习路线：如果你是在校大学生，有足够的时间去学习：前端>数学（几何+线性代数）>图形学>webgl>shader>threejs>three.js源码如果你是工作中使用，需要快速出产成品：前端>threeJs
IT飞牛·2023-10-19 08:29

Three.js - 实现一个3D地球可视化

3D地球可视化效果3D地球的开发并不复杂，对球形物体进行贴图操作，完成球体自转和月球公转，太阳场景设置等即可上代码{{loadingProcess}}%import{onBeforeUnmount,onMounted,nextTick,ref}from"vue"importmodulesfrom"./modules/index.js";importAnimationsfrom'./utils/an
Li_Ning21·2023-10-18 20:42

three.js学习-智慧城市

前言在前面基础知识（摄像机，渲染器，轨道控制器，坐标轴，场景适配，渲染循环、几何体、材质、光等）有了基础了解后，还需要对着色器（坐标）有一定的学习了解然后就可以做智慧城市的项目了技术：vite+js以下是项目预览1697009690667050页面下面附有git项目地址，自取1.需求实现智慧城市，对城市数据实时监控，对建筑动效标注和预览1、城市模型处理（材质颜色、边线效果、着色器白膜效果、水波纹倒
Best_卡卡·2023-10-18 11:03

vue中使用three.js

首先在html页面中引入页面中exportdefault{data(){return{mesh:null,renderer:null,scene:null,camera:null,};},mounted(){this.init();},methods:{init(){//创建场景this.scene=newTHREE.Scene();//创建相机（第一个参数视野夹角0~180°，第二参数相机大小，
hanhan丶·2023-10-17 19:06

html显示fps,Three.js - 使用stats.js库显示帧数（以及画面渲染时间）

1，stats.js介绍(1)stats.js是一个Three.js开发的辅助库，这个库同样也是Three.js作者开发的。(2)stats.js主要用于检测动画运行时的帧数。
岑秋苑·2023-10-17 13:22
上一页 7 8 9 10 11 12 13 14 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他