threejs

threeJs--vue 性能问题

这两年大家使用threejs做项目是越来越多了，为了更方面使用three引擎以及照顾前端开发工程师的情绪，大家都喜欢使用前端框架，这里我分享一个在使用vue框架遇到的一个坑，大家在使用vue时候，都喜欢把变量定义到
知行合一实践派·2023-09-28 12:56

小白vite+vue3搭建项目整个流程

第一步查看npm版本npm-v，npm版本是7+，创建项目命令：npmcreatevite@latestthreejsVue----templatevue第二步//进入项目名为threejsVue的项目命令
PXY_J·2023-09-28 10:52

threejs之 GridHelper

GridHelpergridHelper为二维辅助网格，注意：这个二维不像其他threejs元素，如PlaneGeometry的二维为x轴和y轴。
qq_37200686·2023-09-26 18:13

threejs的DragControls当click时会触发dragstart和dragend问题解决

问题描述：当拖拽结束后，会触发效果一，当click时会触发效果二。但是实际上，当我click时会触发DragControls的dragstart和dragend事件，导致我做了一次拖拽操作。解决：当click时鼠标事件如下：dragstartmousedowndragendmouseUpclick我发现，当click时只会触发dragstart和dragend事件，这样我们可以通过是否触发了dra
qq_37200686·2023-09-26 18:40

threejs 反射的实现

引入库//主要import{SSRPass,SSRPassParams}from'three/examples/jsm/postprocessing/SSRPass';import{EffectComposer}from'three/examples/jsm/postprocessing/EffectComposer';//Gamma和ShaderPass主要做矫正用的，习惯写pass通道的时候加
憨豆人生·2023-09-25 07:37

threejs遍历模型的子对象；threejs中的3D模型指定位置变颜色例如设置的是红色但是显示的是黑色或者是白色；threejs给MeshPhysicalMaterial材质的物体修改颜色

