THREE.js

three.js 加载stl文件并解析

效果：加载stl格式的文件需要设置材质material；stl、obj都是静态模型，不可以包含动画，fbx除了包含几何、材质信息，可以存储骨骼动画等数据。代码：.stl格式模型加载letN=128;letanalyser=null;//1，创建场景varscene=newTHREE.Scene();//创建STL加载器varstlLoader=newTHREE.STLLoader();stlLoa
汉武大帝··2023-09-16 03:03

three.js 加载obj文件并解析

效果：stl、obj都是静态模型，不可以包含动画，fbx除了包含几何、材质信息，可以存储骨骼动画等数据。说明：使用三维软件导出.obj模型文件的时候，会同时导出一个材质文件.mtl；.obj和.stl文件包含的信息一样都是几何体顶点相关数据，材质文件.mtl包含的是模型的材质信息，比如颜色、贴图路径等。可以只加载obj文件，默认材质是Phong；只加载obj文件的话，直接将返回的数据添加到场景中即
汉武大帝··2023-09-16 03:03

three.js 模型对象旋转平移缩放变换

1，缩放：网格模型Mesh的属性scale表示模型对象的缩放比例，默认是THREE.Vector3(1.0,1.0,1.0);设置缩放的方式：mesh.scale.set(0.5,1.5,2);//方式一：xyz方向分别缩放0.5,1.5,2倍mesh.scale.x=2.0;//方式二：x方向分别缩放2倍2，位置属性position:属性值也是三维向量对象，默认是THREE.Vector3(0.
汉武大帝··2023-09-16 03:33

three.js 绘制圆弧（圆）

先看效果：该效果是通过ArcCurve渲染圆或者圆弧，参数：ArcCurve(x,y,r,srange,erange);x,y圆弧坐标原点,r：圆弧半径;srange,erange：圆弧起始角度；//一些教程中介绍说ArcCurve是EllipseCurve的别名，查看参数，发现两者类似//和椭圆曲线EllipseCurve(aX,aY,xRadius,yRadius,aStartAngle,aE
汉武大帝··2023-09-16 03:33

three.js 使用canvas加载图片作为模型的纹理贴图

效果：代码：canvas画布作为纹理贴图vartexture;//1,创建场景对象varscene=newTHREE.Scene();//2，使用canvas画图作为纹理贴图//先使用canvas画图varcanvas=document.createElement('canvas');canvas.width=150;canvas.height=150;varctx=canvas.getConte
汉武大帝··2023-09-16 03:33

three.js Face3对象定义Geometry的三角形面

Face3对象定义Geometry的三角形面:Face3(a,b,c,normal,color,materialIndex)a—顶点索引A。b—顶点索引B。c—顶点索引C。normal—面法向量或顶点法向量数组。color—面颜色或顶点颜色的数组。materialIndex—材料索引。效果如下：添加了法向量，设置了点光源，环境光，但是两个面的分界面处不明显，此处有bug代码如下:Face3对象定义
汉武大帝··2023-09-16 03:32

vue项目中安装使用three.js

1,安装插件npminstallthree--save2，在main.js中设置一下，将three.js挂载到vue上：import*asThreefrom"three";Vue.prototype.
汉武大帝··2023-09-16 03:02

three.js做3D场景，旋转动画，往复移动

先看效果：代码：first3Dbody{margin:0;padding:0;}canvas{margin:0;padding:0;}//1,创建场景对象varscene=newTHREE.Scene();//2,创建网格模型vargeometry=newTHREE.BoxGeometry(100,100,100);//创建一个立方体几何对象varmaterial=newTHREE.MeshLam
汉武大帝··2023-09-16 03:02

three.js 设置Geometry顶点位置、顶点颜色数据

设置Geometry顶点位置、顶点颜色数据：使用Geometry对象创建了空间线条三角形，空间点，主要用到的对象有：Vector3：该对象是three.js中的三维向量对象，可以通过该对象表示一个顶点的
汉武大帝··2023-09-16 03:02

解决three.js中加载纹理贴图时，初次渲染不显示的问题

