ThreeJS

threejs(8)-详解光线投射与物体交互

详解光线投射与物体交互import*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";//导入dat.guiimport*asdatfrom"dat.gui";//目标：raycasterconstg
拾荒李·2023-10-28 15:33

threejs(7)-精通粒子特效

一、初识Points与点材质//设置点材质constpointsMaterial=newTHREE.PointsMaterial();import*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";/
拾荒李·2023-10-28 15:23

0. threejs源码阅读——结构概述

从Git上Clone好项目后，目录结构如下：threejs源码目录结构src-我们主要看的部分，包含了所有源码。editor-如果有自己做webglwebIDE的计划，可以参考一下。
吃货传说·2023-10-27 22:13

七、threejs学习笔记-PBR材质与纹理贴图

友情链接：threejs中文文档目录1.PBR材质简介光照模型网格模型材质整体回顾2.PBR材质金属度和粗糙度金属度metalness粗糙度roughness3.环境贴图.enMap环境贴图反射率.envMapIntensity
焦焦焦焦焦·2023-10-27 09:54

threejs(5)-详解灯光与阴影

一、Gsap动画库基本使用与原理npm地址：https://snyk.io/advisor/npm-package/gsapimport*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";//cons
拾荒李·2023-10-26 22:33

threejs(6)-操控物体实现家居编辑器

//导入threejsimport*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js
拾荒李·2023-10-26 21:48

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

1.three.js中文手册网址：https://www.techbrood.com/threejs/docs/注意事项：代码中出现的newTHREE中的THREE必须为大写。
小张帅三代·2023-10-26 20:06

threejs学习网址记录

636109562&utm_campaign=ThingJS&utm_medium=SEM&utm_source=baidusem&utm_content=City2&utm_term=UPto_2111263115、threeJS
weixin_44356698·2023-10-26 19:40

threejs(2)-Geometry进阶详解

一、全面讲解UV与应用在本节中，我们将讨论Three.js中的UV映射，包括UV映射的概念、与顶点位置的关系和区别以及如何在Geometry中设置UV坐标。我们将使用BufferGeometry进行示例说明。颜色对应什么是UV映射？UV映射是一种将二维纹理映射到三维模型表面的技术。在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标（U,V）。U和V分别表示纹理坐标的水平和垂直方向。这些坐标用
拾荒李·2023-10-25 22:55

threejs(3)-详解材质与纹理

一、Matcap(MeshMatcapMaterial)材质原理与应用Matcap是一张含有光照信息的贴图，通常是直接截取材质球截图来使用。因此Matcap可以很好的模拟静止光源下的光照效果。最直接的方式就是直接使用在View空间下的模型法向量的xy分量去采样Matcap。另外还有一种常见的方式是通过View空间下的模型法向量叉乘视角向量，然后用得到的新的向量的xy分量去采样。在开始之前，首先需要
拾荒李·2023-10-25 22:55

threejs(1)-开发入门与调试设置

学习资料来源：https://www.three3d.cn/threejs/01-%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/01-%E5%
拾荒李·2023-10-25 22:25

threejs(4)-纹理材质高级操作

一、纹理重复_缩放_旋转_位移操作//导入threejsimport*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples
拾荒李·2023-10-25 22:43

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

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

第二节 threejs简单案例

1.创建3D场景//创建3D场景对象Sceneconstscene=newTHREE.Scene();//更改场景背景颜色scene.background=newTHREE.Color('#F5F5F5');2.创建透视投影相机//实例化一个透视投影相机对象constcamera=newTHREE.PerspectiveCamera();相机位置//根据需要设置相机位置具体值camera.posi
Lanwarf-前端开发·2023-10-25 16:36

Threejs入门5-plane(画面)

联想到二维平面，同一个平面的多条线形成闭合区间就组成了平面2.右手坐标系在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。
空谷足音 -จุ·2023-10-23 02:25

ThreeJS光照类型详解及示例演示

ThreeJS中的光照计算是基于物理学的光照模型，通过模拟光线与物体表面的交互作用，计算出物体表面在各个方向上的明暗程度，从而实现逼真的视觉效果。
skyuning·2023-10-21 19:00

threejs (一) 创建一个场景

引入npminstallthreeimport*asTHREEfrom'three';constscene=newTHREE.Scene();或者使用bootCDN复制对应的版本连接基础知识场景、相机、渲染器通过THREE.Scene创建一个场景通过THREE.PerspectiveCamera创建一个相机通过THREE.WebGLRenderer创建一个渲染器，方便将物体渲染到场景中展示一个立方
小程很努力·2023-10-21 14:29

