threeJS 第4页

threejs 多屏互动效果，居然还能这么玩

threejs多屏互动效果看别人做了多屏互动的效果，觉得还挺有意思的，也顺便自己动手操作一下试试。先来张效果图：项目地址参考地址项目基于vue+threejs。

xyccstudio·2023-12-16 17:08

mars3d中bookmark视⻆书签，⽣成包含threejs加载模型的图⽚

问题:expImage示例⽣成书签视⻆图⽚时：1.如果地图中有threejs加载的模型，⽣成视⻆书签后，⽣成的图⽚中没有模型效果图如下：期望效果:地图上three加载模型时，⽣成视⻆书签时，视⻆图⽚中也有模型显示解决

mianmian0103·2023-12-16 03:33

创建一个有阴影的threejs三维几何体

import*asTHREEfrom"three"import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'constwidth=window.innerWidth;constheight=window.innerHeight;//创建场景constscene=newTHREE.Scene();scene.backgro

奚大野...·2023-12-15 17:08

Threejs之相机基础

参考资料正投影相机…相机控件MapControls知识点注：基于Three.jsv0.155.0正投影相机正投影相机-Canvas尺寸变化包围盒Box3地图案例(包围盒、正投影)相机动画(.position和.lookAt())不同方向的投影视图旋转渲染结果(.up相机上方向)管道漫游案例OrbitControls旋转缩放限制相机控件MapControls代码实现Three.js{"imports

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

js也能写3D游戏？

先要上这个网站https://threejs.org，然后下载它的three.js源码放到一个目录，比如js。

Peppa_6dad·2023-12-15 08:45

threejs ShapeGeometry 自定义贴图的uv坐标

问题描述：由于一些原因，要绘制一个长方形，但是这个长方形并不是PlaneGeometry，而是一个ShapeGeometry。但是同样的贴图，同样的形状，贴图贴在PlaneGeometry上时可以正常显示，但是贴在ShapeGeometry中却不可以正常显示。所以判断是贴图uv坐标问题。问题排查：PlaneGeometry默认顶点坐标和uv坐标对应关系如下，其中点1，2，3，4为geometry的

qq_37200686·2023-12-15 05:57

WEB 3D技术简述React Hook/Class 组件中使用three.js方式

npminitvite@latest输入一下项目名称然后技术选择react也不太清楚大家的基础那就选择最简单的js然后我们就创建完成了然后我们用编辑器打开创建好的项目目录然后在终端执行npminstallthree引入threeJS

跟耿瑞卷出一片天·2023-12-14 19:51

vue2 引用3D模型

一、首先安装对应的插件（前往查看model-viewer）#installpeerdependencyThreeJSnpminstallthree#installpackagenpminstall@google

Frontend-Arway·2023-12-06 18:45

Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程【一篇文章精通系列】

Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript实战课程【一篇文章精通系列】项目简介一、项目初始化1、添加一些依赖项二、创建3D【基础搭建】1、绘制板子，

程序员小杰#·2023-12-04 17:26

Threejs 汽车模型的展示和选配(vue3)

继续跟着b站@老陈打码一起学习threejsgltf文件下载https://pan.baidu.com/s/15PHhoj3qmNiDhiAu9S7b0A提取码:66661.搭建项目使用vue脚手架搭建项目

Web阿成·2023-12-04 16:37

ThreeJs样例 webgl_shadow_contact 分析

webgl_shadow_contact官方样例中，对阴影的渲染比较特殊，很值得借鉴，学习渲染阴影的思路；这个例子中对阴影的渲染，并没有使用任何光源，没有用shadowmap的常规方式渲染阴影；而是使用了深度材质THREE.MeshDepthMaterial；得到的阴影效果就是，离投影的正交相机的远景平面，越远影子就越模糊。大体思路看animate()方法，使用shadowCamera正交相机把整

从杰·2023-12-04 16:36

基于vue3.x与 three.js模拟地球内部结构

基于vue3.x与three.js模拟地球内部结构前言基于threejs、vue3.x、热力图实现了地球结构可视化展示。

易航动效·2023-12-04 09:18

【ThreeJs】如何给模型打上文字标签？

一、概述ThreeJs渲染中创建的网格模型，有时候我们需要给模型添加标签文字，方便识别不同的物体。

IT飞牛·2023-12-04 06:05

Blender动画导入Three.js

你是否在把Blender动画导入你的ThreeJS游戏（或项目）中工作时遇到问题？您的.glb(glTF)文件是否正在加载，但没有显示任何内容？你的骨骼没有正确克隆吗？

xiangzhihong8·2023-12-02 15:47

可视化有关JS官网链接

【threeJs】3d建模基于webGLthreejs官网：https://threejs.org/threejs中文教程：Three.js中文教程|参考手册|使用指南|动画特效实例|踏得网threejs

麦兜_冰夕·2023-12-01 23:56

threeJs引入模型使用3D模型(vite+React+Ts)

要在Three.js中使用3D模型，你需要加载模型文件并将其添加到场景中。Three.js支持多种不同的模型格式，比如OBJ、FBX、GLTF等。initvite@latest//创建一个vite的脚手架选择react并配置Ts安装three.js准备npminstall@react-three/dreinpminstall@react-three/dreinpmi@types/threenpmi

湖边看客·2023-12-01 03:06

VUE+Three.js引用外部模型

three-orbitcontrolsnpmi-sthreenpmithree-orbitcontrols2，在public下面创建static放置模型文件文件目录3，在页面引入threeimport*asTHREEfrom"three";//引入Threejsimport

IDIOT?LIFE·2023-11-30 16:54

VUE3+ThreeJs加载飞机模型且播放模型动画

介绍Three.js是一个3DJavaScript库，我们经常使用它加载各种不同格式的模型。示例中的直升机模型出处飞机航空器模型-3D模型库-CG模型网-第1页免费3d模型下载的网站免费3D模型https://ch.3dexport.com/free-3d-models?page=7飞机glbgltf模型网https://glbxz.com/plus/list.php?tid=69&myorder

Etc.End·2023-11-30 16:53

VUE3+ VITE 使用Three.js展示3D模型

学习主要文献:1.threejs文件包下载和目录简介|Three.js中文网3D模型这里有下载网站：Sketchfab-Thebest3Dviewerontheweb（邮箱注册后有免费的模型下载)3D模型编辑软件

