threeJS 第4页

用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

VUE3+ VITE 使用Three.js展示3D模型

学习主要文献:1.threejs文件包下载和目录简介|Three.js中文网3D模型这里有下载网站：Sketchfab-Thebest3Dviewerontheweb（邮箱注册后有免费的模型下载)3D模型编辑软件

Jayce_he·2023-11-30 16:48

mesh threejs 属性_ThreeJs 基础入门

本文来自网易云社区作者：唐钊Three.js是一款运行在浏览器中的3D引擎，你可以用它在web中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解webgl的世界。3D场景前置知识1.场景(Scene)：是物体、光源等元素的容器，可以配合chrome插件使用，抛出window.scene即可实时调整obj的信息和材质信息。2.相机(Camera)：场景中的相机，代

伍宁华山胸外科·2023-11-29 17:48

三维数据格式

先看一下threejs官网提供的三维模型加载器如见下图stlSTL是CAD软件中出来的一种3D模型文件格式，wiki已经解释的很清楚了。STL文件两种格式，ASCIISTL和BinarySTL。

老朱自强不息·2023-11-29 17:16

Threejs入门1-简介

three.js官方文档：threejs.org/three.js中文文档：techbrood.com/threejs/doc…Three.js整体认知（附：Three.js功能概览）一、threejs

空谷足音 -จุ·2023-11-29 17:42

Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）

前言Three.js(Javascript3Dlibrary)是基于原生WebGL封装运行的三维引擎，WebGL可以看成是浏览器给我们提供的接口，在JavaScript中可以直接用这些API进行3D图形的绘制；而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图

兴芳·2023-11-29 17:41

Html网页threejs显示obj,ply三维图像实例

程序示例精选Html网页threejs显示obj,ply三维图像实例如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！

荷塘月色2·2023-11-29 17:39

00.本地搭建 threejs 文档网站（网页版是外网比较慢）

three官网https://threejs.org/下载代码进入官网可以选择github去下载或者下载压缩包github下载https链接地址https://github.com/mrdoob/three.js.gitgitclonehttps

HHH 917·2023-11-29 01:04

threejs下监听mesh事件与监听3D对象的区别

技术架构reactthreejs@react-three/drei@react-three/fiber场景有这样一段代码，一个网格对象（mesh）中有一个平面（Plane），当我在网格上监听鼠标抬起事件时

zoujiawei6·2023-11-28 10:29

【前端】three.js

文章目录概述three.js-master目录结构Threejs的基本要素场景相机透视相机正交相机网格2d3d灯光AmbientLight(环境光)平行光（DirectionalLight）点光源（PointLight

软泡芙·2023-11-28 06:08

上传本地pcd文件，并用threejs渲染

项目背景：pcd文件很大，如果是本地的文件，上传到网络再下载下来，会造成网络流量的极大浪费。那么我直接加载本地的（当前计算机上的pcd文件）用来显示，会大大提高网络效率。上代码：import*asTHREEfrom'three';import{PCDLoader}from'three/examples/jsm/loaders/PCDLoader.js'//注意是examples/jsmexport

加油小吃货·2023-11-27 20:12

Threejs用官方提供的编辑器做一个简单的模型

Threejs有提供一个web端的编辑器制作3D模型，地址是https://threejs.org/editor/，这个打开就可以在线编辑，但是因为比较简陋，所以只能做一些简单的模型用于测试，实际开发中还是用

baker_zhuang·2023-11-27 17:45

threejs编辑器(3D场景编辑器)

好久没写博客了。今年似乎有点贪玩。买了吃灰四件套，滑板，吉他，运动相机，以及大疆无人机air2s。所以一直在玩。。。哎，虽然我一直想减肥，但奈何猪厂的伙食是真得太好了。因此就买了这些小玩意儿，希望自己多多走走动动。当然，初衷也不止于此。年初(2022)的时候，缘由某些事情，让我常常问自己，活着的意义是什么？如果人生只有生存，而没有生活，那真的是太无趣了。因此我也想抽出一点时间去感受一下，曾经丢失的

跃焱邵隼·2023-11-27 17:13

threejs + mapboxgl 实现炫酷动态立体墙效果

前言今天实现一个三维电子围栏效果；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个围栏效果，来展示一个区域的与众不同，或者；在预警方面常用到电子围栏来进行监控人员；本文也是借鉴maptalks中的立体墙的效果来实现的。之前在Cesium也实现过类似的效果，可以查看这个视频接下来我们实现一个动态立体墙的效果；围栏图层开发新建一个RippleWall图层，代码如下

jiegiser#·2023-11-26 07:04

WebGL/threeJS面试题扫描与总结

什么是WebGL？什么是Three.js？请解释three.js中的WebGL和Canvas的区别？WebGL(全写WebGraphicsLibrary)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借

xyphf_和派孔明·2023-11-25 22:17

Threejs_12 物体阴影的实现

所以在Threejs的画布世界之中，一个物体有自己的影子呢？

Web阿成·2023-11-24 08:53

Threejs_13 聚光灯和点光源的使用

聚光灯就如同手电筒一样，点光源就如同一个电灯泡甚至是萤火虫那样。如何使用他们呢？我们还是一样，先做一个小球和一个平面，用来展示光线。并且加入基本的环境光。//做一个球体constSphereGeometry=newTHREE.SphereGeometry(1,20,20);//材质constmaterial=newTHREE.MeshStandardMaterial();constsphere=n