threeJs

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

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
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他