效果：1.threejs遍历模型的子对象方法traversethis.otherModel.traverse(function(child){if(childinstanceofTHREE.Mesh){
祝你今天也快乐·2023-09-24 03:30

threejs修改导入的3D模型的初始化角度

如上是默认加载的看上去是水平的，想修改成俯视的效果如下：1.直接旋转3D模型//将模型旋转到合适的位置model.rotation.y=Math.PI/3;//60度model.lineModel.rotation.x=Math.PI/6;//30度但是这里就会有问题及时物体周围生成的label(tip)位置就会错位；2.还是调整相机的角度更妙（不会影响原本的lable位置）这里的3个参数分别是x
祝你今天也快乐·2023-09-24 03:30

threejs给3d模型中的物体换肤（修改材质）

变成这样this.otherModel.traverse(function(child){if(childinstanceofTHREE.Mesh&&child.name=='Cylinder240'){//导入纹理consttextureLoader=newTHREE.TextureLoader();constfloorColor=textureLoader.load(require('../.
祝你今天也快乐·2023-09-24 03:30

THREE.JS 3D模型服务器报404问题（VUE fbx文件在本地能显示 服务器上不显示报404）

问题：作为新手，新建立的threeJS模型，本地运行模型是可以显示的，但服务器模型却报404写法：fbxloader("TR7007Q").then((tree)=>{tree.position.set
月下脆竹書閣·2023-09-23 11:24

three.js加载gltf文件过程以及遇到的问题

说明：在vue项目中使用的threejs;刚开始，我是从网上下载的gltf文件，将.gltf文件放在了src/assets/xxx.gltf,对gltf格式的文件并不了解，使用如下方式加载gltf文件时
汉武大帝··2023-09-23 10:50

ThreeJS入门——场景(scene)、相机(camera)、渲染器(renderer)

ThreeJS官网Three.js–JavaScript3DLibraryThreeJS的三要素——场景(scene)、相机(camera)、渲染器(renderer)。ThreeJS的灯光。
xyphf_和派孔明·2023-09-22 19:54

Three.js教程：WebGL渲染器设置(锯齿模糊)

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生WebGL渲染器设置(锯齿模糊)一般实际开发，threejs的WebGL渲染器需要进行一些通用的基础配置，本节课给大家简单介绍下
ygtu2018·2023-09-22 19:24

ThreeJs 学习之旅(十八)—Realistic render(真实渲染)

初始代码import"./style.css";import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import*asdatfrom"dat.gui";import{GLTFLoader}from"three/examples/jsm/loaders/GL
Florenza·2023-09-22 19:23

Threejs-渲染器

渲染器WebGLRenderer构造器WebGLRenderer(parameters:Object)parameterscanvas-一个供渲染器绘制其输出的canvas它和下面的domElement属性对应。如果没有传这个参数，会创建一个新canvascontext-可用于将渲染器附加到已有的渲染环境(RenderingContext)中。默认值是nullprecision-着色器精度.可以是
工頁光軍·2023-09-22 19:52

二、threejs 学习笔记-几何体BufferGeometry

友情链接：threejs中文文档目录1.几何体顶点数据和点模型(1)缓冲类型几何体BufferGeometry(2)BufferAttribute定义几何体顶点数据(3)设置几何体顶点.attributes.position
焦焦焦焦焦·2023-09-22 17:07

Threejs_几何体_曲线

类Geometry1常见：长方体BoxGeometry圆柱体CylinderGeometry球体SphereGeometry圆锥、棱锥ConeGeometry2正多面体正四面体TetrahedronGeometry正八面体OctahedronGeometry正十二面体DodecahedronGeometry正二十面体IcosahedronGeometry3平面：环平面RingGeometry矩形平
风雨飘摇中的石头·2023-09-22 17:07

Three.js基础之图元

图元(Primitives),即threejs内置的一些基础的3D形状，立方体，球体，圆锥体，平面圆等，顶点，图元，片元，图像之间的关系顶点：就是在3D世界中某一个具体的点，即点的位置（x，y，z），除了位置信息
四月的你·2023-09-22 17:37

Three.js常见几何体和曲线API介绍

Three.js常见几何体和曲线API介绍本文是Three.js电子书的7.1节本节课主要内容是对Threejs几何体和曲线相关的API进行一个整体的介绍，更具体的介绍可以查看本章后面几节课程。
郭隆邦技术博客·2023-09-22 17:05

Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

画布大小、渲染帧率和相机适配体验Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用Three——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移Threejs
Southern Wind·2023-09-22 17:04

threejs 中的加载器

1，纹理贴图加载器TextureLoader()//纹理贴图加载器TextureLoaderconsttexLoader=newTHREE.TextureLoader();//.load()方法加载图像，返回一个纹理对象Textureconsttexture=texLoader.load('./earth.jpg');constmaterial=newTHREE.MeshLambertMateri
汉武大帝··2023-09-22 10:13

opengl坐标变换小结

https://github.com/dslming/dslming.github.com/blob/master/ThreejsLearning/006-shader/004-%E9%A1%B6%E7%
Threejs开发者·2023-09-21 16:06

echarts-根据数据大小实现折线渐变色

先看示例图：这几年一直在做大数据可视化前端开发，接下来把近几年用到的比较经典案例给大家分享下，主要用到的可视化库为Echarts、Threejs、Element、D3、fabricjs等。
天外天-亮·2023-09-21 07:36

ThreeJS-3D教学二基础形状展示

three中提供了22个基础模型，此案例除了EdgesGeometry、ExtrudeGeometry、TextGeometry、WireframeGeometry，涵盖17个形状。Fog雾化设置，这是scene场景效果EdgesGeometry,WireframeGeometry更多地可能作为辅助功能去查看几何体的边和线框ExtrudeGeometry则是将一个二维图形沿z轴拉伸出一个三维图形T
天外天-亮·2023-09-20 16:48

【前端实习生入职】之-threejs实现可拖动立体框

，已经有一段时间没有更新了，这段时间匆匆忙忙来到北京实习，从一个南方的前端在校学生到北方来生活实习，一切都在慢慢适应当中，来公司之前就了解到这家公司是做自动驾驶以及ai方面的，到公司后果不其然疯狂学习threejs
joey不熬夜·2023-09-20 16:48

H5实例教学--3D全景(ThreeJs全景Demo)

前言在现在市面上很多全景H5的环境下，要实现全景的方式有很多，可以用css3直接构建也可以用基于threeJs的库来实现，还有很多别的制作全景的软件使用本教学适用于未开发过3D全景的工程狮如果觉得内容太无聊可以直接跳到最后下载代码理论整个
weixin_34054931·2023-09-20 16:17

教你如何使用blender+threejs搭建一个3d展厅平台 | 大帅老猿threejs特训

2.使用threejs技术导入展馆模型、把视频贴在模型的集合上显示。3.导入人物模型，监听键盘事件让人物行动起
大熊猫·2023-09-20 16:17

【ThreeJS基础教程-初识Threejs】1.ThreeJS的HelloWorld

ThreeJS的HelloWorld学习ThreeJS的捷径杂项第一个案例案例效果案例解析引入threejs创建一个场景（演出舞台）创建相机（摄影师）创建一个渲染器（相片处理）创建一个物体（演员）开始渲染
幻梦丶海炎·2023-09-20 15:46

Threejs 的前世今生及基本概念

原文：http://blog.csdn.net/lijunfan1994/article/details/52370629近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。OpenGL,WebGL到Three.jsOpenG
向日葵·2023-09-20 15:45

【ThreeJS】基础教学 创建一个立方体

因为看到ThingJS中的文章ThingJS和threejs的区别在哪？ThingJS是免费的么？
Ning+·2023-09-20 15:15

ThreeJS-3D教学一基础场景创建

Three.js是一个开源的JS3D图形库，用于创建和展示高性能、交互式的3D图形场景。它建立在WebGL技术之上，并提供了丰富的功能和工具，使开发者可以轻松地构建令人惊叹的3D可视化效果。Three.js提供了一套完整的工具和API，用于创建和管理3D场景、几何体、纹理、光照、材质和相机等方面。它具有强大的渲染引擎，可以处理复杂的渲染任务，如阴影、透明度、反射和折射等效果。该库还支持动画、骨骼动
天外天-亮·2023-09-20 15:45

25 Three.js的点光源THREE.PointLight

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/27.htmlTHREE.PointLight的相关属性属性描述color（颜色）光源的颜色，详情见上一节
暮志未晚Webgl·2023-09-20 08:53

网页3D之babylon.js

最近公司有虚拟仿真方面的想法，所以做了一些网页3D方面的研究，以及代码，这里记录一下框架选择之前用过threejs，所以一开始考虑用threejs做，但是之前用threejs的时候碰到过一个问题：物体位置坐标以及角度的调整太麻烦
要这头发有何用··2023-09-19 08:40

ThreeJs 基础入门

Three.js是一款运行在浏览器中的3D引擎，你可以用它在web中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解webgl的世界。3D场景前置知识1.场景(Scene)：是物体、光源等元素的容器，可以配合chrome插件使用，抛出window.scene即可实时调整obj的信息和材质信息。2.相机（Camera）：场景中的相机，代替人眼去观察，场景中只能添加
了无_数据科学·2023-09-19 07:58

threeJs 样例，webgl2_volume_perlin的修改

官方例子webgl2_volume_perlin.html,把perlin噪音绘制出来了，可以直观感受perlin噪音的图像形状。原例子支持立方体，我把立方体改为了球形。three.jswebgl2-volumethree.jswebgl2-volume{"imports":{"three":"../build/three.module.js","three/addons/":"./jsm/"}}
从杰·2023-09-19 03:32

Cesium与Threejs融合

融合demo一、简介将Cesium与three.js进行融合，从而是3d具备大场景GIS能力，使GIS具备3d能力。关键步骤如下：1、局部坐标系定义和坐标转换2、相机同步3、事件同步二、代码import{onMounted}from'vue'import'@anov/gis/dist/index.css'importANOVGISfrom'@anov/gis'importthreeInitfrom
苹果园dog·2023-09-18 20:40

threejs的使用

threejs介绍：Three.js是一款基于WebGL的JavaScript3D库，用于创建和渲染3D图形场景。
简宁909·2023-09-18 09:05

第一个Three的demo实例

Three的第一个Demo前言效果图1、导入threejs2、创建场景3、创建相机4、创建渲染器5、创建几何图形6、创建材质7、创建网格8、将网格添加到场景中9、设置相机的位置10、渲染11、整体代码前言创建第一个
冯浩(grow up)·2023-09-18 04:52

threejs中随机生成颜色

这里封装了两个方法：getRandomColor，random,直接调用getRandomColor方法即可；getRandomColor(){letc1=this.random(0,255);letc2=this.random(0,255);letc3=this.random(0,255);returnnewthis.$three.Color("rgb("+c1+","+c2+","+c3+")
汉武大帝··2023-09-16 03:34

threejs开发太阳系案例

先看效果：importDrawerfrom"@/components/Drawer.vue";//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{onlyEnterMoney}from"@/utils/fn.js";exportdefau
汉武大帝··2023-09-16 03:34

97 Three.js 使用 specularMap 设置高光贴图

案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/160.html简介我们可以通过设置高光贴图来实现部分区域反光。
暮志未晚Webgl·2023-09-15 13:58

【数字人】使用Mixamo动画资源

使用Mixamo动画资源一、获取资源和数据处理1.获取资源2.模型选择3.绑定骨骼4.动画检索5.动画参数二、面向不同平台的处理1.面向Unity平台的使用2.面向UE平台的使用3.面向Threejs的使用
灵境引路人·2023-09-14 20:22

ThreeJS – 如何提升three.js的渲染效果

1THREE.WebGLRenderer的参数设置THREE.WebGLRenderer对象的参数设置非常影响渲染效果要想获得比较好的渲染效果，对THREE.WebGLRenderer可进行以下参数设置。varrenderer;renderer=newTHREE.WebGLRenderer({antialias:true});renderer.physicallyCorrectLights=tru
奇怪的点·2023-09-14 14:59

ThreeJS进阶之使用后期处理

什么是后期处理？很多three.js应用程序是直接将三维物体渲染到屏幕上的。有时，你或许希望应用一个或多个图形效果，例如景深、发光、胶片微粒或是各种类型的抗锯齿。后期处理是一种被广泛使用、用于来实现这些效果的方式。首先，场景被渲染到一个渲染目标上，渲染目标表示的是一块在显存中的缓冲区。接下来，在图像最终被渲染到屏幕之前，一个或多个后期处理过程将滤镜和效果应用到图像缓冲区。这里three.js通过E
BinParker·2023-09-12 07:48

ThreeJS进阶之矩阵变换

ThreeJS的矩阵变换Three.js使用matrix编码3D变换——平移（位置），旋转和缩放。Object3D的每个实例都有一个matrix，用于存储该对象的位置，旋转和比例。
BinParker·2023-09-12 07:48

ThreeJS进阶之动画系统（Animation system）

ThreeJS进阶之动画系统概述在three.js动画系统中，我们可以为模型的各种属性设置动画：SkinnedMesh（蒙皮和装配模型）的骨骼，morphtargets（变形目标），不同的材料属性（颜色
BinParker·2023-09-12 07:48

GitHub上的WebGL库调研

官网地址：https://threejs.org/GitHub地址：https://github.com/mrdoob/three.js2.phaser.js  star:15.3k  更新速率：频繁  
sky.....·2023-09-11 13:45

风机可视化效果实现

主要用Threejs来实现，大致效果是一个风机，从原来白色表面材质，逐渐过渡到线框效果，并且底部也有一些类似于流线浮动的效果。
sky.....·2023-09-11 13:13

threejs的dat.gui辅助工具的使用

threejs的dat.gui辅助工具的使用安装使用安装npmidat.gui-S使用importdatfrom'dat.gui'constcontrolData={rotationSpeed:0.01
小菜鸟学代码···2023-09-11 00:43

threeJS 踩坑

在官网学习的引入方法报错信息如下：Failedtoresolvemodulespecifier"three".Relativereferencesmuststartwitheither"/","./",or"../".查啦很多东西自己才疏学浅：但是大概原因我理解就是，modle下引入sdn在线资源没问题；但是OrbitControls.js文件中有impot导入；而正常html不支持语法，所以我改
Έι·2023-09-10 23:47

three.js的学习

Threejs1前言Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
Shadow Shine·2023-09-09 16:40
上一页 4 5 6 7 8 9 10 11 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他