THREE.js 第12页

three.js 模型一面消失和条纹阴影问题

1.在three.js开发中，发现模型从上面看是正常显示，从下面向上看就消失了，通过查找是.side属性影响，代码如下：newFBXLoader().load("xxx.fbx",(object)=>{

daozun·2023-10-17 10:51

vue中集成cesium和threejs

threejs1.cesium和threejs结合2.vue中集成cesium和threejs2.1vue中集成cesium2.2引入threejs2.3实现效果2.4完整代码1.cesium和threejs结合Three.js

南木元元·2023-10-16 23:33

Three.js - 图形界面工具（lil-gui）（四）

lil-gui为了能够快速地搭建three.js的交互UI，社区就出现了各种UI库，其中lil-gui是three.js社区中非常流行的UI库。选择它是因为语法简单，上手快。

nie-ny·2023-10-16 17:48

Three.js教程：gui.js库(可视化改变三维场景)

ygtu2018·2023-10-16 17:47

初见物理引擎库Cannon.js：使用dat.gui修改物体属性

1dat.gui简介熟悉Three.js的读者肯定对dat.gui不陌生，通过该工具能够创建一个小型的菜单，如下图，在菜单中能够实时的修改一些变量或执行一些操作：在Three.js官方案例中，也大量的使用了此类工具

syzdev·2023-10-16 17:12

Three.js - 图形界面工具（lil-gui）使用

Three.js-图形界面工具（lil-gui）https://lil-gui.georgealways.com/

林强17726013916·2023-10-16 17:39

【Three.js】第十章 Debug UI 调试界面

10.DebugUI调试界面介绍每个创意项目的一个重要方面是使调试变得容易并调整您的代码。开发人员（您）和从事该项目的其他参与者（如设计师甚至客户）必须能够更改尽可能多的参数。你必须考虑到这一点，以便他们找到完美的颜色、速度、数量等，以获得最佳体验。您甚至可能会得到看起来很棒的意想不到的结果。首先，我们需要一个调试UI。虽然您可以使用HTML/CSS/JS创建自己的调试UI，但已经有多个现成的库：

顽皮宝·2023-10-16 17:09

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的绘制

three.js画线比较繁琐一些，我们先展示正常的操作，先看效果图：本案例用到的方法是：LineBasicMaterial和LineSegments。

天外天-亮·2023-10-16 02:32

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

接下来我会分步骤讲解，在线示例在数字孪生平台。先添加一个球体我们用threejs中的SphereGeometry来创建球体，给他贴一张地球纹理。letearthGeo=newTHREE.SphereGeometry(10,64,64)letearthMat=newTHREE.MeshStandardMaterial({map:albedoMap,})this.earth=newTHREE.Mesh

sky.....·2023-10-15 01:38

three.js项目--在线选车

需求知识点：在上一个项目基础上，在学习光源、材质、gsap、精灵与css2D、坐标需求：1、车身颜色修改2、磨砂、高光切换、同时价格切换3、室内室外切换4、驾驶位、副驾驶、外观多角度观察5、车门的开启、关闭编码：面向对象编程思想单例模式订阅发布模式ps:方便代码迁移复用（技术vite+js）1697008817819086git项目地址https://github.com/geyixia/Onli

Best_卡卡·2023-10-14 09:21

Three.js第一个小栗子以及代码结构。

先贴一段代码我的Three.js第一个小栗子canvas{width:100%;height:100%}varscene=newTHREE.Scene();varcamera=newTHREE.PerspectiveCamera

风筝啊·2023-10-13 15:10

Three.js实现光照阴影

Three.js实现光照阴影在Three.js中，物体可以形成阴影投影效果，但是由于渲染阴影需要消耗计算机大量资源，所以Three.js在默认情况下是不会渲染阴影的。

travelclover·2023-10-13 15:05

Vue + three.js入门基础：添加几何体、移动缩放（完整代码）

1.引入库//先npm安装npmithree--save//后在页面中引入import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'2.创建场景this.scene=newTHREE.Scene()3.创建光源//点光源varpoint=newTHREE.Point

我要睡觉了~·2023-10-13 14:44

03.Three.js的入门教程（二）如何创建一个3D地球？

前言：通过上节课02.Three.js的入门课程（一），我们了解了Three.js的最小案例DEMO，熟悉了几个重要组成部分。这节课带领大家编写一个3D地球。

杨航斌·2023-10-13 14:43

Three.js入门②

最近学习Three.js，此贴供学习记录之用。学习视频：Three.js教程。讲解很详细，也有配套的笔记，但不包含前端基础知识的讲解，如果是纯小白的朋友，可以找这位up之前的教程学习一下。

侯咕咕·2023-10-13 14:13

02.Three.js的入门教程（一）

一、如何下载安装Three.js1.1.github链接查看所有版本：https://github.com/mrdoob/three.js/releases1.2.通过npm命令行安装three.js：

杨航斌·2023-10-13 14:42

Three.js 从入门到精通 - 笔记总结

莫兮是我·2023-10-13 13:41

Three.js入门

Three.js学习文章目录Three.js学习参考创建一个场景矩阵变换鼠标操作三位场景旋转缩放场景汇中插入新的几何体辅助三位坐标系``AxisHelper``设置材质效果半透明效果材质常见属性材质类型光照效果设置常见光源类型顶点位置数据解析渲染自定义几何体点模型线模型顶点颜色数据插值计算渐变色之颜色插值访问几何体对象的数据几何体的旋转

程序员_yw·2023-10-13 13:09

three.js精灵模型-下雨场景效果模拟

详情进入：Three.js零基础入门教程(郭隆邦)通过足够多的精灵模型构成一个粒子系统，然后每一个雨滴按照在一定空间内随机分布，每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。

好锅煮好饭·2023-10-13 13:09

THREEJS基础入门

那么合起来，three.js就是使用javascript来写3D程序的意思。Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。先说配置环境吧

Ss、、帅海·2023-10-13 13:37

three.js 入门初识

基本步骤：初始设置创建场景创建相机创建可见对象创建渲染器渲染场景安装npminstallthree引入import*asTHREEfrom"three";一、three三要素：场景、相机、渲染1.场景：//创建场景constscene=newTHREE.Scene()2.相机：OrthographicCamera正交投影（不会改变实际物体的大小）和PerspectiveCamera透视投影（和人的

祝你今天也快乐·2023-10-13 13:36

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

01Three.js中的相机插件OrbitControls.js通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景

骨灰级收藏家·2023-10-13 13:03

three.js入门 ---- 相机控件OrbitControls

前言：自用！！！文档中描述：OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。controls.addEventListener("change",function(){//浏览器控制台查看相机位置变化console.log(camer

Lee_Yu_Fan·2023-10-13 13:31

Three.js的相机控件OrbitControls.js

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

心淡然如水·2023-10-13 05:04

three.js——宝马汽车产品展示

宝马汽车产品展示前言效果图1、创建基本设置(场景和背景等）2、加载模型和展厅灯光3、添加点击事件前言宝马汽车产品展示和原理讲解演示网址：http://f-h-y.gitee.io/bmw-car-display-project/#/效果图1、创建基本设置(场景和背景等）//获取节点constcanvasDom=ref('canvasDom')//创建场景constscene=newTHREE.Sc

冯浩(grow up)·2023-10-13 05:46

全网首发黑马高端课程，仅限老学员免费领取

Three.js是一款非常重要的JavaScript3D库，它可以帮助开发者在网页上创建和显示3D图形。

骨灰级收藏家·2023-10-13 01:10

three.js入门 —— 实现第一个3D案例

前言：three.js入门，根据文档实现第一个3D案例效果图：代码实现：constscene=newTHREE.Scene();//创建一个长方体几何对象Geometryconstgeometry=newTHREE.BoxGeometry

Lee_Yu_Fan·2023-10-12 12:04

three.js实现3d球体树状结构布局——添加入场、出场、点击放大等动画

目录系列文章前言新增功能添加背景灯光旋转动画数据入场、出场动画点击放大实现效果实现源码相关资源系列文章three.js实现3d球体树状结构布局——树状结构的实现前言本文建议先看系列文章第一篇树状结构的实现

风舞红枫·2023-10-11 14:07

three.js学习之vR展厅

目标1、需要会的知识点three.js的场景，摄像机，渲染器，轨道控制器，坐标轴，场景适配，渲染循环创建立方缓冲几何体、纹理、3d物体实现：创建立方几何体，纹理贴图镜面反向渲染，摄像机设置在内部，通过与创建

Best_卡卡·2023-10-11 12:18

Three.js如何计算3DObject的2D包围框？

新缸中之脑·2023-10-11 11:48

vue中使用threejs注意事项

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

久..·2023-10-10 13:39

vue3 setup语法糖使用vanta.js的使用方法

//导入vanta.js和three.js，以及ref等hooksimport*asTHREEfrom'three'importCLOUDSfrom'vanta/src/vanta.waves'import

A_ugust__·2023-10-10 06:14

three.js学习 03 - 添加坐标轴辅助器

1.坐标轴辅助器添加后效果2.坐标轴辅助器AxesHelper（）添加方法红色代表X轴，绿色代表Y轴，蓝色代表Z轴constaxesHelper=newTHREE.AxesHelper(5)//参数5代表长度scene.add(axesHelper)//添加完成后出现坐标轴辅助器3.单页面完整调配代码import*asTHREEfrom'three'//导入轨道控制器import{OrbitCon

不染-9732·2023-10-10 00:08

three.js 基础认识与简单应用

3.现在国内关于Three.js的学习资料很少，总结一下多多少少也能给有需要的小伙伴一些帮助。一、前言1.什么是three.js？

前端菜菜DayDayUp·2023-10-10 00:08

three.js 轨道控制器（OrbitControls）相关原理及坐标转换

最近接触了three.js的轨道控制器OrbitControls，利用轨道控制器可以实现相机围绕目标进行轨道运动（本质就是改变相机的位置），但其具体过程是什么样的呢？

wenjing:)·2023-10-10 00:38

three.js的demo例子-STL加载对象组件

three.js的demo例子-STL加载对象组件提示：demo示例中所涉及到的three.js安装插件方法这里就不单个说明了哈，有需要的网上有很多教程文章目录three.js的demo例子-STL加载对象组件效果展示插件模型一

Ctrl Alt Shift·2023-10-10 00:37

【three.js】结合vue进行开发第一个3d页面

在集成终端打开，输入npminitvite@latest回车后，依次输入项目名，选择vue和js开发然后安装依赖并运行项目二、安装three接下来我们开始安装threenpminstallthree三、Three.js

suoh's Blog·2023-10-10 00:04

THREE.JS自定义中心旋转轴

three.js中自带围绕X,Y,Z轴旋转的api，但要想实现任一方向的中心旋转功能尚未找到简单易懂的资料以供参考。起初想到的是能否借助四元数来实现？但是四元数还是不太友好，不太容易理解。

mmm_morning·2023-10-10 00:03

Three.js入门（涉及如何让平面物体变成立体的、添加坐标辅助系、物体移动）

文章目录一、如何让平面物体变成立体的二、如何添加坐标辅助系三、如何实现3D物体的移动一、如何让平面物体变成立体的使用控制器（controls）。创建main01.js，复制main.js的内容。1.在最开始导入轨道控制器：import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'2.创建轨道控制器：constcontro

TeresaPeng_zju·2023-10-10 00:02

three.js坐标轴辅助器AxesHelper

一、效果图二、添加坐标轴辅助器使用three.js，通过以下代码可以添加坐标轴辅助器：//创建坐标轴辅助器varaxesHelper=newTHREE.AxesHelper(5);//添加到场景中scene.add

jieyucx·2023-10-10 00:31

Three.js-基础设置

HM-hhxx！·2023-10-10 00:30

vue项目使用three.js轨道控制器OrbitControls.js渲染VR2D360度图片

vue项目使用three.js轨道控制器OrbitControls.js渲染VR2D360度图片上一篇博客是用浏览器监听事件来控制图片的render，随着项目的深入，发现three.js-master源码里有几种控制器

Thurmanwang·2023-10-10 00:28

从引入开始学习Three.js

目录1.创建3D场景：并添加一个长方体几何对象2.添加透视投影相机：3.创建渲染器对象4、添加光源5、使用相机控件轨道控制器6、使用平行光与环境光7、循环动画函数（自带的requestAnimationFrame）1、渲染循环实现旋转动画2、计算两帧时间间隔3、渲染循环+OrbitControls（相机）8、canvas画布宽高度动态变化9、stats查看threejs渲染帧率1、案例源码2、创建

Ciwei蓝·2023-10-10 00:57

【three.js】坐标辅助器和轨道控制器

结合上一篇基本的3d页面代码，我们在里面添加坐标辅助器，也就是xyz轴坐标系，这样可以更直观的查看物体的位置一、添加坐标辅助器查看效果，z轴不显示是因为，z轴是正对我们脸部，从我们正面看就是一个点为了让z轴显示出来，我们修改相机的位置可以看到蓝色这条线就是z轴二、添加轨道控制器现在我们设置的立方体是自动旋转的，如果我们不想让他自己旋转，想手动拖拽，如何实现呢？这时就用到了轨道控制器。1、导入轨道控

suoh's Blog·2023-10-10 00:27

Vue3 + Photo-sphere-viewer 全景

PhotoSphereViewer是一款基于Three.js的360X180度全景图预览js插件。该js插件可以360度旋转查看全景图，也可以上下180度查看图片。

奺珁·2023-10-09 19:22

不基于body加载，Raycaster射线拾取对象出现误差问题

three.js利用射线Raycaster进行碰撞检测获取射线穿透对象。

zj靖·2023-10-09 19:19

three.js 物体轮廓高亮

背景：物体在鼠标移上去时有一个高亮的交互；在状态为异常时轮廓高亮并闪烁方案：使用EffectComposer:效果组合器RenderPass:在指定的场景和相机的基础上渲染出一个新场景OutlinePass:-物体边界线条ShaderPass:使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道FXAAShader:着色器主要功能是解决锯齿问题import'./Effect

望月归乡·2023-10-09 19:18

vue+three.js实现模型发光、视角改变、相机移动、管道流动动画

前端小白正在学习three.js,有感兴趣的大家一起相互交流代码主要包括模型发光、3D卡片、视角转换、管道流动等在数字孪生、智慧工厂中常用的一些方法我这里用的三个box,在实际应用中多为obj+mtl格式

前端小白小白白·2023-10-09 18:16

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

文章目录一、在组件中引入three.js依赖的文件二、在setup函数中定义全局变量三、在setup函数中创建outlineObj(selectedObjects)，参数为选中的模型所组成的数组[]四、

青春最美，庆幸遇见karry·2023-10-09 18:46

推荐频道

THREE.js