Jayce_he·2023-11-30 16:48

mesh threejs 属性_ThreeJs 基础入门

本文来自网易云社区作者：唐钊Three.js是一款运行在浏览器中的3D引擎，你可以用它在web中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解webgl的世界。3D场景前置知识1.场景(Scene)：是物体、光源等元素的容器，可以配合chrome插件使用，抛出window.scene即可实时调整obj的信息和材质信息。2.相机(Camera)：场景中的相机，代

伍宁华山胸外科·2023-11-29 17:48

三维数据格式

先看一下threejs官网提供的三维模型加载器如见下图stlSTL是CAD软件中出来的一种3D模型文件格式，wiki已经解释的很清楚了。STL文件两种格式，ASCIISTL和BinarySTL。

老朱自强不息·2023-11-29 17:16

Threejs入门1-简介

three.js官方文档：threejs.org/three.js中文文档：techbrood.com/threejs/doc…Three.js整体认知（附：Three.js功能概览）一、threejs

空谷足音 -จุ·2023-11-29 17:42

Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）

前言Three.js(Javascript3Dlibrary)是基于原生WebGL封装运行的三维引擎，WebGL可以看成是浏览器给我们提供的接口，在JavaScript中可以直接用这些API进行3D图形的绘制；而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图

兴芳·2023-11-29 17:41

Html网页threejs显示obj,ply三维图像实例

程序示例精选Html网页threejs显示obj,ply三维图像实例如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！

荷塘月色2·2023-11-29 17:39

00.本地搭建 threejs 文档网站（网页版是外网比较慢）

three官网https://threejs.org/下载代码进入官网可以选择github去下载或者下载压缩包github下载https链接地址https://github.com/mrdoob/three.js.gitgitclonehttps

HHH 917·2023-11-29 01:04

threejs下监听mesh事件与监听3D对象的区别

技术架构reactthreejs@react-three/drei@react-three/fiber场景有这样一段代码，一个网格对象（mesh）中有一个平面（Plane），当我在网格上监听鼠标抬起事件时

