threeJS

ThreeJS-纹理（十）

关键代码：consttextureLoader=newTHREE.TextureLoader();//纹理加载器加载图片constdocColorLoader=textureLoader.load('static/1.webp')//letcolor=newTHREE.Color(Math.random(),Math.random(),Math.random());constcubeMateria
不穿铠甲的穿山甲·2023-04-02 21:46

ThreeJS-纹理加载进度(十四)

使用纹理加载器对纹理加载进度进行监控关键代码：//创建加载管理器constmanager=newTHREE.LoadingManager(()=>{console.log("加载完成");},(url,loaded,total)=>{console.log("当前正在加载资源"+url);console.log("总资源数"+total+"已加载"+loaded);},(e)=>{console.
不穿铠甲的穿山甲·2023-04-02 21:46

ThreeJS-全屏和退出全屏、自适应大小(五)

下载新得组件npminstallgsap-S新引入importgsapfrom'gsap'//动画控制代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'importgsapfrom'gsap'//动画控制exportdefault{name:"HOME",
不穿铠甲的穿山甲·2023-04-02 21:16

ThreeJS-dat.gui界面控制颜色、隐藏、位置(六)

下载组件dat.guinpminstalldat.gui-S引入组件import*asdatfrom'dat.gui'//界面控制代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'importgsapfrom'gsap'//动画控制import*asdat
不穿铠甲的穿山甲·2023-04-02 21:16

ThreeJS-文件夹、线框、点击按钮触发函数(七)

代码：import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";importgsapfrom"gsap";//动画控制import*asdatfrom"dat.gui";//界面控制exportdefault{name:"HOME",components:{//vue
不穿铠甲的穿山甲·2023-04-02 21:16

ThreeJS-学习基础（一）

下载组件threejsnpminstallthree-S引入threejsimport*asTHREEfrom"three";代码import*asTHREEfrom"three";exportdefault
不穿铠甲的穿山甲·2023-04-02 21:44

ThreeJS-轨道控制器(二)

新引入import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'exportdefault{name:"HOME",compon
不穿铠甲的穿山甲·2023-04-02 21:44

ThreeJS-缩放、旋转(四)

代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'exportdefault{name:"HOME",components:{//vueQr,//glHome,},data(){return{};},mounted(){//使用控制器控制3D拖动旋转Orb
不穿铠甲的穿山甲·2023-04-02 21:44

threejs优化之3D模型压缩

threejs优化之3D模型压缩项目采用vue+threejs开发，在开发过程中需要从外部加载3D模型。
wodomXQ·2023-04-02 21:00

ThreeJS从实战到源码 - 鼠标操控3D场景

先实现一个实现代码functionrender(){renderer.render(scene,camera);//执行渲染操作}render();varcontrols=newTHREE.OrbitControls(camera,renderer.domElement);//创建控件对象controls.addEventListener('change',render);//监听鼠标、键盘事件代
Lucio_cn·2023-04-02 21:20

ThreeJS-前端3D可视化开发入门-vue

1、npm安装threejs创建vue项目(略)执行如下命令：安装threejs相关模块npminstallthreenpminstallthree-css2drendernpminstallthree-obj-mtl-loadernpminstallthree-orbit-controlspackage.json
long-king·2023-04-02 21:20

ThreeJS从实战到源码 - 创建场景

直接写出：创建一个简单的ThreeJS场景body{margin:0;}#mainCanvas{width:100%;height:100%}varscene=newTHREE.S
Lucio_cn·2023-04-02 21:49

ThreeJS-3D引擎渲染从入门到入土 搞定前端前沿技术

一、基础篇ThreeJS-学习基础（一）_不穿铠甲的穿山甲的博客-CSDN博客ThreeJS-轨道控制器(二)_不穿铠甲的穿山甲的博客-CSDN博客ThreeJS-移动(三)_不穿铠甲的穿山甲的博客-CSDN
不穿铠甲的穿山甲·2023-04-02 20:28

threejs 3d网络设备拓扑图绘制示例

技能点：threejs,Vue,canvas,几何数学。
huo611·2023-04-02 06:53

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
上一页 9 10 11 12 13 14 15 16 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他