THREE.js 第9页

01.Cesium和Three.js的初步认识

一、Threejs和Cesium的对比相同点：都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。不同点：Threejs：受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手。例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建。实际上也是调用

杨航斌·2023-11-15 04:52

Cesium+Three.js体验：优化BIM模型展示效果

前面我们介绍了5个Cesium和Three.js结合的方案（《Cesium和Three.js结合的5个方案》），其中深度融合方案实现难度大，今天我们通过一次BIM模型展示效果调优过程，来窥探一下这个方案的具体优势

三维网格·2023-11-15 04:15

Cesium和Three.js的初步认识

一、Threejs和Cesium的对比相同点：都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。不同点：Threejs：受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手。例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建。实际上也是调用

小道士写程序·2023-11-15 04:15

Vue3 + Three.js + gltf-pipeline大型园区场景渲染与3D业务

在非使用unity作为3D渲染方案的前提下，对与目前web开发者比较友好的除了canvas场景需要的2Dbabylon.js，fabric.js,Three.js是目前针对于jsWeb用户最直接且比较友好的

Eirice·2023-11-14 15:09

threejs太阳系（源码加相关素材）

目录前言效果预览图完整代码html部分js部分模块aa前言Three.js是一款基于原生WebGL封装通用Web3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS

小姚学前端·2023-11-14 10:10

Three.js——基于原生WebGL封装运行的三维引擎

二、Three.js特性前言Three.js中文官网Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

骆骆爱学习·2023-11-12 22:00

Three.js提供了多种类型的灯光

Three.js提供了多种类型的灯光，包括环境光、点光源、平行光源和聚光灯。这些灯光可以用来照亮场景中的物体，使其看起来更加真实。

小道士写程序·2023-11-11 18:14

Three.js之渲染器和前端UI界面

参考资料three.jsCanvas画布布局…模型加载进度条知识点注：基于Three.jsv0.155.0three.jsCanvas画布布局UI交互界面与Canvas画布叠加UI交互按钮与3D场景交互Three.js

开心就是最好·2023-11-11 15:30

vue+threejs加载展示3d模型文件注意事项

可以看郭大佬的中文教程http://www.yanhuangxueyuan.com/Three.js/千万不要把希望寄托在随便找到的野博客（我开始就是想图省事拿来人家的用，明明看着一摸一样，可就是各种奇葩报错

txlfreedom·2023-11-11 15:19

three.js加载GLTF格式模型(vue中使用three.js58)

加载GLTF格式模型1.demo效果2.实现要点2.1GLTF模型放置路径2.2GLTF格式说明2.3加载GLTF模型3.demo代码1.demo效果如上图，该demo通过GLTFLoader加载了GLTF格式的模型，并呈现在页面中2.实现要点2.1GLTF模型放置路径vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPa

点燃火柴·2023-11-11 15:49

vue使用three.js加载.FBX模型文件

1.需要安装的依赖//three依赖yarnaddthree//tween.js依赖yarnadd@tweenjs/tween.js2.封装组件draw.vue放在components中import*asTHREEfrom'three';//三维import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';//控制器

这名字真不好起·2023-11-11 15:47

Blender--》点线面操作及其面操作的详解

接下来我会在three.js专栏中分享关于3D建模知识的文章，如果学习three朋友并且想了解和学习3D建模，欢迎关注本专栏，关于这款3D建模软件blender的安装，我在前面的文章已经讲解过了，如果不了解的朋友可以去考考古

亦世凡华、·2023-11-11 11:13

WebGL-Vue3-TS-Threejs：基础练习 / Javascript 3D library / demo

简单理解（并不十分准确），Three.js之于WebGL，好比，jQuery.js之于JavaScript。

snowball_li·2023-11-11 08:15

three.js学习一

官网three.jsthree.js差不多是四个部分组成的：场景，相机，光源和物体场景：场景可以理解为一个容器，是物体、光源等元素的容器使用new函数创建场景使用add函数来向场景中添加物体varscene=newTHREE.Scene();//创建一个场景scene.add(cube);//向场景中加入名为cube的物体相机：相机可以理解为看，创建一个物体，只有在相机范围内才会显示在屏幕中，即被