效果：解决方法：主要是将一些构建网格对象的操作放在了textureLoader.load()方法中，加载图片也用了requireinit(){//1,创建场景对象this.scene=newthis.$three.Scene();//2,创建立方缓冲几何体this.geometry=newthis.$three.BoxGeometry(100,100,100);//3,创建纹理贴图加载器对象con
汉武大帝··2023-09-16 03:01

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

案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/160.html简介我们可以通过设置高光贴图来实现部分区域反光。通过设置高光贴图，我们会发现，只有海洋部分会有发光，而陆地部分没有高光的效果。一般来讲，像素的值越高（从黑到白），物体表面就越亮。通常高光贴图会与specular属性一起使用，该属性可以用来决定反光的颜色。案例实现我们创建一个球体，
暮志未晚Webgl·2023-09-15 13:58

轻松上手Three.js：JavaScript 3D库指南

1.Three.js概述Three.js是使用JavaScript语言编写的一款运行在浏览器中的3D引擎。
衍生星球·2023-09-15 07:05

Three.js之顶点UV坐标、纹理贴图

颜色贴图属性.map顶点UV坐标圆形平面设置纹理贴图：CircleGeometry设置阵列模式：THREE.RepeatWrapping网格地面辅助观察：GridHelper纹理对象.offset属性代码实现Three.js
开心就是最好·2023-09-15 02:59

THREE.js

Three.js一.Demo渲染一个cube渲染四部曲:场景相机物体渲染1.场景constscence=newTHREE.Scene();2.相机newTHREE.PerspectiveCamera(fov
ancientElement·2023-09-14 17:40

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

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

Three.js使用OrbitControls后修改相机旋转方向无效

1.问题复现在项目中添加了OrbitControls控制器来控制相机的旋转和平移，但是需要修改初始的相机角度，于是我把相机的角度进行修改，如下：constcamera=newTHREE.PerspectiveCamera(75,viewport.offsetWidth/viewport.offsetHeight,0.01,20);camera.position.set(0,1,7);//修改相机初
YanisWu·2023-09-14 05:51

Three.js 计算两点的距离

方法：.distanceTo(v:Vector3):Float计算该向量到所传入的v间的距离。示例：varpos1=newTHREE.Vector3(0,1,0);varpos2=newTHREE.Vector3(1,1,1);vardistance=pos1.distanceTo(pos2);
YanisWu·2023-09-14 05:20

Three.js 绘制动态模型

1.概述在Three.js的世界中，几何体（Geometry）由顶点（vertices），线，面组成，被用来定义物体的「形状」和「大小」。
YanisWu·2023-09-14 05:14

ThreeJS进阶之使用后期处理

很多three.js应用程序是直接将三维物体渲染到屏幕上的。有时，你或许希望应用一个或多个图形效果，例如景深、发光、胶片微粒或是各种类型的抗锯齿。后期处理是一种被广泛使用、用于来实现这些效果的方式。
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

Three.js MeshStandardMaterial菲涅尔实现

前面两篇分别讲了Three.js的源码结构和Shader改写方法，本篇做一个基于Standard材质的菲涅尔。
ShawnWeasley·2023-09-10 13:33

Three.js 在iPhone手机上部分贴图黑色问题

搜了一下发现Three.js官方也知道这个问题，问题的起因是：ios15.x系统中更新了贴图机制，导致贴图无法加载，three.js官方给出的结论是这是ios本身的bug，可以通过如下方式改善这个问题：
ShawnWeasley·2023-09-10 04:19

Three.js将多边形线条（Line）转换成模型(Mesh)

当一个国家由多边形轮廓组合而成时，我们如何将它转换成三角面模型呢？国家球面Mesh生成思路：多边形轮廓内生成一系列等间距点阵。对点集进行三角剖分，生成国家平面Mesh。国家平面Mesh转球面Mesh：国家平面Mesh三角形顶点经纬度坐标转球面坐标即可。所使用的到的工具库：delaunator库(三角剖分)github地址：https://github.com/mapbox/delaunator安装
忽而秃头·2023-09-09 22:45

three.js的学习

Threejs1前言Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
Shadow Shine·2023-09-09 16:40

【Three.js】第十八章 Particles 粒子

介绍粒子。它们非常受欢迎，可用于实现各种效果，如星星、烟、雨、灰尘、火和许多其他东西。粒子的好处是您可以在屏幕上以合理的帧速率显示数十万个粒子。缺点是每个粒子都由一个始终面向相机的平面（两个三角形）组成。创建粒子就像制作网格一样简单。我们需要一个BufferGeometry，一种可以处理粒子的材质(PointsMaterial)，而不是生成一个Mesh，我们需要创建一个Points。设置启动器仅由
顽皮宝·2023-09-08 11:46

【Three.js】第二十一章 Physics 物理

介绍物理是WebGL可以添加到项目体验中最酷的功能之一。人们喜欢真实物理感的物体，看到它们碰撞、倒塌、坠落和弹跳，就像我的作品集一样：https://bruno-simon.com/有很多方法可以将物理功能添加到您的项目中，这取决于您想要实现的目标。您可以使用一些数学和解决方案（例如Raycaster）来创建自己的物理学理论这个想法很简单。我们将创建一个物理世界。这个物理世界是纯理论的。在这个物理
顽皮宝·2023-09-08 11:15

three.js 纹理

默认情况下，您在Three.js中渲染的所有内容都会发送到屏幕上。毕竟，如果你看不到它，渲染它有什么意义呢？事实证明，有一个非常重要的点：在数据发送到屏幕（从而丢失）之前捕获数据。
ygtu2018·2023-09-08 02:54

Three.js基础学习笔记

import*asTHREEfrom'three';import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'exportdefault{name:'Home',data(){return{scene:null,camera:null,renderer:null,mesh:null,clock:null}},mounte
开心就好1314520·2023-09-07 14:35

window.URL 与 跨域

问题先看看一个具体的小问题：我需要将用户上传的本地FBX模型文件，利用THREE.JS的放在Canvas中展示，而浏览器会给出一个跨域的报错:three.js:34066AccesstoXMLHttpRequestat'file
已经不在简书了·2023-09-07 01:17

Vue、Three.js实现全景图

一、首先我们需要创建一个Vue工程本文主要详细记录搭建全景图的过程，故搭建Vue工程不在过多描述。二、安装Three.jsnpminstallthree--savenpminstallthree-trackballcontrols--savenpminstallthree-orbit-controls--savenpmithree-obj-mtl-loader--savenpmithree-fbx
shadow_2155·2023-09-06 12:19

JS 图片跨域问题

使用JS创建图片元素然后在JTopo或three.js中使用时报以上错误，JS代码如下：var_t=this;varhouseImg=newImage();houseImg.crossOrigin='*
前端的南姐·2023-09-05 06:44

Blender--》页面布局及基本操作讲解

接下来我会在three.js专栏中分享关于3D建模知识的文章，如果学习three朋友并且想了解和学习3D建模，欢迎关注本专栏，关于这款3D建模软件blender的安装，我在前面的文章已经讲解过了，如果不了解的朋友可以去考考古
亦世凡华、·2023-09-04 17:28

15 个最佳 3D 建模软件工具

从头学习three.Js或者Babylon.js路线太陡峭又枯燥,可能令人望而生畏，但这里有一系列工具可以帮助您快速上手，让你愉快感受3d的魅力！
·2023-09-04 14:26

Three.js+vue3+vite生成基础场景

生成基础场景前言使用步骤1.引入three.js2.生成场景3.创建相机4.渲染场景5.组件奉上前言Three.js+vue3+vite生成基础场景框架:vue3+vite+typescript使用步骤1.引入three.js
bug别找我·2023-09-04 06:42

Three.js之层级模型

traverse、getObjectByName()本地坐标和世界坐标：getWorldPosition()改变模型相对局部坐标原点位置移除对象：.remove()模型隐藏或显示：visible代码实现Three.js
开心就是最好·2023-09-04 00:38

html让两个按钮同一行居中,javascript – Three.js – 将两个按钮居中放入父div的子div中...

至于控件右边的间距,你的#gui元素的右边距为15px,所以你可以通过添加margin-right：0来纠正它.到#gui的CSS规则：#gui{position:absolute;top:0;right:0;margin-right:0;}至于对齐元素是否居中,我在这里将其分解：理论为了使像div这样的中心,使用CSS的方法是让子元素使用margin-right和margin-left都设置为a
weixin_39598941·2023-09-03 16:01

Three.js之模型对象、材质

Vector3与模型位置欧拉Euler与角度属性.rotation模型材质颜色(Color对象)模型材质父类Material：透明、面属性模型材质和几何体属性克隆.clone()和复制.copy()代码实现Three.js
开心就是最好·2023-09-03 13:32

Three.js添加阴影和简单后期处理

在Three.js中，可以使用渲染器的一些特性来实现阴影和后期处理效果。
X01动力装甲·2023-09-02 16:54

three.js 纹理贴图进阶

基础篇：three.js基础认识与简单应用纹理贴图：three.js纹理贴图的使用一、CubeTextureLoader--添加场景背景示例：运行结果如下图代码与详解如下：主要代码：/***设置cube
前端菜菜DayDayUp·2023-09-02 15:45

three.js 平行光与阴影及其相关属性

基础篇：three.js基础认识与简单应用纹理贴图：three.js纹理贴图的使用纹理贴图进阶：three.js纹理贴图进阶一、灯光与阴影的关系与设置--五个步骤缺一不可（点、聚会再次赘述）目标：灯光与阴影环境光无阴影平行光
前端菜菜DayDayUp·2023-09-02 15:45

three.js 渲染带动画的glb模型

废话不多少上代码//gltf加载器letmixer//添加一个变量来存储动画混合器constprogressBar=document.getElementById('progress-bar-inner')constloader=newTHREE.GLTFLoader();loader.setPath('./')loader.load('./glb/LKBB4385.glb',(gltf)=>{g
孟宪磊mxl·2023-09-02 15:45

three.js渲染带动画的glb文件

1.准备工作将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。
前端菜菜DayDayUp·2023-09-02 15:43

three.js 场景中如何彻底删除模型和性能优化

three.js场景中如何彻底删除模型和性能优化删除外部模型在three.js场景中，要彻底删除外部模型，需要执行以下几个步骤：从场景中移除模型你可以使用scene.remove(model)或者scene.remove
X01动力装甲·2023-09-02 09:03

three.js TextureLoader（纹理加载附带demo） - 04

文章目录一、什么是纹理加载1.属性介绍2.代码示例二、纹理加载demo(`注意素材位置`)三、demo效果1.素材2.代码效果一、什么是纹理加载纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。我们把这张图片放在立方体上。（我通常称为贴图）。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的map属性设置为该
与诸君共勉·2023-09-01 23:12

Three.js相机参数及Z-Fighting问题的解决方案

-three.js如果你看一下Three.js文档中的透视相机构造函数，它会是这样的：newTHREE.PerspectiveCamera(fov,aspect,near,far)其中：fov：相机视野
新缸中之脑·2023-09-01 02:01

20个值得收藏的WebGL性能优化技巧

推荐：用NSDT编辑器快速搭建可编程3D场景1、使用Three.js并优化WebGLThree.js是一个流行的JavaScript库，用于在WebGL中创建3D图形，它具有自己的一组优
新缸中之脑·2023-09-01 02:31

three.js(十)：线性几何体

线性几何体WireframeGeometry网格几何体EdgesGeometry边缘几何体WireframeGeometry网格几何体WireframeGeometry(geometry:BufferGeometry)geometry—任意几何体对象。constgeometry=newSphereGeometry();constwireframe=newWireframeGeometry(geom
我在人间贩卖青春·2023-08-31 23:19

three.js(九)：内置的路径合成几何体

路径合成几何体TubeGeometry管道LatheGeometry车削ExtrudeGeometry挤压TubeGeometry管道TubeGeometry(path:Curve,tubularSegments:Integer,radius:Float,radialSegments:Integer,closed:Boolean)path—Curve-一个由基类Curve继承而来的3D路径。Def
我在人间贩卖青春·2023-08-31 23:47

2021-11-04 日记

小伙子，three.js的项目不要忘了。手里的任务太多了。再不快一点学习就来不及了。这几天在啃linuxiptables.
Apbenz·2023-08-31 11:49
上一页 12 13 14 15 16 17 18 19 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他