THREE.JS 第17页

Three.js程序化3D城市建模【OpenStreetMap】

对于我在Howest的研究项目，我决定构建一个3D版本的LucasBebber的“交互式讲故事的动画地图路径”项目。我将使用OSM中的矢量轮廓来挤出建筑物的形状并将它们添加到3js场景中，随后我将对其进行动画处理推荐：用NSDT编辑器快速搭建可编程3D场景1、开发环境设置为了使用Node和npm包，我选择使用Vite.js。Vite是一款构建工具，旨在为现代Web项目提供更快、更精简的开发体验。它

新缸中之脑·2023-08-20 02:17

Three.js粒子特效，shader渲染初探

这大概是个序关于Three.js，网上有不多不少的零碎教程，有些过于初级，有些云里雾里，而Three.js官网上的示例逼格之高又令人望而却步，这些对于没学过计算机图形学的童鞋来说，就像入门迈槛不知先迈左脚还是右脚

weixin_34174422·2023-08-19 22:50

纹理图片贴图模糊的问题

最近在使用百度的瓦片图贴图的时候，出现了纹理贴图模糊、不够清晰的问题，请求的瓦片图片资源相同，但是图片作为纹理贴到three.js场景中渲染质量不高。包括stack社区里也有几个类似的提问。

ANoman_M·2023-08-18 20:27

Three.js 实现材质边缘通道发光效果

