threeJs

BabylonJS(一) 前言-为什么想写这个系列

但......babylonjs中文资料相对于Threejs、Unity简直是太少了..之前有个中文站点，好像也没啥人维护了，大部分deepdive的文章都是没有翻译的，而且6.0+也有很多更新的文章，
arwind gao·2024-01-06 04:32

ThreeJs通过canvas和Sprite添加标签

在3D场景中很多时候会用到给模型添加标签，以表示这个模型的代号，尤其是大量重复模型的时候，添加标签是为了更直观的看到场景中每个模型的数据和名称，比如在仓库中有很多货架，就会需要查看每个货架的编号，如果某个货架出问题便可以通过编号快速定位是哪一个货架。这节就讲如何用sprite和canvas添加标签，之前有讲过Sprite绘制下雨的场景，是先加载图片，然后封装为Sprite对象，再随机放置到场景中，
baker_zhuang·2024-01-05 19:23

threejs react fiber 最佳实践

Intro在使用的相当一段时间的threejs和react-three-fiber后，在中文资料环境极其匮乏的情况下，做个极简·笔记式的分享。
wolanx·2024-01-05 18:36

【Three.JS学习笔记（一）】几何体全家福

几何体摘录自官网https://threejs.org/，作为学习笔记增加了些个人的想法。
xxhls_02·2024-01-05 18:31

threejs在透视相机模式下，绘制像素大小固定的元素