黄丫丫001·2023-11-11 02:02

Three.js —— Tween.js 使用文档（补间动画）

Tween.js官网文档：tween.jsuserguide|tween.js(tweenjs.github.io)1.引入Tween.jsimportTWEENfrom"./tween.js-master/dist/tween.esm.js"2.定义基本Tween动画目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。模式一：//1设置动画cons

小道士写程序·2023-11-10 02:51

在Three.js中动画概述

在Three.js中，动画是指在场景中创建和控制对象的运动和变化。模型是指通过Three.js加载的3D对象，可以是几何体、网格或复杂的模型文件（如.obj或.gltf）。

小道士写程序·2023-11-10 02:20

Three.js 几个简单的动画

在了解了Three.js的基础概念之后也有这个想法。简单的动画可以提高Three.js初学者的学习兴趣和信心。本文会从初学者的角度出发讲解几个简单的动画，包括：平移、旋转、缩放、跳跃。

德育处主任Pro·2023-11-10 02:19

Three.js的人物动画与交互

这里讲一个three.js自带的案例,机器人动画，稍稍修改了下为了下面的几节做铺垫。运行效果：http://www.b2bdmp.com/examples/robotannimate.h

凭海临风的夏日·2023-11-10 02:49

图形化开发（七）01-Three.js之动画——变形动画

就比如，一个动画需要变动十次才可以实现，那么我们就需要为当前模型的每一个顶点定义每一次所在的位置，Three.js通过每一次修改实现最后的一个动画的整个流程。

viceen·2023-11-10 02:49

JavaScript 3D动画库three.js示例篇

JavaScript3D动画库three.js示例篇本文主要介绍JavaScript3D动画库three.js示例，关于three.js库基础知识可参见：JavaScript3D动画库three.js入门篇

软件技术爱好者·2023-11-10 02:14

在Three.js中动画简单案例

在Three.js中，动画是指在场景中创建和控制对象的运动和变化。模型是指通过Three.js加载的3D对象，可以是几何体、网格或复杂的模型文件（如.obj或.gltf）。

小道士写程序·2023-11-10 02:43

使用EvoMap/Three.js模拟无人机灯光秀