zoujiawei6·2023-11-28 10:29

【前端】three.js

文章目录概述three.js-master目录结构Threejs的基本要素场景相机透视相机正交相机网格2d3d灯光AmbientLight(环境光)平行光（DirectionalLight）点光源（PointLight

软泡芙·2023-11-28 06:08

上传本地pcd文件，并用threejs渲染

项目背景：pcd文件很大，如果是本地的文件，上传到网络再下载下来，会造成网络流量的极大浪费。那么我直接加载本地的（当前计算机上的pcd文件）用来显示，会大大提高网络效率。上代码：import*asTHREEfrom'three';import{PCDLoader}from'three/examples/jsm/loaders/PCDLoader.js'//注意是examples/jsmexport

加油小吃货·2023-11-27 20:12

Threejs用官方提供的编辑器做一个简单的模型

Threejs有提供一个web端的编辑器制作3D模型，地址是https://threejs.org/editor/，这个打开就可以在线编辑，但是因为比较简陋，所以只能做一些简单的模型用于测试，实际开发中还是用

baker_zhuang·2023-11-27 17:45

threejs编辑器(3D场景编辑器)

好久没写博客了。今年似乎有点贪玩。买了吃灰四件套，滑板，吉他，运动相机，以及大疆无人机air2s。所以一直在玩。。。哎，虽然我一直想减肥，但奈何猪厂的伙食是真得太好了。因此就买了这些小玩意儿，希望自己多多走走动动。当然，初衷也不止于此。年初(2022)的时候，缘由某些事情，让我常常问自己，活着的意义是什么？如果人生只有生存，而没有生活，那真的是太无趣了。因此我也想抽出一点时间去感受一下，曾经丢失的

跃焱邵隼·2023-11-27 17:13

threejs + mapboxgl 实现炫酷动态立体墙效果

前言今天实现一个三维电子围栏效果；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个围栏效果，来展示一个区域的与众不同，或者；在预警方面常用到电子围栏来进行监控人员；本文也是借鉴maptalks中的立体墙的效果来实现的。之前在Cesium也实现过类似的效果，可以查看这个视频接下来我们实现一个动态立体墙的效果；围栏图层开发新建一个RippleWall图层，代码如下

jiegiser#·2023-11-26 07:04

WebGL/threeJS面试题扫描与总结

什么是WebGL？什么是Three.js？请解释three.js中的WebGL和Canvas的区别？WebGL(全写WebGraphicsLibrary)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借

xyphf_和派孔明·2023-11-25 22:17

Threejs_12 物体阴影的实现

所以在Threejs的画布世界之中，一个物体有自己的影子呢？

Web阿成·2023-11-24 08:53

Threejs_13 聚光灯和点光源的使用

聚光灯就如同手电筒一样，点光源就如同一个电灯泡甚至是萤火虫那样。如何使用他们呢？我们还是一样，先做一个小球和一个平面，用来展示光线。并且加入基本的环境光。//做一个球体constSphereGeometry=newTHREE.SphereGeometry(1,20,20);//材质constmaterial=newTHREE.MeshStandardMaterial();constsphere=n

Web阿成·2023-11-24 08:53

Threejs_11 补间动画的实现

其实就是我们在threejs中移动一个物体的时候，不让他是瞬时移动，让他跟css动画的transition一样，有个过度效果，就是补间动画。补间动画如何设置呢？

Web阿成·2023-11-24 08:23

Threejs_06 多材质的实现

Threejs同一个几何体如何实现多材质呢？

Web阿成·2023-11-24 01:03

Three.js教程：透视投影相机

其他系列工具：NSDT简石数字孪生Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像你生活中想获得一张照片，需要一台用来拍照的相机。

ygtu2018·2023-11-21 23:59

Threejs 源码解析（WebGLState.js）重要

解释有什么问题，说一下，不喜勿喷，转载请注明：七岁https://blog.csdn.net/qq_25909453/article/details/82704620/***@authormrdoob/http://mrdoob.com/*/import{NotEqualDepth,GreaterDepth,GreaterEqualDepth,EqualDepth,LessEqualDepth,L

那年我七岁·2023-11-21 10:36