要求：在透视相机模式下绘制一个图标，图标大小始终为32*32px。图标如下：实现思路：使用THREE.Sprite。因为SpriteMaterial支持配置sizeAttenuation使Sprite大小不随相机的深度而衰减。所以我们只要保证sprite的初始的大小合适，在以后的相机深度变化的时候就不会改变大小了。开始操作第一次的操作：drawAddSprite(type:InterActiveT
qq_37200686·2024-01-05 10:23

ThreeJs 模型的缩放、移动、旋转 以及使用鼠标对三维物体的缩放

首先我们创建一个模型对象vargeometry=newTHREE.BoxGeometry(100,100,100);//边长100的正方体varmaterial=newTHREE.MeshLambertMaterial({color:0xFF0000});varmesh=newTHREE.Mesh(geometry,material);scene.add(mesh);移动接下来我们尝试将模型中心移
汉武大帝··2024-01-03 11:35

WEB 3D技术 three.js 补间动画(tween)

本文我们来说补间动画比如说我们有一个正方体默认在如下图位置然后我们希望一秒中之后它到达如下图位置那么我们知道终点和起点的位置从起点到终点一共需要一秒的时间需要程序自己去处理这个图形0.10.2直到1秒它都分别要达到什么位置通过开始和结束位置补出中间的动画部分这就叫补间动画补间动画库叫tween这个东西是可以单独安装的但threeJs
-耿瑞-·2024-01-03 08:37

ThreeJS创建关键帧动画

之前有说过两种创建动画的形式，一个是很粗的方式，直接在requestAnimationFrame中修改模型的属性，因为threejs本身就会不断刷新画面，利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性
baker_zhuang·2024-01-03 01:47

three的学习文档资源和手机端调试

1、资源链接https://www.w3cschool.cn/ehsib/ehsib-emwt3qpd.htmlthreejs文件包下载和目录简介|Three.js中文网2、vcosole手机端调试（1
lock cylinder·2023-12-30 06:20

Vue ThreeJs实现银河系行星运动

预览可通过右上角调整参数，进行光影练习代码import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'import{GUI}from'three/examples/jsm/libs/lil-gui.module.min';/*场景，渲染器，镜头，背景星星，帧率器，第一人称控
jingzhi1230·2023-12-29 19:01

threejs官方demo学习（3）：几何体

webgl_geometries这个案例还是比较简单的，主要介绍了一些创建物体的创建。知识点PointLightPointLight点光源，从一个点向各个方向发出光线的光源，比如灯泡。BoxGeometryBoxGeometry立方缓冲几何体SphereGeometrySphereGeometry球缓冲几何体IcosahedronGeometryIcosahedronGeometry20面缓冲几何
无知的小菜鸡·2023-12-29 18:02

vue2 threejs基础知识

调节属性npminstall--savedat.gui纹理素材下载地址例子1自转和公转时间动画缓冲几何图形//引入three包最新版import*asTHREEfrom'three'//鼠标控制器需要threejs
时光浅止·2023-12-29 18:02

threejs实现3d全景看房

认识threejsthree.js就是使用javascript来写的，基于原生WebGL封装运行的三维引擎，运行在浏览器上的3D程序。WebGL是在浏
前端码农小王·2023-12-29 18:31

Three.js学习-光照和阴影(了解向)

参考：Threejs光照和阴影-知乎(zhihu.com)在ThreeJs中，物体的颜色也是通过光照叠加得到的，bling-Phong等模型在这里同样适用，ThreeJs将光照也封装成了一个对象。
九九345·2023-12-29 18:30

threejs--初创项目

一.环境介绍倘若你只是使用Three.js库中所提供的几何体，且不载入任何纹理贴图，则网页是可以从本地的文件系统中打开，并且是能够直接运行的，只需在文件管理器中双击HTML文件，它就可以在浏览器中进行显示。（此时你将在地址栏中看到类似这样的URL：file:///yourFile.html）;但这些是不能满足项目需要的，我们在作项目的时候是需要加载模型师给我们做好的模型而不是Three.js库中所
知行合一实践派·2023-12-26 16:53

ThreeJs中使用Cannon实现方块自由落体效果

同样，我们先设置一个物理世界，在物理世界中放置一个方块和地面，并设置地面和方块之间的反弹恢复系数，同样在Threejs中使用bo
baker_zhuang·2023-12-25 04:38

ThreeJs实现发光描边

在很多数字孪生场景中会有交互操作，比如选中一个物体，但是为了很好的凸显选中的物体一般会有几种效果，比如将选中的物体向上移动一定的距离，或者是改变选中模型对象的颜色，这两种实现方式都是通过改变模型的属性，一个是改变position的值，另一个是改变material的color属性，今天这里要说的是第三种方式，给物体添加发光描边，也是很多数字孪生场景经常用到的一种方式。发光描边的实现需要引入几个组件，
baker_zhuang·2023-12-25 04:38

ThreeJs中使用Cannon实现小球自由落体效果

之前有做过关于Threejs基础功能的一些演示，这里引入一个新的组件Cannon，这是一个开源3D屋里引擎，可以用来开发和模拟真实世界的物理效果，包括碰撞，重力，约束等，Cannon.js的特点如下：轻量级和高性能
baker_zhuang·2023-12-25 04:08

Pixi入门第一章：绘制一个小精灵

之前有介绍过threeJs做3D场景的教程，但是发现web3D还是有很多局限性的，尤其是在绘制地图一方面，3D场景必须通过射线选取物体，而且会因为相机视角的问题出现偏差，另一方面3D在渲染性能上消耗远大于
baker_zhuang·2023-12-25 04:37

用ThreeJS写了一个圣诞树

简单介绍一下threejsThree.js是一个基于原生WebGL封装运行的三维引擎，是最著名的3DWebGLJavaScriptThree.js是一个基于原生WebGL封装运行的三维引擎，是最著名的3DWebGLJavaScript
QD_ANJING·2023-12-23 13:08

threejs！可视化数字城市效果的实现

灵感图现在随着城市的发展，越来越多的智慧摄像头，都被互联网公司布到城市的各个角落，举一个例子，一个大楼上上下下都被布置了智能摄像头，用于监控火势，人员进出，工装工牌佩戴等监控，这时候为了美化项目，大公司都会将城市的区域作为对象，进行3d可视化交互，接下来的内容，就是基于以上元素，开发的一款城市数据可视化的demo，包含楼宇特效，飞线，特定视角，动画等交互，用到的技术栈vite+typescript
QD_ANJING·2023-12-23 13:07

three.js实战模拟VR全景视图

文章中使用到的案例图片都来源于：Humus-Textures里面有很多免费的资源，可以直接下载，每个资源里面都提供6个不同方位的图片，我们通过threejs稍微处理一下，就能实现以下3D效果的场景了。
说学逗唱攻城狮·2023-12-23 12:54

VsCode中使用threejs没有语法提示

安装three.js的typescript语法(.d.ts)的依赖npminstall--save-dev@types/three然后再退出vscode，重新进入就有代码提示了
进阶的巨人001·2023-12-23 10:16

threejs创建一个旋转的正方体【完整代码】

效果：中文网three.jsdocs1.搭建环境安装three首先我们需要新建一个项目vue/react都可这里以vue为演示npmithree找到一个新的页面在页面script的地方导入threeimport*asTHREEfrom"three"或者自己逐个导入import{PerspectiveCamera,Scene,WebGLRenderer,}from"three";import*asT
孙可爱.·2023-12-22 18:14

Threejs发光闪烁提示特效

一、导语发光闪烁特效应该在我们的项目中是经常需要去封装的一个特效吧，一般用于点击选择，选中物体，或者一些特效加持于中心物体，物体碰撞检测后的发光特效等等二、分析我们可以合理的使用后处理特效，上步骤：首先，我们利用后处理效果然后整合输出于屏幕再加持自定义着色器合成后处理效果优点是性能更好，FPS不会掉，优化为我们场景可以加载更多特效或者物体做下更多铺垫哦三、上基础代码this.composer=ne
慕容一刀@·2023-12-19 11:41

Threejs漫天多彩粒子天空--粒子系统打造

一、导语漫天多彩粒子天空特效应该也是Threejs项目中挺常见的一个需求，因为它是基于粒子系统，可以衍生出许多的不一样的方案，比如，星空特效，下雨特效，飘雪特效等等，不仅可以用在项目中增加氛围，有时候可以结合
慕容一刀@·2023-12-19 11:41

Threejs利用着色器编写动态飞线特效

一、导语动态飞线特效是可视化数据地图中常见的需求之一，鼠标点击的区块作为终点，从其他区块飞线至点击区块，附带颜色变换或者结合粒子动画二、分析利用创建3点来构成贝塞尔曲线，形成线段利用着色器材质来按照线段以及时间点变化来变化线段的颜色形成动画三、上基础代码//贝塞尔曲线constcurve=newTHREE.QuadraticBezierCurve3(source,center,target)//创
慕容一刀@·2023-12-19 11:09

D3.js

D3.js为什么学习D3D3.js和threejs的应用场景完全不一样。threejs主要应用与基于webGL的3D场景，而D3.js确主要应用与2D场景。它们一起形成了一种互补关系。
强某某·2023-12-19 08:12

threejs加载IFCLoader

项目场景：提示：使用react-cli集成threejs库使用IFCLoader加载模型是遇到的问题问题描述提示：react-cli/vue-cli项目使用threejs中的IFCLoader错误信息描述解决方案
stpzhf·2023-12-18 00:03

three.js（二）

three.js（二）参考前言正文简单开始(不使用任何框架)补充粗略带过(使用Vue框架)细致讲解(比如我使用react框架)App.jsx的进阶版项目打包补充打包遇到的问题:原因:解决办法:参考https://threejs.org
踏过山河，踏过海·2023-12-17 17:47

three.js(一)

mkdirmy-threejs-projectcdmy-th
踏过山河，踏过海·2023-12-17 17:15

threejs 你是我心中最亮的星

threejs你是我心中最亮的星研究threejs，随便搞了个demo，稍微改了改默认代码就变成下面这样了。效果图如下：用到了一个素材，更像是陨石或者星星。中间有个小太阳，隐隐约约泛着洁白的光晕。
xyccstudio·2023-12-16 17:38

threejs 多屏互动效果，居然还能这么玩

threejs多屏互动效果看别人做了多屏互动的效果，觉得还挺有意思的，也顺便自己动手操作一下试试。先来张效果图：项目地址参考地址项目基于vue+threejs。
xyccstudio·2023-12-16 17:08

mars3d中bookmark视⻆书签，⽣成包含threejs加载模型的图⽚

问题:expImage示例⽣成书签视⻆图⽚时：1.如果地图中有threejs加载的模型，⽣成视⻆书签后，⽣成的图⽚中没有模型效果图如下：期望效果:地图上three加载模型时，⽣成视⻆书签时，视⻆图⽚中也有模型显示解决
mianmian0103·2023-12-16 03:33

创建一个有阴影的threejs三维几何体

import*asTHREEfrom"three"import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'constwidth=window.innerWidth;constheight=window.innerHeight;//创建场景constscene=newTHREE.Scene();scene.backgro
奚大野...·2023-12-15 17:08

Threejs之相机基础

参考资料正投影相机…相机控件MapControls知识点注：基于Three.jsv0.155.0正投影相机正投影相机-Canvas尺寸变化包围盒Box3地图案例(包围盒、正投影)相机动画(.position和.lookAt())不同方向的投影视图旋转渲染结果(.up相机上方向)管道漫游案例OrbitControls旋转缩放限制相机控件MapControls代码实现Three.js{"imports
开心就是最好·2023-12-15 11:43

js也能写3D游戏？

先要上这个网站https://threejs.org，然后下载它的three.js源码放到一个目录，比如js。
Peppa_6dad·2023-12-15 08:45

threejs ShapeGeometry 自定义贴图的uv坐标

问题描述：由于一些原因，要绘制一个长方形，但是这个长方形并不是PlaneGeometry，而是一个ShapeGeometry。但是同样的贴图，同样的形状，贴图贴在PlaneGeometry上时可以正常显示，但是贴在ShapeGeometry中却不可以正常显示。所以判断是贴图uv坐标问题。问题排查：PlaneGeometry默认顶点坐标和uv坐标对应关系如下，其中点1，2，3，4为geometry的
qq_37200686·2023-12-15 05:57

WEB 3D技术 简述React Hook/Class 组件中使用three.js方式

npminitvite@latest输入一下项目名称然后技术选择react也不太清楚大家的基础那就选择最简单的js然后我们就创建完成了然后我们用编辑器打开创建好的项目目录然后在终端执行npminstallthree引入threeJS
跟 耿瑞 卷出一片天·2023-12-14 19:51

vue2 引用3D模型

一、首先安装对应的插件（前往查看model-viewer）#installpeerdependencyThreeJSnpminstallthree#installpackagenpminstall@google
Frontend-Arway·2023-12-06 18:45

Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程【一篇文章精通系列】

Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript实战课程【一篇文章精通系列】项目简介一、项目初始化1、添加一些依赖项二、创建3D【基础搭建】1、绘制板子，
程序员小杰#·2023-12-04 17:26

Threejs 汽车模型的展示和选配(vue3)

继续跟着b站@老陈打码一起学习threejsgltf文件下载https://pan.baidu.com/s/15PHhoj3qmNiDhiAu9S7b0A提取码:66661.搭建项目使用vue脚手架搭建项目
Web阿成·2023-12-04 16:37

ThreeJs样例 webgl_shadow_contact 分析

webgl_shadow_contact官方样例中，对阴影的渲染比较特殊，很值得借鉴，学习渲染阴影的思路；这个例子中对阴影的渲染，并没有使用任何光源，没有用shadowmap的常规方式渲染阴影；而是使用了深度材质THREE.MeshDepthMaterial；得到的阴影效果就是，离投影的正交相机的远景平面，越远影子就越模糊。大体思路看animate()方法，使用shadowCamera正交相机把整
从杰·2023-12-04 16:36

基于vue3.x与 three.js模拟地球内部结构

基于vue3.x与three.js模拟地球内部结构前言基于threejs、vue3.x、热力图实现了地球结构可视化展示。
易航动效·2023-12-04 09:18

【ThreeJs】如何给模型打上文字标签？

一、概述ThreeJs渲染中创建的网格模型，有时候我们需要给模型添加标签文字，方便识别不同的物体。
IT飞牛·2023-12-04 06:05

Blender动画导入Three.js

你是否在把Blender动画导入你的ThreeJS游戏（或项目）中工作时遇到问题？您的.glb(glTF)文件是否正在加载，但没有显示任何内容？你的骨骼没有正确克隆吗？
xiangzhihong8·2023-12-02 15:47

可视化有关JS官网链接

【threeJs】3d建模基于webGLthreejs官网：https://threejs.org/threejs中文教程：Three.js中文教程|参考手册|使用指南|动画特效实例|踏得网threejs
麦兜_冰夕·2023-12-01 23:56

threeJs引入模型使用3D模型(vite+React+Ts)

要在Three.js中使用3D模型，你需要加载模型文件并将其添加到场景中。Three.js支持多种不同的模型格式，比如OBJ、FBX、GLTF等。initvite@latest//创建一个vite的脚手架选择react并配置Ts安装three.js准备npminstall@react-three/dreinpminstall@react-three/dreinpmi@types/threenpmi
湖边看客·2023-12-01 03:06

VUE+Three.js引用外部模型

three-orbitcontrolsnpmi-sthreenpmithree-orbitcontrols2，在public下面创建static放置模型文件文件目录3，在页面引入threeimport*asTHREEfrom"three";//引入Threejsimport
IDIOT?LIFE·2023-11-30 16:54

VUE3+ThreeJs加载飞机模型且播放模型动画

介绍Three.js是一个3DJavaScript库，我们经常使用它加载各种不同格式的模型。示例中的直升机模型出处飞机航空器模型-3D模型库-CG模型网-第1页免费3d模型下载的网站免费3D模型https://ch.3dexport.com/free-3d-models?page=7飞机glbgltf模型网https://glbxz.com/plus/list.php?tid=69&myorder
Etc.End·2023-11-30 16:53
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他