❤️❤️--three.js 第6页

three.js GLTFLoader加载的glb/gltf色去色彩都成了黑白色问题解决

如下代码constgltfLoader=newGLTFLoader();gltfLoader.load(//模型路径"/gltf/scene.gltf",//加较完成同调(gltf)=>{gltf.scene.traverse((child)=>{if(child.isMesh){child.frustumCulled=false;child.castShadow=true;child.mater

-耿瑞-·2024-01-01 06:23

three.js绘制网波浪

无图不欢，先上图使用方法（以vue3为例）import{ref,onMounted}from'vue'importNetAnimationfrom'@/utils/netAnimation.js'letnet=ref(null)onMounted(()=>{newNetAnimation({dom:net.value,pointLightsAttr:[{},{},{}],axesHelperAtt

风舞红枫·2024-01-01 02:01

Vue快速应用配置Three.js

Vue快速应用配置Three.js前言一、引用Three.js二、定义全局数据三、代码部分--加载一个简单的正方体四、加载外部模型前言当前项目需要搭建一个农场的3D模型，就想到了使用Three.js但是

YIGE_MO·2023-12-31 21:22

阿里Weex 实现页面跳转

')exportdefault{methods:{onTextClick:function(){navigator.push({url:'http://192.168.31.79:8081/dist/three.js

暗蓝色的天空·2023-12-31 04:26

WEB 3D技术 three.js 雾基础使用讲解

本文我们说一下雾在three.js中有一个Fog类它可以创建线性雾的一个效果她就是模仿现实世界中雾的一个效果你看到远处物体会组件模糊直到完全被雾掩盖在three.js中有两种雾的形式一种是线性的一种是指数的个人觉得线性的会看着自然一些他是从相机位置开始雾的颜色逐渐加深到更远的地方就看不到了指数的就是附件的东西会看着比较清晰远处突然就看着很浓的雾色了我们编写代码如下

-耿瑞-·2023-12-31 02:28

在vue中使用three.js切换页面后销毁，防止内存溢出

产生问题用three.js写了一个webgl页面，发现这个webgl页面在和普通页面来回切换多次后会导致页面卡顿。

printf_824·2023-12-31 02:26

基于vue与three.js，监听FPX（Stats类使用）

第一步，引入stats类并new出来importStatsfrom'three/examples/jsm/libs/stats.module.js';data(){return{stats:newStats(),}}第二步，添加dommounted(){this.init3D();this.animate();window.addEventListener("keydown",this.toggl

printf_824·2023-12-31 02:26

基于three.js的室内全景3D展馆案例分享

先看效果图实现了第一人称行走，WASD点击目标画册进行预览查看位置音乐播放环绕地面镜面反光碰撞检测等等.地址在gitee上gallery:数字展馆概念的demo项目，本项目中使用的技术栈为three.js

11eleven·2023-12-30 07:54

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

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

lock cylinder·2023-12-30 06:20

WEB 3D技术 three.js 色彩空间讲解

上文WEB3D技术three.js设置环境贴图高光贴图场景设置光照贴图我们讲了基础材质的各种纹理但是我们的图片到了界面场景中好像绿的程度有点不太一样了这里的话涉及到我们的色彩空间他有两种一种是线性的一种是

-耿瑞-·2023-12-30 01:31

Three.js 全景图（标注偏移、显示不全的问题记录）

Three.jsVR全景图（标注偏移、显示不全的问题记录）最近在项目中利用three.js实现了vr全景的功能，过程中遇到了标注偏移、标注图标显示不全的问题，在此做个记录1.VR全景实现原理构建three.js

vagabond_·2023-12-29 18:32

three.js后期处理-FilmPass(类似电视效果)、DotScreenPass(将场景输出成点集)、GlitchPass(电磁风暴效果)-(vue中使用three.js84)

简单的后期处理通道FilmPass、DotScreenPass、GlitchPass1.demo效果2.重要知识点2.1认识后期处理2.2简单后期处理通道介绍2.2.1FilmPass通道介绍2.2.1DotScreenPass通道介绍2.2.1GlitchPass通道介绍3.实现要点3.1相关文件引入3.2创建效果组合器并添加通道3.3通道切换处理3.4render中更新通道与效果组合器4.de

点燃火柴·2023-12-29 18:31

three.js入门超详细附带素材及源码

three.js学习总结超详细附带素材及源码vue安装three.jsnpminstall--savethree引入three.jsimport*asTHREEfrom'three'three.js结构

天生我材必有用_吴用·2023-12-29 18:30

Three.js 解决纹理渲染后模型为黑色

文章目录前言一、图片路径错误二、TextureLoader()是异步操作,但是没有回调渲染三、渲染时机不正确四、渲染函数里没有requestAnimationFrame()五、尝试使用require引入纹理六、浏览器不能读取本地文件七、光照附-颜色color加载不出总结前言有很多种情况,我一一列举一下,因为我全都试过了…一、图片路径错误要加载的图片应该从当前js文件(即load()所在的文件)开始

白瑕·2023-12-29 18:00

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

参考：Threejs光照和阴影-知乎(zhihu.com)在ThreeJs中，物体的颜色也是通过光照叠加得到的，bling-Phong等模型在这里同样适用，ThreeJs将光照也封装成了一个对象。目录6种光照1环境光AmbientLight2点光源PointLight3聚光灯SpotLight4方向光DirectionalLight5半球光HemisphereLight6平面光RectAreaLi

九九345·2023-12-29 18:30

vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用

vue中使用three.js加载3d模型，绑定mouseup和mousedown事件不起作用在Three场景中，如果想要对鼠标进行操作就要引入OrbitControls.js文件，在这种控制方式下，鼠标左键为旋转视角

qq_37656005·2023-12-29 18:29

关于从入门three.js到做出3d地球这件事(第二篇: 开发必备的辅助技能)

上篇我们讲解了three.js的基本配置代码,想看的同学可以访问这个链接:关于从入门three.js到做出3d地球这件事(第一篇:通

前端瓶子君·2023-12-29 18:28

three.js对光源效果

不知道你们在写的过程中有没有遇到过这种事情，明明我已经加上光源了，但是为什么就是没有效果呢，加的位置啥的也没有错误啊，这是为什么呢？我也遇到过这样的问题一是光源没加对，有错误，二是光源正确，但是材质的问题，材质对光源不反应我们加上光源但是得到的效果依旧没有加上这时候会有人问，是不是我们的光源写错了呢？其实并不是的，而是THREE.MeshBasicMaterial是最基本的材质，也是不会对光源产生

崽崽有点笨·2023-12-29 18:28

three.js学习笔记（react版）

官网链接：three.jsdocs这个文章是记录了博主学习three的一些磕磕绊绊，查阅了大量资料后的总结。学习准备下载：three更新迭代得很快，很多方法在各种版本里的使用方法不太一样或者已经被废弃，所以下载正确的版本是很重要的，想下载最新版本的只需将@后面的版本去掉即可npminstallthree@对应版本--save下载后的three文件如下在该目录下examples/jsm放置了很多th

Pluto_fan·2023-12-29 18:57

three.js场景的背景旋转主体不动

方法一创建两个THREE对象分层控制两个DIV，创建两个THREE对象，完全弄出两套divBG，绑定创建THREE对象1，在场景中添加背景图片，设置controls的自动旋转，关键代码如下：initScene(){//场景作为一个容器scene=newTHREE.Scene()leturls=['dark-s_px.jpg','dark-s_nx.jpg','dark-s_py.jpg','dar

Beam007·2023-12-29 18:57

three.js+vue3点光源不生效的另外一个可能

解决：后来发现，我安装的three.js版本：^0.160.0，目前的最新版，于是尝试降级，我选择了^0.150.1版本，模型瞬间就有光了！demo:最后附上demo

马上风·2023-12-29 18:56

Three.js基础入门介绍——Three.js学习一【学习路线】

Three.js基础入门介绍1.深入了解Three.js前提下需要知道：【OpenGL和WebGL】1.OpenGL是一个跨平台的3D/2D的绘图标准（规范）。

小猪猪哟·2023-12-29 17:23

Three.js基础入门介绍——Three.js学习二【极简入门】

准备开发环境下载官网提供的three.js-master代码包，官方提供的示例和相关库文件都在里面点击进入官网下载安装vscode编辑器点击进入官网安装好后，在vscode的插件市场搜索LiveServer，点击安装，方便开小型服务，解决因直接打开的文件中存在import，导致跨源请求被拦截的问题。掌握一些概念性知识前端基本功–HTML+CSS+JS，至少会写需要引入入外部JS的单页HTML，本文

小猪猪哟·2023-12-29 17:23

Three.js基础入门介绍——Three.js学习四【模型导入】

模型导入通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具生成模型文件再导入的方式将模型引入到我们的3D场景中进行使用Three.js加载器Three.js

小猪猪哟·2023-12-29 17:50

WEB 3D技术 three.js 设置环境贴图高光贴图场景设置光照贴图

上文WEB3D技术three.js基础网格材质演示几何体贴图ao贴图效果我们简单构建了一个贴图和ao贴图的几何体材质我们接下来来看一下透明度贴图我们还是官网搜索MeshBasicMaterial然后是我们的

-耿瑞-·2023-12-29 09:01

利用HTML5构筑物理模拟环境～ WebGL库Three.js入门（１／３）

这是目前质量较好、讲解比较清楚的一篇Three.js的入门教程，原作者是日本人遠藤理平，由HiWebGL技术讨论群群友瀡风翻译，HiWebGL授权转载。感谢原作者的创作和瀡风辛苦翻译！

load_life·2023-12-29 02:12

WebGL库Three.js入门

HTML5和WebGL简单认识一下HTML5吧。HTML5是目前构成WEB页的主流的HTML4和XHTML的后续语言、2008年制定了草案、约定各大浏览器提供商一起力争在2014年前形成正式的版本。HTML5在2012年1月还处于「草案」阶段、虽然还处于规范在变动的准备阶段、但是无论是开发者还是用户都非常的关注。一个主要的理由就是、随着iPhone和Android等智能手机的崛起，人们期待HTML

celte·2023-12-29 02:41

Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

在Three.js基础入门介绍——Three.js学习二【极简入门】中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例，以此为前提，本篇将引进一个控制器的概念并使用”轨道控制器”

小猪猪哟·2023-12-28 19:39

three.js实现3D汽车展厅效果展示

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：importCarShowroomfrom'.

不爱敲代码的小胡·2023-12-28 17:06

WEB 3D技术 three.js 基础网格材质演示几何体贴图 ao贴图效果

本文我们来说一下基础网格材质之前我们也用到过这个材质但是用的非常基础我们在官网搜索MeshBasicMaterial这是能够给到物体最基础的材质但也是性能最好的材质后续我们还会学效果更好的物理材质但还是那句话效果复杂的东西对性能消耗自然会更多我们拉下来会发现他有非常非常多的属性我们先来写个最基础的编写代码如下import'./style.css'import*asTHREEfrom"three";

-耿瑞-·2023-12-28 12:50

WEB 3D技术 three.js带着大家简单在文档上过一下集合体并理解如何在文档中调试参数

前面讲了自己创建集合体顶点分组但是这样其实挺麻烦的three.js其实已经给我们封装好了官网直接搜索geometry这边这个立方体应该算是我们用的最多的这里这个就是通过三个参数设置它们分别对应高度宽度厚度拉下来我们看到其实他有六个参数前面的

-耿瑞-·2023-12-27 04:04

threejs--初创项目

一.环境介绍倘若你只是使用Three.js库中所提供的几何体，且不载入任何纹理贴图，则网页是可以从本地的文件系统中打开，并且是能够直接运行的，只需在文件管理器中双击HTML文件，它就可以在浏览器中进行显示

知行合一实践派·2023-12-26 16:53

通过three.js玩转车展项目

1.项目搭建1.1创建文件夹mkdir文件名1.2初始化package.jsonnpminit-y1.3安装打包工具并配置相关依赖npmiparcel-d在package.json中打包路径和指令1.4安装three.jsnpmithree-d2.项目搭建2.1新建index.html，并再index.html引入car.js,在car.js开始初始化2.2在car.js中初始化场景、相机、渲染器

贝贝小菜鸟·2023-12-26 07:04

ArcGIS API在视图中渲染Three.js场景

那么我们可以直接编写WebGL代码，也可以集成第三方WebGL库（例如Three.js）。现在我门就来尝试在ArcGIS的三维场景中加入一个物体，比如说UFO：UFO模型该模型下载自CG模型网。然

travelclover·2023-12-26 00:27

three.js使用精灵模型Sprite渲染森林

效果：源码：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";exportdefault{data(){return{n

汉武大帝··2023-12-25 20:51

three.js后处理(发光描边OutlinePass描边样式

效果：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{EffectComposer}fro

汉武大帝··2023-12-25 20:47

WEB 3D技术 three.js 通过分组顶点给同一个物体设置多个材质

上文WEB3D技术three.js集合体讲解三角形构建图形顶点概念顶点值重用我们讲到一个元素是由多个面组成的那么我们是不是可以一个物体用多个材质？

-耿瑞-·2023-12-25 19:40

WEB 3D技术 three.js 通过lil-gui管理公共事件

首先导入我们的lil-gui//引入lil-guiimport{GUI}from"three/examples/jsm/libs/lil-gui.module.min.js";我们直接可以在代码最下面这样写leteventobj={Fullscreen:function(){//全屏document.body.requestFullscreen();},exitFullscreen:functio

-耿瑞-·2023-12-24 05:58

WEB 3D技术 three.js 通过lil-gui 控制x y z轴数值操作分组设置布尔值控制颜色材质控制

上文WEB3D技术three.js通过lil-gui管理公共事件中我们用lil-gui处理了一下基础事件和按钮的管理那么本文我们来具体说说它能做的其他事我们先将基础代码改成这样import'.

-耿瑞-·2023-12-24 05:58

Three.js

定义：three,js,一WebGL引擎（也叫库），基于javaScript,可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供大量特性与API以绘制3D场景于浏览器。WebGL:Web图形库，一组浏览器的API,可以无需其他插件，独立渲染3D场景GPU:图形处理单元，计算机部件，负责在显示器上绘制显示图形视频：Web3D可视化学习技术栈选择(opensnewwindow)下面主要大家谈谈怎

画了五官的猕猴·2023-12-23 14:21

用ThreeJS写了一个圣诞树

就打算用three.js写一个3d版本的。

QD_ANJING·2023-12-23 13:08

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

文章中使用到的案例图片都来源于：Humus-Textures里面有很多免费的资源，可以直接下载，每个资源里面都提供6个不同方位的图片，我们通过threejs稍微处理一下，就能实现以下3D效果的场景了。import{onMounted}from"vue";import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/con

说学逗唱攻城狮·2023-12-23 12:54

VsCode中使用threejs没有语法提示

安装three.js的typescript语法(.d.ts)的依赖npminstall--save-dev@types/three然后再退出vscode，重新进入就有代码提示了

进阶的巨人001·2023-12-23 10:16

WEB 3D技术 three.js rotation元素旋转控制

我们在官网中搜索Euler循环用的就不是三维向量了而是欧拉角对象但欧拉角也是绕着某个轴进行旋转我们有两个这样的元素官网中的order比较特殊它是先旋转完x轴然后旋转y轴最后旋转z轴order也是它默认的值一般来讲我们用就改xyz就够了order一般不需要例如我们这里设置元素沿着x轴旋转45度明显我们设置的这块蓝色元素就发生了偏转这东西也是个局部的子集会继承父元素的偏转角度这里我们设置父元素偏转45

-耿瑞-·2023-12-22 20:56

three.js学习笔记（一）：THREE.Materail五种基础材质的使用

MeshBasicMaterial（网格基础材质）：基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框。MeshDepthMaterial（网格深度材质）：这个材质使用从摄像机到网格的距离来决定如何给网格上色。MeshLambertMaterial（网格Lambert材质）：这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。MeshNormalMaterial（网格法向材质）：

卡夫卡的小熊猫·2023-12-22 18:23

three.js学习：给obj模型设置发光并解决渲染变暗问题

实现思路：借助three.js的OutlinePass管道和Raycaster光线投射实现发光线条实现步骤：1、引入相关js文件EffectComposer：用于实现three.js中的后处理效果。