它将场景和相机作为输入，使用Three.js默认的渲染器（renderer）来进行场景渲染，并将结果输出给下一个渲染通道)3.OutlinePass(是一个用于创建边缘线（轮廓）效果的通道。

答案—answer·2023-08-17 11:08

three.js(14)-阴影效果

如何让物体产生阴影效果呢？首先，场景中所有的物体都必须是感光材质（MeshLambertMaterial），然后是光源的设定，支持阴影的光源有pointLight，spotlight，directionallight，环境光AmbientLight是无法产生阴影的。阴影效果需要如下几个步骤：1、设置渲染器开启阴影renderer.shadowMapEnabled=true;2、设置光源开启阴影po

姜治宇·2023-08-16 17:26

vue使用three.js实现盒子上下左右开关门的效果

效果图：默认是关闭状态。不管从哪个方向打开都需要关闭后才可以进行其他方向的打开操作。具体实现的步骤：1、新建文件在src中创建views文件夹，在views中创建switch文件夹。在switch中创建components文件夹和index.vue文件，最后在components创建BoxSwitch.vue文件。2、BoxSwitch.vue文件中（1）、加载需要的js文件import*asTH

菜鸟karroy·2023-08-16 07:47

Three.js光源

目录Three.js入门Three.js光源Three.js阴影Three.js纹理贴图本文我们将研究three.js中的灯光类型和JavaScript中的光源，探索不同的光源设置。

JonnyLan·2023-08-16 01:52

Three.js入门

目录Three.js入门Three.js光源Three.js阴影Three.js纹理贴图Three.js介绍Three.js是一个开源的应用级3DJavaScript库，可以让开发者在网页上创建3D体验

JonnyLan·2023-08-16 01:22

Three.js纹理贴图

目录Three.js入门Three.js光源Three.js阴影Three.js纹理贴图纹理是一种图像或图像数据，用于为物体的材质提供颜色、纹理、法线、位移等信息，从而实现更加逼真的渲染结果。

JonnyLan·2023-08-16 01:52

Three.js（十二）——骨骼动画、变形动画

文章目录12、骨骼动画、变形动画12.1骨骼动画原理相关类Bone骨架SkeletonGeometry(.skinWeights和.skinIndices属性)骨骼网格模型SkinnedMesh程序创建一个骨骼动画程序实现骨骼动画解析外部骨骼动画模型皮肤顶点权重属性.skinWeights骨骼动画顶点数据12.2加载外部模型骨骼动画查看骨骼动画数据解析渲染骨骼动画12.3变形目标动画原理创建变形动

summer_du·2023-08-15 15:25

Three.js（七）—— 组对象Group、层级对象

文章目录7、层级结构、树结构7.1组对象Group、层级对象Group案例查看子对象.children场景对象结构.add()方法.remove()方法7.2对象节点命名、查找、遍历模型命名(.name属性)树结构层级模型递归遍历方法.traverse()查找某个具体的模型7.3本地位置坐标、世界位置坐标.getWorldPosition()方法建立世界坐标系概念本地缩放系数.scale本地矩阵.

summer_du·2023-08-15 15:25

3D沉浸式旅游网站开发案例复盘【Three.js】

PlongezdansLyon网站终于上线了。我们与Danka团队和NicoIcecream共同努力，打造了一个令我们特别自豪的流畅的沉浸式网站。这个网站是专为ONLYONTourism和会议而建，旨在展示里昂最具标志性的活动场所。观看简短的介绍视频后，用户可以进入城市的交互式风景如画的地图，所有场馆都建模为3D对象。每个建筑物都可以点击，进入一个详细说明位置信息的专用页面。推荐：用NSDT编辑器

新缸中之脑·2023-08-15 11:06

wwmin_·2023-08-15 03:59

数字孪生：Three.js(WebGL)和虚拟引擎

一、先说总结总的来说，选择Three.js和WebGL还是虚拟引擎，主要取决于你的项目需求和优先级。

@MADLING·2023-08-13 11:48

Three.js之相机、渲染器、光源、动画、性能监测

参考资料第一个3D案例—透视投影相机第一个3D案例—渲染器…Canvas画布布局和全屏知识点透视投影相机PerspectiveCameraWebGL渲染器WebGLRenderer辅助观察坐标系AxesHelper漫反射网格材质MeshLambertMaterial点光源PointLight点光源辅助观察PointLightHelper环境光AmbientLight平行光DirectionalLi

开心就是最好·2023-08-13 10:25

Vue.js2+Cesium1.103.0 十、加载 Three.js

Vue.js2+Cesium1.103.0十、加载Three.jsDemoThreeModel.vue/*eslint-disableeqeqeq*//*eslint-disableno-unused-vars*//*eslint-disableno-undef*//*eslint-disableno-caller*/import*asTHREEfrom'three'import{OrbitCon

liuzhenghe30265·2023-08-13 07:05

体渲染原理及WebGL实现【Volume Rendering】

本文介绍体渲染的原理并提供Three.js实现代码，源代码可以从Github下载。推荐：用NSDT编辑器快速搭建可编程3D场景。

新缸中之脑·2023-08-13 03:54

Three.js人门案例

刚入门Three.js什么是Three.js？Three.js是一款webGL框架，由于其易用性被广泛应用。Three.js在WebGL的API接口基础上，又进行的一层封装。

白鹭凡·2023-08-12 04:51

Three.js WebXR沉浸式渲染简明教程

在本文中，我们将介绍如何将WebXR与Three.JS结合使用来创建针对大型异构用户群的沉浸式体验。

新缸中之脑·2023-08-11 05:24

three.js性能优化微指南

[1]性能监测检测FPS使用stats，这里就不过多说明了禁用FPS限制监视绘制调用绘制调用是GPU绘制三角形的操作。当我们有一个包含许多对象、几何体、材质等的复杂场景时，会有很多绘制调用。通常我们可以通过见减少绘制调用来提升性能这里可以使用这个浏览器扩展来监视绘制调用https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkad

seeooco·2023-08-11 04:16

three.js使用着色器绘制图案

除了通过加载纹理来给材质添加一些图案，我们还可以通过shader添加，这种方式添加更灵活，性能也更好些此篇的作用主要是提供一些设色器图案素材[1]uv坐标的玩法因为uv坐标的特性（左下角为0,0，右上角为1,1），可以借助其和一些二GLSL内置函数实现很多有意思的图案首先如果要所以uv坐标可以直接在顶点着色器中获取到，然后传递给片段着色器：然后就可以玩玩了[2]内置函数图案modstep阀门函数网

seeooco·2023-08-11 03:46

three.js修改内置材质着色器代码

通常我们是通过修改扩展three.js内置的材质来实现一些复杂的效果的，而不是使用shaderMaterial材质从零开始实现。

seeooco·2023-08-11 03:46

three.js着色器材质

当Three.js内置的材质不能满足需求时，就需要通过编写着色器来实现了也可能是出于性能原因。像MeshStandardMaterial这样的材料非常复杂，涉及大量的代码和计算。

seeooco·2023-08-11 03:45

使用Three.js制作一个旋转多面体

之前一直对three.js比较好奇，但是一直没有着手学习。今天刷到一篇博客（博主：1_bit），觉得挺有意思，就跟着敲了一下。

五彩斑斓黑123·2023-08-10 23:18

【Three.js】遮挡剔除

背景考虑到场景中模型顶点过多会让fps过低，所以想把相机看不到的模型从场景中移除，来提高渲染性能，但是后续测试结果让我恍然大悟。虽然场景中的顶点数降低了很多，但是每次渲染检查遮挡的过程本身就是一个消耗性能的行为，有点适得其反了。虽然并没有解决问题，但是在此做一下探索记录。效果例子index.htmlthree.jswebgl-geometryhierarchybody{background:#ff

饺子大魔王的男人·2023-08-10 17:34

three.js 地球与卫星绕地飞行【真实三维数据】

（真实经纬度运行轨迹）完整代码import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'exportdefault{name:"home3dMap",data(){return{loading:true,scene:null,//场景camera:null,//相机mes

奚大野...·2023-08-10 10:55

Three.js 创建网格辅助线，坐标轴辅助线，模型骨骼辅助线

three.js中的辅助线使用1.网格辅助线（GridHelper）2.坐标轴辅助线（AxesHelper）3.模型骨骼辅助线(SkeletonHelper)在上一篇Three.js加载外部glb,fbx

答案—answer·2023-08-10 09:38

Three.js给场景添加背景颜色，背景图，全景图

用于创建和表示颜色）2.THREE.TextureLoader（用于加载和处理图片纹理）3.THREE.SphereGeometry（用于创建一个球体的几何体）4.THREE.Mesh（用于创建一个材质对象）在上一篇Three.js

答案—answer·2023-08-10 09:37

Three.js加载外部glb,fbx,gltf,obj 模型文件

vue3使用Three.js加载外部模型文件1.安装Three.jsyarnaddthreenpminstallthree2.新建一个renderModel.js用于处理Three.js相关逻辑import

答案—answer·2023-08-10 09:07

Three.js 播放glb,fbx,gltf,obj 模型文件自带动画

three.js中模型动画的播放首页在上一篇Three.js加载外部glb,fbx,gltf,obj模型文件的文章基础上新加入三个函数方法1.开始执行动画方法：onStartModelAnimaion2

答案—answer·2023-08-10 09:07

Three.js 设置模型材质纹理贴图和修改材质颜色，材质透明度，材质网格

THREE.TextureLoader（用于加载和处理图片纹理）3.THREE.MeshLambertMaterial（用于创建材质）4.getObjectByProperty（通过材质的属性值获取材质信息）在上一篇Three.js

答案—answer·2023-08-10 09:06

three.js提升渲染效果

通常我们都希望渲染出更逼真的效果，有许多技术来改善模型在Three.js中渲染后的外观。但请注意，其中一些技术可能会影响性能，而某些技术则取决于您的模型。你必须根据情况进行调整。

seeooco·2023-08-10 08:07

THREE.js-------3D模型制作demo总结

下图是three.js中文文档截取的思维导图。（1）场景(Scene):场景是[物体,光源等元素]的容器。

smallmww·2023-08-10 05:14

vue中使用Three.js

2023-06-15-11-25-561.安装npminstallthree2.引入//方式1:导入整个three.js核心库import*asTHREEfrom'three';constscene=newTHREE.Scene

volodyan·2023-08-10 01:13

关于three.js在vue项目中引入GLTF文件

点击前往，关于three的基础使用，这里只写关于GLTFLoader在vue的使用，其他类型的3D模型可使用其他loader，three.js中文文档点击这里有免费的gltf文件下载注意！！！！！！

Liiiiiiiie·2023-08-09 16:52

Three.js阴影

目录Three.js入门Three.js光源Three.js阴影使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影（coreshadow）。

JonnyLan·2023-08-09 10:39

（转）使用Three.js制作一个基本的3D飞行游戏

今天，我们将使用Three.js创建一个简单的3D飞机，使WebGL更简单。由于GLSL的复杂性和语法，WebGL对许多开发人员来说是一个相当陌生的世界。

陈旭辕·2023-08-09 06:18

使用Three.js创建旋转的立方体

使用Three.js创建旋转的立方体在本篇技术博客中，我们将介绍如何使用Three.js创建一个简单的场景，其中包含一个旋转的立方体。

荔枝啵啵·2023-08-08 20:44

web 3d场景构建+three.js+室内围墙，仓库，楼梯，货架模型等，第一人称进入场景案例

翻到了之前的一个案例，基于three.js做的仓库布局模拟，地图元素除了大模型外，其他都是通过JSON数据解析动态生成的，例如墙体，柱子门口，地标等，集成了第一人称的插件可以第一人称进入场景有需要的可以下载看看

11eleven·2023-08-08 14:11

vue结合three.js加载3D模型报404错误

使用vue结合three.js加载3D模型时报404的错误，加载字体库也会报404错误，同样的方法。

H_HX126·2023-08-08 09:45

three.js渲染带动画的glb文件（内附源码，保姆级）

那就一步步来吧哎最底下附带了案例源文件1.准备好three.js中用到的各种文件的各种文件然后让我们开始吧，可恶哇！！！就想偷个懒import*asTHREEfrom'.

小周不会three.js哇·2023-08-07 13:44

three.js

three.js使用ES6标准三大组建场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

肖雨San·2023-08-07 06:24

ShaderToy着色器移植到Three.js全过程记录

新缸中之脑·2023-08-06 05:13

three.js学习

三大组建：场景(scene),相机(camera),渲染器(renderer)创建三要素代码：varscene=newTHREE.Scene();//场景varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//透明相机varrenderer=newTHREE.WebGLRend

是阿狸·2023-08-05 07:31

三维开发常见坐标系概念

初学者刚开始了解三维可视化开发时，都会遇到各种坐标的概念，同时也需要在各个坐标系之间相互转换数据，导致对各个概念混淆，分不清楚到底各个坐标系是什么关系，下面我就以我自己对webgis相关了解，结合Three.js

Erric_Zhang·2023-08-04 01:57

小红书前端开发一面 2023.7.20

北京时长：45min日常实习项目拷打+Three.js+Vue+JavaScript+CSS+手写题自我介绍选择一个你负责任务最多的项目讲讲在项目开发中遇到的一个印象最深刻的问题，最后如何解决的讲讲你认为的Three.js

⁡⁢⁡⁢⁠Ac·2023-08-03 04:45

Three.js创建天空盒

方式一：使用Cue纹理constcubeTextureLoader=newTHREE.CubeTextureLoader();constenvMap=cubeTextureLoader.load(['texture/pisa/left.png','texture/pisa/right.png','texture/pisa/top.png','texture/pisa/bottom.png','te

Naive》·2023-08-02 18:49

Krpano全景制作

一、前言在使用krpano之前，我已经做过两个全景项目了，用的是基于three.js的插件photoSphereViewer，这个全景插件用起来还是很方便的，虽然研究起来费了点时间，但是基本的全景功能都能实现

Naive》·2023-08-02 18:19

THREE.js绘制银河系

functioncreateYinhexi(){scene.background=newTHREE.Color("#000000");constscale=2;constparameters={count:50000,size:.6,radius:10,branches:20,spin:-1.72,randomness:0.3,randomnessPower:3,insideColor:"#ff6

Naive》·2023-08-02 18:47

three.js实现vr全景图

three.js中文网1、立方体实现立方体6个面要贴上6个方向的图片，这6个图片如下所示：实现代码如下：import*asTHREEfrom'three'import{OrbitControls}from'three

拾荒旧痕·2023-08-02 12:49

推荐频道

THREE.JS