Threejs之后处理EffectComposer

参考资料后处理(发光描边OutlinePass)…抗锯齿后处理知识点注：基于Three.jsv0.155.0后处理(发光描边OutlinePass)：EffectComposer、RenderPass、OutlinePassOutlinePass描边样式：visibleEdgeColoredgeThicknessedgeStrengthpulsePeriodBloom发光通道：UnrealBloo

开心就是最好·2023-11-19 18:56

Threejs之射线拾取模型

参考资料射线Ray…射线拾取Sprite控制场景知识点注：基于Three.jsv0.155.0射线RayRaycaster(射线拾取模型)屏幕坐标转标准设备坐标Raycaster(鼠标点击选中模型)Canvas尺寸变化(射线坐标计算)射线拾取层级模型(模型描边)射线拾取Sprite控制场景代码实现Three.js{"imports":{"three":"./js/three.module.js",

开心就是最好·2023-11-19 18:21

ThreeJS教程源码大全之如何将 3D Blender 对象作为 glTF 文件导入 Three.js 项目

项目运行效果如何将3DBlender对象作为glTF文件导入Three.js项目如何将3DBlender对象作为glTF文件导入Three.js项目实战需求如果您使用Three.js编写3D可视化，迟早您会想要超越使用库的基本原生形状，并开始使用包裹在UV贴图材质中的复杂自定义3D对象。Blender是一款出色的免费开源软件，用于创建精美的3D对象。由于Three.js放弃了对其Blender导出

iCloudEnd·2023-11-19 06:35

threejs、TWEEN、光晕效果的简单使用

依赖npmithree引包import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{OBJLoader}from'three/examples/jsm/loaders/OBJLoader.js'import{FBXLoader}from'three/e

且白·2023-11-17 11:54

Three.js的着色器材质(ShaderMaterial)

ShaderMaterial简介：http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterialThree.js

GIS技术杂谈·2023-11-16 12:24

着色器应用-以threejs为例

准备内置变量threejs中的变量含义uv纹理坐标值gl_Position裁剪坐标值position模型坐标系

迦南giser·2023-11-16 12:23

threejs 着色器修改内置材质

想要修改内置材质需要在编译shader程序之前执行修改操作,我们用到material下的onBeforeCompile创建材质我们先将shader打印出来看下都有哪些内容,可以看到顶点着色器有以下内容接着去threejs

榴莲不好吃·2023-11-16 12:22

threejs(13)-着色器设置点材质

着色器材质内置变量three.js着色器的内置变量，分别是gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变）gl_Position：控制顶点选完的位置gl_FragColor：片元的RGB颜色值gl_FragCoord：片元的坐标，同样是以像素为单位gl_PointCoord：在点渲

拾荒李·2023-11-16 12:49

threejs (四) 纹理 Texture

定义：纹理图片（或canvas/video等）映射到物体表面，或者作为反射、折射贴图，也就是物体的皮肤。1、纹理贴图分类map：颜色贴图，存储颜色信息bumpMap：凹凸贴图，性能贴图，也称为高度贴图，性能开销比较大，会移动表面纹理的可见区域，从而实现表面遮挡效果mormalMap：法线贴图，通过RGB三个分量分别表示向量的xyz三个方向，并且通过图片保留几何体表面的几何细节aoMap：环境贴图，

小程很努力·2023-11-16 09:06

ThreeJs中颜色渲染问题

ThreeJs中颜色渲染问题问题描述前言色彩空间ThreeJS色彩空间转换注意点在使用threejs构建模型场景时，经常感觉场景中模型的颜色与建模工具中看到的不太一样，而且不管怎么调灯光还是模型颜色效果还是不太理想

花海海·2023-11-15 18:02

cesium three性能比较_一步步带你实现web全景看房——three.js

下面我们从0开始来摸索一下3d世界1.基本概念在THREEjs中，渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。

weixin_39926639·2023-11-15 04:52

cesium版本之间如何兼容_【JS】cesium与three.js 结合的栗子，结合了一下网友们的栗子，解决了three.js 高版本模型出不来的问题...

”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”>Tools-12CesiumThreejsvarthree

赤衿·2023-11-15 04:52

推荐频道

threeJS