threeJS 第14页

Three.js学习笔记（1）

同时在这个目录下运行yarnaddthreeindex.htmlthreejsbody{m

羽阁丶·2023-04-01 08:26

angular9 + threejs

cavans.htmlcavans.tsimport{Component,OnInit,ViewChild,ElementRef}from'@angular/core';import{initRenderer,initCamera,initScene,initLight,initGrid,initStats}from'src/app/config/base';import{PickService}

候鸟_ywh·2023-03-31 02:51

threejs---相机沿着自定义轨道移动，实现场景漫游效果

效果图：说明：1、本文章只提供轨道生成和相机沿轨道移动的实现方法，不提供效果图的完整代码2、本文章暂不介绍机器人的渲染、如何跟随相机移动显示，感兴趣的可以自行实现。思路是机器人的位置放在相机N个点位之前，运动原理和相机移动一样。且机器人的lookAt要指向所在位置的前一个点位，否则机器人在转弯时只是生硬平移，头部朝向不会跟随转弯而改变！1、生成自定义轨道methods：createLine(){/

String佳佳·2023-03-30 22:47

threejs---第一人称控件 PointerLockControls

先上效果图：1、引入插件...其他必要插件的引入...import{PointerLockControls}from'three/examples/jsm/controls/PointerLockControls'2、定义相关变量data(){return{selControls:null,moveForward:null,moveBackward:null,moveLeft:null,moveR

String佳佳·2023-03-30 22:16

threejs 加载两个场景_threejs - 3 - 场景刷新

:)简介刷新其实可以和动画联系起来，改变场景中的物体(改变位置)，刷新界面。最后就可以形成动画。一般1秒钟需要刷新60次定时器实现动画可以用js的定时器来做1秒60次的刷新varscene=newTHREE.Scene();varcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);var

欸测测·2023-03-30 22:35

ThreeJS-灯光(十三)

关键代码：基础材质改为标准材质，constcubeMaterial=newTHREE.MeshBasicMaterial()改为：constcubeMaterial=newTHREE.MeshStandardMaterial()标准材质需要和灯光配合，灯光分为环境光和直接光环境光：由周围物体发出的光。（比较温和、暗淡）直线光：由光源发出的光。（比较强烈）constcubeMaterial=newT

不穿铠甲的穿山甲·2023-03-30 22:32

ThreeJS-纹理旋转、重复（十一）

旋转文档：three.jsdocs关键代码：//设置旋转中心,默认左下角docColorLoader.center.set(0.5,0.5);//围绕旋转中心逆时针旋转45度docColorLoader.rotation=Math.PI/4;完整代码:import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/con

不穿铠甲的穿山甲·2023-03-30 22:02

ThreeJS-透明材质和透明纹理（十二）

素材：door.webpmen_k.webp关键代码：//纹理加载器consttextureLoader=newTHREE.TextureLoader();//纹理加载器加载图片constdocColorLoader=textureLoader.load('three/door.webp');constcubeMaterial=newTHREE.MeshBasicMaterial({color:0

不穿铠甲的穿山甲·2023-03-30 22:02

在vue-cli中使用threejs，并实现鼠标控制移动，以及点击交互效果

这里假设已经了解threejs中基本的三要素等基础知识如题，前戏不多，直接提枪上阵第一步：创建一个vue-cli项目按照vue-cli官网方式创建,这里话不多说，不需要过多设置，能运行起来就欧克（当然是

风筝啊·2023-03-30 22:23

THREEJS - 模型的裁切消隐

在项目应用中，有时候会存在需要模型外表慢慢褪去的效果，就像裁切一样的，如下图所示：看上去效果很炫酷，实际上实现起来并不复杂，下面给大家详细介绍一下：1.开启场景的渲染通道，此功能较消耗性能，所以可以根据实际需要使用。renderer.clippingPlanes=Object.freeze([]);renderer.localClippingEnabled=true;2.优先定义基础变量，这里的l

Crimaster·W·2023-03-30 21:30

THREEJS - 模型居中

在使用THREEJS的过程中，我们常常会遇到关于模型的处理，有时候建模的同事会帮我们将模型归零后给我们，有时候是没有归零的，但这时候需要将模型在场景中居中展示。

Crimaster·W·2023-03-30 21:29

ThreeJS-移动(三)

代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'exportdefault{name:"HOME",components:{//vueQr,//glHome,},data(){return{};},mounted(){//使用控制器控制3D拖动旋转Orb

不穿铠甲的穿山甲·2023-03-30 21:53

Vue + Three.js导入obj模型并实现爆炸效果

Three.js官方文档：https://threejs.org/manual/#zh/load-obj注意点：obj文件需要放到public文件夹下的static文件夹中（路径写法错误会导致模型不显示

Vivian_0430·2023-03-30 19:49

WEB端三维可视化（threejs）03

目前threejs支持的模型格式有很多，gltf/glb、obj+mtl、fbx、dea等等…主要推荐的模型格式：obj+mtl或者gltf/glb。

hcdu·2023-03-30 16:57

Web 3D焦化厂-智慧数字焦化厂HTML5+WebGL(Threejs)案例实战

随着IT新技术5G、人工智能、移动互联的发展，虚拟仿真Html5+3D(Webgl)技术已经悄然崛起，而3D工厂在数字化的今天，已经被越来越多的公司和企业应用，三维数字化工厂模型的应用，加快了工厂车间、厂房，设备，传感器、管道罐体运行状态和实时监测控制等各个环节的效率。对工厂的大楼、生产车间、生产设备设施、监控设备等进行三维建模，实现物理工厂园区到3D虚拟工厂园区的数字化、可视化的孪生转化。使工厂

allenjiao·2023-03-30 14:10

NevMesh.Js你可以在Laya引擎中直接使用的AI寻路

是在ThreeJs的PatrolJS基础上，针对Laya引擎做了改造，本教程将会带大家简单了解和使用NevMesh.Js使用。!

李尔在此·2023-03-30 05:53

Threejs 3D中文字体引入及优化

threejs中需要引入中文字体，官网给出的字体文件都是英文的，想要显示出中文字体需要做转换。

十八里8837·2023-03-29 09:00

vue+three.js开发

Three.jsExamples在vue-cli3中使用three.js的OBJLoader和MTLLoader来加载三维模型文件.obj和.mtl注意：需要threeJsload的模型，只能放在静态资源目录下

_小小苏_·2023-03-28 20:01

threeJs基础（2）

基础元素1.点varpoint1=newTHREE.Vector3(x,y,z);2.线vargeometry=newTHREE.Geometry();定义几何体varmaterial=newTHREE.LineBasicMaterial({});定义线条的材质，包括color(线条颜色)、lineWidth(线条宽度)、linecap(线条两端的外观)、vertexColors(线条是否使用顶点

尘世中迷途小羔羊·2023-03-26 01:52

Venus: ThreeJS FBXLoader

01.关于3D文件格式的选择threejs提供了很多格式的Loader但是却只提供了obj格式的使用文档,而obj格式是不能存储骨骼信息的json格式的使用较为方便,网上例子很多,但是3Dmax要插件才能导出最后敲定用

dranker·2023-03-25 14:56

three.js Demo案例

https://threejs.org/examples/#webgl_geometry_minecraft

fighterboy·2023-03-24 08:49

threejs绘制中文方案

1.创建文字几何体使用threejs自带的helvetiker_bold.typeface字体文件来进行渲染，仅支持渲染英文exportclassText{staticfont:Font;data:Mesh

星月西·2023-03-23 15:16

Vue结合ThreeJS实现iview官网首页波浪粒子的特效

背景最近正在物色一款好用的前端框架，偶然发现iview1.0的官网首屏效果颇为酷炫，心中瞬间种草，这里以最新的ThreeJS版本为例将其与vue（此处使用vue-admin-template作为脚手架）

Jkanon·2023-03-22 06:00

通过Threebox方法实现在mapbox上添加threejs内容2

上一篇已经实现了在mapbox-v50即以后的版本添加threejs，但是他是18年10月之后的事了，那么如何在之前的版本实现呢？因为对已有的项目如果盲目的去修改版本会导致很多以前的内容无法实现。

gardenlike2·2023-03-21 06:42

三维基础知识

背景：作为几年工作经验的普通计算机软件工程专业本科学生，对于web前端当然非常熟悉，对于Canvas也能正常的使用，但是直接抄着Threejs官网example和api，只能说可以找猫画猫，还很蹩脚。

潇洒地流浪·2023-03-18 22:44

threejs gpu pick

package.json{"name":"gpu-pick-code","version":"1.0.0","main":"index.js","license":"MIT","scripts":{"start":"webpack-dev-server"},"dependencies":{"three":"0.110.0","three-orbitcontrols":"2.110.3"},"dev

antlove·2023-03-18 00:48

【THREE.JS学习（3）】使用THREEJS加载GeoJSON地图数据

本文接着系列文章（2）进行介绍，以VUE2为开发框架，该文涉及代码存放在HelloWorld.vue中。相较于上一篇文章对div命名class等，该文简洁许多。接着引入核心库import*asTHREEfrom"three"import{OrbitControls}from"three/examples/jsm/controls/OrbitControls"import*asd3from"d3"i

DoYouKnowArcgis·2023-03-17 13:56

threeJs实现波纹扩散及光标浮动效果详解

目录版本介绍threejs版本vue版本node版本正文核心代码导入即用1.新建一个ts文件2.在要用的页面导入版本介绍threejs版本"version":"0.142.0",vue版本"version

·2023-03-17 01:34

theejs--投影工具

能看到就是缘分，今天给大家分享一个threejs有关投影的小工具，threejs调试灯光及投影时不像unity那么方便，每次开发项目尤其是需要做实时投影时，都有在这里浪费大量的时间，实在气不过索性开发一个调试投影和灯光关系的小工具

知行合一实践派·2023-03-16 13:18

前端前沿web 3d可视化技术 ThreeJS学习全记录

可视化技术随着浏览器性能和网络带宽的提升使得3D技术不再是桌面的专利打破传统平面展示模式前端方向主要流向的3D图形库包括Three.js和WebGLWebGL灵活高性能，但代码量大，难度大，需要掌握很多底层知识和数学知识Threejs

跳动的世界线·2023-03-15 04:41

threejs-day2(场景/材质/纹理/光照)

场景主要就是父子关系坐标系关系。直接上例子import*asTHREEfrom"../../three/build/three";constcanvas=document.querySelector("#canvas");constrenderer=newTHREE.WebGLRenderer({canvas});renderer.setClearColor(0xaaaaaa);renderer.

小杰66·2023-03-12 22:00

vue+three.js的3D可视化机房

1、WebGL与threeJSWebGL是一种3D绘图协议，其允许JavaScript和OpenGLES2.0结合在一起，为H5Canvas提供硬件3D加速渲染，可以借助系统显卡在浏览器里更流畅地显示3D

患者_·2023-03-10 13:03

three.js-master 如何正确启动

直接打开threejs-master的html例子会报一个跨域的报错应该先npmi然后npmrunstart启动，然后通过服务启的接口访问就可以了！

BuzzLightYearcc·2023-03-09 04:30

DS-SDK封装ThreeJS的三维场景核心库Viewer

目录正文一、ThreeJS-ES6库引入二、初始化渲染器三、初始化相机四、初始化场景五、初始化鼠标控制器六、灯光初始化七、全局渲染的函数-逐帧获取页面大小八、全局动画函数九、销毁页面正文viewer核心库的封装主要是针对

·2023-03-08 21:56

threejs学习（七）--解决2个sprite遮挡问题

场景：这里的场景是，一个sprite作为背景图，一个sprite作为文字；实现一个类似tip这样的功能。要实现这个功能，有一个问题，就是解决文字的sprite会被背景图的sprite所遮挡的问题；这个问题可以通过render（渲染器）的sortObjects属性来解决；//使渲染顺序改为，先加入场景的先渲染this.renderer.sortObjects=false;//----------省略

干饭两斤半·2023-02-28 15:02

【ThreeJs】能设置尺寸大小的THREE.Sprite

默认情况下Threejs的精灵材质要改变大小只能依靠设置scale而不能像其他几何体一样设置长宽。

谷雨睡不醒·2023-02-28 15:32

threejs 精灵材质(SpriteMaterial)与pointMaterial的学习

在threejs中，这样说明Sprtite（doc）:Aspriteisaplanethatalwaysfacestowardsthecamera,generallywithapartiallytransparenttextureapplied.Spritesdonotcastshadows

默茉·2023-02-28 15:31

THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）

threejs文字精灵sprite的实现1.手动添加文字精灵2.通过json动态获取文字精灵，并进行交互3.point模型只表示位置4.CircleGeometry实现5.3.PlaneGeometry

WFF的赵本山·2023-02-28 15:31

threejs精灵Sprite。通过canvas创建2d和3d的模型材质

在threejs中，这样说明Sprtite（doc）:Aspriteisaplanethatalwaysfacestowardsthecamera,generallywithapartiallytransparenttextureapplied.Spritesdonotcastshadows

搬砖小田·2023-02-28 15:31

Threejs基础代码段（一）Sprite精灵标签

相比于普通气泡窗，Sprite效果拥有一个独特属性，无论场景如何旋转偏移，标签总是正对着相机平面。在日常基础设施、物联设备中精灵标签最为常用。//精灵标签摄像头letlocatCamera=[newTHREE.Vector3(15,4,0),newTHREE.Vector3(14,4,-19),newTHREE.Vector3(13,11.5,-9),newTHREE.Vector3(85,11,

Giser之路·2023-02-28 15:01

基于threejs(webgl)的3D元宇宙云展厅

首先看看效果图：基于threejs的3D展厅基于threejs开发的3D展厅，展品可以自由摆放。

·2023-02-25 10:55

Threejs基本概念(七)光

环境光AmbientLight为场景提供整体的光照效果，没有明确光源，各处形成亮度一致点光源PointLight没有大小，只是一个点平行光DirectionalLight例如太阳光平行光照的亮度相同，于平面所在位置无关聚光灯SpotLight一种特殊的点光源朝某方向投射光线，光线形式为圆锥形矩形平面光RectAreaLight此灯可以投射阴影，这个类目前正在积极开发中，可能还没有生产就绪（从r83

Doter·2023-02-17 23:01

threejs碰撞检测-前进后退，上下楼梯一口气搞定！

原文参考我的公众号文章#threejs碰撞检测-前进后退，上下楼梯一口气搞定！物体移动-前后碰撞检测主要还是依靠Raycaster(origin,direction)射线检测。

·2023-02-17 15:51

blender建模 & threejs开发初体验 | 大帅老猿threejs特训

之前看到过threejs做的各种炫酷的案例，甚是有趣，一直打算自己也能写个demo尝试下，这次就跟着教程来学习下，小小的入个门。建模这次是用blender建的模，当然也可以用其他软件。

·2023-02-16 22:04

Three.js和Blender入门元宇宙 | 大帅老猿threejs特训

一、元宇宙入门元宇宙的概念译自英语名词metaverse。其前缀“meta”有“元”之义，词根“verse”代表宇宙（universe），二者组合起来为“超越宇宙”，意即元宇宙，是利用互联网、软件、区块链等多种技术将现实与虚拟世界融合。苹果、微软、Facebook和华为等高科技公司都对元宇宙进行不同的诠释，让我们感到有点神秘又有一点模糊，学习胖达老师和大帅老师的组织Web3D实训，学习了从Thre