一、创建地图对象首先我们需要创建一个EM.Map对象，该对象代表了一个地图实例，并设置id为"map"的文档元素作为地图的容器。letmap=newEM.Map("map",{zoom:22.14,center:[8.02528,-29.27638,0],pitch:71.507,roll:2.01,maxPitch:90,skyImages:['../public/imgs/night/posx

evomap·2023-11-09 21:37

Threejs教程之着色器

Three.js着色器Three.js视频教程很多时候如果想写一些特效，往往需要编写着色器代码GLSL，如果你不熟悉着色器语言，自然需要学习着色器语言语法，如果你有着色器语言基础，直接使用Threejs

郭隆邦技术博客·2023-11-09 20:56

WebGL 3d模型优化实战

随着我在Echobind的投入时间以及我自己的空闲时间，我一直在慢慢学习webGL库，例如three.js、Mozilla的/SuperMedium的A-Frame、Google的模型查看器以及最近的React-three-fiber

新缸中之脑·2023-11-09 02:55

ThreeJS中导入的模型没有正常生成阴影解决办法

1.背景问题描述在一个Three.js项目中，我试图在场景中渲染一个导入的滑板模型，并希望它能在聚光灯下产生阴影。然而，在实际渲染时，我发现滑板并没有在地面上产生任何阴影。

YuZou 邹宇·2023-11-09 02:24

VUE使用threejs加载3D模型时报错404

在使用three.js加载3D模型时，路径是正确的，但是部署到服务器上时报错404，找不到obj文件。这是因为服务器IIS的MIME没有添加.obj扩展类型。

旭日之温·2023-11-09 02:24

1、Three.js 实现元宇宙汽车 3D 模型(网络)

Three.js实现元宇宙汽车3D模型技术采用three.js+React实现。

韩茹_·2023-11-09 02:23

Three.js测量功能封装--距离、角度与面积

模型距离、角度、占地面积计算距离测量1.获取屏幕坐标位置，转化为三维坐标位置。代码如下：varSx=event.clientX;//屏幕X轴坐标varSy=event.clientY;//屏幕Y轴坐标varx=(Sx/window.innerWidth)*2-1;vary=-(Sy/window.innerHeight)*2+1;varstandardVector=newTHREE.Vector3

_Zou·2023-11-08 18:51

十分钟打造 3D 物理世界

前言在繁忙的业务中，为了缩短设计和开发的周期，我们的H5小游戏更多的会采用2D的视觉风格，但总是一个风格是很无趣的，所以最近搞了一个3D物理游戏的需求，在开发的过程中遇到了不少问题，希望通过这篇文章将关于Three.js

凹凸实验室·2023-11-08 17:46

Three.js 与 Cannon.js 介绍与使用

Three.js基础概念使用Three.js前，首先要理解以下几个核心概念：Sence场景在Three.js中首先需要创建一个三维空间，我们称之为场景。

Zmikoo_zyx·2023-11-08 17:15

暑期项目实训:基于webgl(three.js)的牙科数据可视化展示

第一天:本组的选题是“牙科数据的分割与分类及可视化展示平台”。工作主要划分成三块：前端平台页面搭建、算法与数据可视化、后端及数据库。我和另一个同学一起负责算法与数据可视化。根据学长给的demo视频。我们将组内任务分为如下：一、牙科数据可视化（1）CBCT数据、口扫数据可视化（三维数据）其中细分由分为如下功能：三维数据呈现、改变观测视角、光照效果、材质、颜色透明度变换，形成渲染器中的GUI。（2）X

摄录·2023-11-08 17:05

three.js点滴yan(整理后)

场景、相机和渲染器Three.js整个系统主要包含场景Scene、相机Camera和WebGL渲染器WebGLRenderer三大块，其中场景又包含模型和光源。

飘然离去·2023-11-08 11:11

使用three.js/webgl实现简易地形

本篇以mapbox地形瓦片为例，说明在three.js中使用mapbox地形瓦片的方法。

evomap·2023-11-07 21:26

three.js 制作地球标注的两种方法

一，Sprite精灵标签效果图：//精灵标签--标签永远面向相机functioncreateTxt(position,name){vartexture=newTHREE.CanvasTexture(getCanvasFont());varfontMesh=newTHREE.Sprite(newTHREE.SpriteMaterial({map:texture}));//放大fontMesh.sca

菜鸟驿站2020·2023-11-07 21:26

Threejs实现3d地球记录（4）

三、地球信息流可视化（飞线）1、曲线介绍Three.js基础曲线函数有三种：样条曲线：在三维空间中设置5个顶点，输入三维样条曲线CatmullRomCurve3函数作为参数，然后返回更多个顶点，通过返回的顶点数据

今天也要攒钱·2023-11-07 21:24

three.js CSS3DRenderer报错 is not a constructor

import{CSS3DRenderer,CSS3DObject,}from"three/examples/jsm/renderers/CSS3DRenderer";letcss3DRenderer=newCSS3DRenderer();

Douias·2023-11-07 06:14

使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果

第二次尝试有了第一次失败的经历，果断老实选择使用three.js来实现3d效果。但为什么选择使用CSS3DRenderer实现，可能是相中了CSS3DRenderer与CSS有关联。

weixin_34007020·2023-11-07 06:42

THREE.JS CSS2DRenderer/CSS3DRenderer 模型增加标签

一、原理：three.js中有关于CSS3DRenderer的描写，如下图：只是看这部分内容可能还是云里雾里，其实就是说：three有自己的方法，把页面上的DOM元素转化为一种可以被加载到场景里面的元素

莫，imma·2023-11-07 06:40

使用three.js和CSS3DRenderer.js构建3D空间图片

分为两个部分，html部分和js引入部分，自己感兴趣也可以去three.js官网看，都有源码three.jsgitHub库地址：https://github.com/mrdoob/three.jsthree.js

小白的蓝色生活·2023-11-07 06:08

three.js学习ing+日照效果

Three.js是基于原生WebGL封装运行的三维引擎webGLthree.js1.下载npm1.可旋转立方体可旋转立方体群日照webGLwebGL(web图形库)是一个中JavaScriptAPI，用于在

西瓜味白桃汽水·2023-11-06 23:41

基于three.js构建3D全景图

以最简单的方式实现3D全景色import*asTHREEfrom'three'import{OrbitControls}from'./OrbitControls'exportclassPanorama{constructor(renderer,camera,scene){this.renderer=rendererthis.camera=camerathis.scene=scenethis.ini

我的征途是星辰大海1992·2023-11-06 23:39

three.js 航拍全景图(+陀螺仪)

右上角陀螺仪也可点击,需要https的环境,手动下载DeviceOrientationControls.js文件后台包含打点功能地名:x:y:z:删除获取保存新增上传(*1.点击获取按钮鼠标右键点击在航拍图上。2.确认坐标后点击同行保存按钮。3.标注完成后点击上传按钮)import*asTHREEfrom"three";import{OrbitControls}from"three/example

西瓜味白桃汽水·2023-11-06 23:04

三维技术探索-Three.js开发指南

一、场景搭建1、使用three.js搭建三维场景需要的基本要素渲染器与场景（1、）渲染器(renderer)：是三维中的基本，是three.js的主要对象constrenderer=newTHREE.WebGLRenderer

何小鹏·2023-11-06 15:44

Three.js 开发引擎的特点

Three.js是一个流行的开源3D游戏和图形引擎，用于在Web浏览器中创建高质量的三维图形和互动内容。以下是Three.js的主要特点和适用场合，希望对大家有所帮助。

defdsdddev·2023-11-06 14:56

Three.js之PBR材质与环境贴图

参考资料PBR材质简介…三维软件导出PBR材质属性知识点注：基于Three.jsv0.155.0PBR材质简介PBR材质金属度和粗糙度：metalness、roughness环境贴图.envMap(金属效果)：CubeTextureLoader、envMapIntensityMeshPhysicalMaterial清漆层：clearcoat、clearcoatRoughness物理材质透光率.tr

开心就是最好·2023-11-05 18:07

Three.js加载外部模型(Obj\mtl\json\font)

目录Obj+mtl模型加载加载json+贴图模型（后续详细说一说材质的贴图）：3D字体加载Obj+mtl模型加载引入JS文件functionOBJ(obj,mtl,name){varmtlLoader=newTHREE.MTLLoader();//mtl材质加载器mtlLoader.load(mtl,function(materials){materials.preload();materials

_Zou·2023-11-05 16:35

Three.js一学就会系列：05 加载3D模型

系列文章目录Three.js一学就会系列：01第一个3D网站Three.js一学就会系列：02画线Three.js一学就会系列：03炫酷3D划线Three.js一学就会系列：04炫酷3D文字文章目录系列文章目录前言一

成茂峰·2023-11-05 16:33

Three.js加载解析外部模型变形动画

解析外部模型变形动画目标数据本文是Three.js电子书的12.4节本节课给大家展示两个变形动画的案例，一个是鸟的飞行变形动画，一个是通过滚动条控制人体的变形案例。

郭隆邦技术博客·2023-11-05 16:33

Three.js - JS三维模型库在Vue2中的基础教程

threejs官网:https://threejs.org/threejs案例:https://threejs.org/examples/#webgl_animation_keyframesthreejsAPI:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene开始使用npminstall--sav

EverGlowShan·2023-11-05 16:02

vue3中使用three.js加载外部模型

文章目录前言一、vue3中下载与安装three.js二、使用步骤1.准备容器2.引入3.基本配置4.点击事件三、注意事项四、总结五、完整代码五、实现效果前言主要介绍如何在vue3中使用three.js加载

长欢愉·2023-11-05 16:32

推荐频道

THREE.js