three.js 实现星空粒子效果

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

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

演示地址:http://creativejs.com/uploads/tutorials/three/Part1_particles/ThreeParticles.htmlthree.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下载地址:http://
weixin_30497527·2023-10-20 21:12

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

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。首先创建一个HTML文件,引入three.js引擎包.Three.js实现3D空间粒子效果body{background-color:#000000;margin:0px;overflow:hid
知书达·2023-10-20 21:12

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

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。文章末尾有Threee.js的下载地址和效果演示地址。首先创建一个HTML文件,引入three.js引擎包.声明全局变量相机:OpenGL(WebGL)中、三维空间中的物体投影到二维空间的方式中，
包茅子·2023-10-20 21:42

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

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

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

JaveScriptBabelCoffeeScript确定/*https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs
长不大的BEN·2023-10-19 11:16

Threejs性能优化

1、多使用clone方法2、模型不需要时dispose3、使用BufferGeometry4、图片压缩5、优化渲染时requestAnimationFrame中的方法，不要重复定义，注意循环6、模型减顶点减面，使用法线贴图7、把材质精度降低，尽量共享材质8、模型拆分加载，或把模型合并，合并有消耗，尽量在编辑器下合并9、模型格式优化，使用gltf或glb10、LOD技术11、异步、分片、缓存，如使用
沈行的专栏·2023-10-19 11:15

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

注意，要求后续能选中某个桥柱2.概念2.1合并几何体three.js官方教程里提到，大量对象的优化-three.jsmanual(threejs.org)，使用合并几何体为什么合并几何体能优化绘制大量对象时的性能呢
野生的大熊·2023-10-19 11:09

webGL编程指南实战教程

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

1. threejs源码阅读——math/vector

math文件夹结构math文件夹内的所有内容都是我们在threejs中非常常用的，尤其是向量、矩阵、四元数和一些基本的数学运算。所以我们第一个选择math文件夹来进行解读。
吃货传说·2023-10-17 21:17

vue中集成cesium和threejs

vue中集成cesium和threejs1.cesium和threejs结合2.vue中集成cesium和threejs2.1vue中集成cesium2.2引入threejs2.3实现效果2.4完整代码
南木元元·2023-10-16 23:33

threejs中dat.gui的使用详细介绍

一、引入vue中引入：import{GUI}from'three/examples/jsm/libs/lil-gui.module.min'二、创建实例constgui=
慢步者_rambler·2023-10-16 17:44

Threejs进阶之三：通过GUI修改gltf模型(摩托车)颜色

上一节我们对摩托车的场景进行了优化，添加了聚光灯及阴影等效果，这一节我们继续对摩托车场景进行优化，我们通过GUI来控制摩托车各个部位颜色的修改先看下修改后的最终效果引入GUI在motor3d.js中通过import引入GUI插件import{GUI}from'three/examples/jsm/libs/lil-gui.module.min.js'//引入GUImotor03.gltf的组成在对
九仞山·2023-10-16 17:42

threejs实例（三）

纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的map属性设置为该方法的返回值，而不是设置它的color属性。注意，使用的是MeshBasicMaterial，所以没有必要增加。但需要注意的是，并不是所有的几何体类型都支持多种材质。BoxGeometry和Box
prince132·2023-10-16 17:09

threejs创建GUI参数的时候，明明写了默认值，以及滑块，但不出现滑块

constgui=newGUI();letparams={far:'2000'}constfolder=gui.addFolder('相机参数');folder.add(params,'far',0,2000,10);我照着官方案例写的，但是写的时候下意识加了单引号，导致把数字类型变成了字符串类型，从而不被识别，出现了只显示2000这个数字而没有对应滑块的情况。前端编程就是这点麻烦，有很多时候出现
dalaomanzou·2023-10-16 17:07

three.js入门到实战

学习之前示例演示参考资料api查询：http://www.webgl3d.cn/threejs/docs/index.html#代码地址：https://github.com/mrdoob/three.js
我们一起学前端·2023-10-16 11:08

ThreeJS-3D教学十-有宽度的line

默认threejs的线宽是无法调节的，需要用有厚度的线THREE.Line2。
天外天-亮·2023-10-16 11:58

ThreeJS-3D教学九-line的绘制

three.js画线比较繁琐一些，我们先展示正常的操作，先看效果图：本案例用到的方法是：LineBasicMaterial和LineSegments。1、材质Three.js中提供了两种线条材质：LineDashedMaterialconstmaterial=newTHREE.LineDashedMaterial({color:0xffffff,linewidth:1,scale:1,dashSi
天外天-亮·2023-10-16 02:32

视图平截锥体（view frustum）几何体渲染 -ThreeJS camera例子

视图平截锥体（viewfrustum）几何体渲染threejs中webgl_camera例子中渲染出了视图平截锥体的形状，其实现了frustumgeometry对象用于专门负责viewfrustum几何体数据的生成
绿风烟·2023-10-15 08:07

用 Three.js 创建一个酷炫且真实的地球

先添加一个球体我们用threejs中的SphereGeometry来创建球体，给他贴一张地球纹理。
sky.....·2023-10-15 01:38

落地成盒？前端必收藏的干货：threeeJs插件Gui添加盒子功能

各位宝宝们,时隔这么久,终于又要继续我们的threeJs教程啦!我们这次还是学习我们threejs插件Gui。在之前教程中,我们学习了Gui的基本使用,这节课我们学习使用Gui插件添加盒子功能。
源码时代官方·2023-10-14 21:03

threeJS-Helper14-SpotLightHelperAndCameraHelper(聚光灯显示和相机显示助手)

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！本章节学习的内容可以从的官方文档中找到。
webgl_谷子·2023-10-13 14:13

threeJS-Helper04-CameraHelper（相机助手）

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！
webgl_谷子·2023-10-13 14:12

THREEJS基础入门

大家好啊，又是长时间没更新，最近在学习threejs，发现很好玩，于是大概学习了一下什么是threejs，很简单，你将它理解成three+js就可以了。
Ss、、帅海·2023-10-13 13:37

Three.js基础入门系列（六）

01Three.js中的相机插件OrbitControls.js通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景
骨灰级收藏家·2023-10-13 13:03

threejs GLTFLoader

package.json{"name":"gltf-loader-code","version":"1.0.0","main":"index.js","license":"MIT","scripts":{"start":"webpack-dev-server"},"dependencies":{"three":"0.110.0"},"devDependencies":{"html-webpack-
antlove·2023-10-13 10:54

Three.js的相机控件OrbitControls.js

通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数，通过前面的学习应该知道，相机的位置角度不同，
心淡然如水·2023-10-13 05:04

ThreeJS-3D教学八-OBJLoader模型加载+动画

先看效果图：本篇给大家介绍下模型加载的知识，用到了OBJLoader对应的模型，为了增加趣味性，花了些时间，利用newTHREE.Points获取到模型上的点，做了一个动画效果，其实就是操作Y轴上的点，先降低上0，然后再还原，代码如下：Titlebody{width:100%;height:100%;}*{margin:0;padding:0;}.label{font-size:20px;colo
天外天-亮·2023-10-11 12:30

vue中使用threejs注意事项

最近在vue项目中使用threejs一下都是踩过的雷点卡顿问题在vue中three.js的相机,场景,渲染器,控制器,都不能放在data中,否则会导致项目运行使用出来后很卡//将以上的东西放在mounted
久..·2023-10-10 13:39

threejs 创建场景，轨道控制器以及天空盒子

前言一、新建场景1场景2相机3渲染器4坐标轴5辅助网格二、引入轨道控制器1.引入库2.创建轨道控制器三创建天空盒子前言快速认识threejs开发基础代码干货整理；开发环境是nodejs环境；安装:npminstall
杨大大28·2023-10-10 00:33

从引入开始学习Three.js

循环动画函数（自带的requestAnimationFrame）1、渲染循环实现旋转动画2、计算两帧时间间隔3、渲染循环+OrbitControls（相机）8、canvas画布宽高度动态变化9、stats查看threejs
Ciwei蓝·2023-10-10 00:57

Threejs进阶之六：使用EffectComposer后处理实现点击模型发光效果

这一节我们继续对前面的摩托车模型进行研究，前面我们实现了点击摩托车模型的各个部分时弹出HTML标签显示该部分的信息，这一节我们加入后期处理效果，EffectComposer来实现点击模型使其发光的效果，先看下最终的效果图，整体看起来还不错，下面我们来实现它，老规矩，在实现上面的效果之前，我们先来认识下EffectComposerEffectComposer效果合成器EffectComposer是T
九仞山·2023-10-09 19:49

vue3和threejs单击按钮模型高亮显示

文章目录一、在组件中引入three.js依赖的文件二、在setup函数中定义全局变量三、在setup函数中创建outlineObj(selectedObjects)，参数为选中的模型所组成的数组[]四、必须在animate函数中执行composer.render()总结一、在组件中引入three.js依赖的文件import{EffectComposer}from"three/examples/js
青春最美，庆幸遇见karry·2023-10-09 18:46
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他