threejs(webgl) 第21页

Three.js - 光源（九）

创建基本场景import*asTHREEfrom'https://threejs.org/build/three.module.js'import{OrbitControls}from'https://

nie-ny·2023-10-31 09:16

Three.js相机对象.up属性

Threejs相机对象Camera的.up属性表示相机对象的上方向，如果你有一定图形学基础，你可以很好的理解，如果没有图形学基础也没关系，你可以在threejs代码中更改.up的属性值，查看threejs

汉武大帝··2023-10-31 09:46

Three.js平面接收不到阴影

首先确认渲染器有无开启阴影贴图，默认是false//创建渲染器varrenderer=newTHREE.WebGLRenderer()//设置渲染物体阴影renderer.shadowMap.enabled

hongsir_12·2023-10-31 09:14

Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换

Three之three.js（webgl）透视视角和正交视角，以及透视转正交的视角切换目录Three之three.js（webgl）透视视角和正交视角，以及透视转正交的视角切换一、简单介绍二、实现原理三

仙魁XAN·2023-10-31 09:44

Three.js相机控件OrbitControls

Three.js相机控件OrbitControls通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数

郭隆邦技术博客·2023-10-31 09:14

threejs修改camera的lookAt无效怎么办

前几天想移动camera实现漫游效果，结果发现camera总是朝着原点坐标方向，然后我修改lookAt为其他坐标letv=newTHREE.Vector3(100,0,100)camera.lookAt(v)结果camera的朝向还是（0,0,0）后来在网上找到原因，原来是我在页面上使用了controls控件，影响了照相机camera的使用，我在页面上使用了DragControls和Trackba

李奈 - Leemon·2023-10-31 09:42

使用Three.js实现3D楼盘展示，创建天空之盒实现真实的环境氛围，在Three.js中添加树，花等植物。仿学校3D楼盘模型，结合物联网实现安全监测

Three.js是一个能让WebGL在浏览器运行且有3D效果的JS库,也可以说是一个3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象webgl是一项用来在网页上绘制和渲染复杂三维图形

小罡同学·2023-10-31 09:11

3D网页游戏外包开发引擎

1.Three.js：Three.js是最流行的开源3D引擎，基于WebGL，用于创建高质量的3D图形和互动内容。特点：支持3D模型加载、纹理贴图、光照、相机控制、物理模拟等功能，有庞大

defdsdddev·2023-10-31 09:11

unity2020 webgl 加载配置文件 ScriptableObject 和StreamingAssets

一、使用ScriptableObject：（优点：unity自带无需配置，缺点：打包后无法在进行修改）建议项目初期，配置项目数据相关的数值参数。便于新项目或策划修改。1.创建配置文件相关的类型usingSystem;usingSystem.Collections.Generic;usingUnityEngine;publicclassStudent:ScriptableObject{publicL

顽皮的小猴子·2023-10-31 04:02

v3+three.js触碰物体加载模型边缘高亮

官方文档示例https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.htmlimport

少年包青菜·2023-10-30 20:11

微信小程序加载3D模型

技术栈：Three.js插件：ThreeX要求：模型格式GLB需要挂载在服务器或者是个链接都可以文件目录：jsm是本地依赖包代码：wxmljs//webgl_nodes/webgl_nodes_loader_gltf_sheen.jsimport

⁡⁢⁡⁢⁠Ac·2023-10-30 14:27

cesium 文本标注被遮挡_Cesium中Primitive讲解

前面介绍了entity方式绘制对象，现在我们开始接触primitive方式，primitive方式更接近渲染引擎底层，由于我对webgl知之甚少，因此primitive接口我现在也是一知半解，写这个博客我参考了这一篇博客

weixin_39718460·2023-10-29 22:53

cesium 学习笔记

Cesium简介Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。

想你的风吹到了瑞士·2023-10-29 22:52

WebGL 世界坐标系和本地坐标系

目录前言编辑本地坐标系世界坐标系变换与坐标系前言在WebGL从0到1绘制一个立方体_山楂树の的博客-CSDN博客中，我们创建并显示了第一个三维物体（一个立方体），示例程序开始变得像一个“真正”的三维程序了

山楂树の·2023-10-29 19:37

百度离线地图WebGl(type=webgl&v=1.0)

type=webgl&v=1.0&ak=密钥打开之后会看到如下js代码：(function(){window.BMapGL_loadScriptTime=(newDate).getTime();document.wri

喜欢喝酸奶的叱利霞月·2023-10-29 07:20

添加3d动画到threejs并显示在mapbox上

说实在的不知道为啥threejs的内容出到了第3期。写出来防止大家踩坑。threejs可以添加我们所需要的3d动画，因为单纯的靠threejs本身的对象并不能真正满足我们的动画需求。

gardenlike2·2023-10-29 07:26

threejs自定义引入模型进行点击获取

最近编辑点击事件时发现：threejs的raycaster只对mesh有感应，而引入模型类型是group，那么要对引入模型进行获取就要把raycaster.intersectObjects（children

BUG小熊手·2023-10-28 16:06

threejs的转场动画 (基于Tween实现)、平滑切换场景

一、先看看效果二、实现方法：实现思路：先获取当前相机所在位置，在使用tween.js动画将相机位置平滑切换到目标位置点//当前相机所在点位置p1={x:camera.position.x,y:camera.position.y,z

慢步者_rambler·2023-10-28 16:05

threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

一、思路绑定点击事件，通过THREE.Raycaster光线投射，用于确定鼠标点击位置上有哪些物体，raycaster.intersectObjects(scene.children)返回点击位置上所有的物体的数组；我们用varselected=intersects[0]取第一个，也就是最前面的那个物体；在通过selected.point取点坐标二、代码addClick();functionadd

慢步者_rambler·2023-10-28 16:35

threejs 将屏幕坐标转换成3d中的坐标。

将当前屏幕上的坐标转换成3d中的坐标pos是当前canvas屏幕上的坐标，targetZ是物体距离原点的距离privateget3DPosByCanvasPos(pos:THREE.Vector2,targetZ:number){letvec=newTHREE.Vector3();//createonceandreuselettarget=newTHREE.Vector3();//createon

IkeShy_Zz·2023-10-28 16:04

【THREEJS】如何使用THREEJS展示车辆效果

模型导出找到一个合适的车辆模型，导入模型。当前模型是没有任何材质的。全局光照这里使用了HDR+方向光来进行灯光展示后期使用SSR进行反射使用Bloom增加整体氛围感材质不同类型物体应该对应不同物体材质。这里全部使用的是物理材质进行渲染使用PBR材质增加细节。

菜鸡饶·2023-10-28 16:03

threejs点击事件

实际原理为获取相机和鼠标点击时的位置，发出一条射线实现的需要用到的变量除camera外：//获取鼠标坐标varmouse=newTHREE.Vector2();varraycaster=newTHREE.Raycaster();初始化中实现对点击事件的监听://点击模型window.addEventListener('click',onmodelclick);使用的函数：//获取在射线上的接触点f

117sir·2023-10-28 16:03

Threejs + shader 实现的一些酷炫的效果

效果预览DEMO地址GIT地址不定期的在shadertoy上抄一些特效到实现在threejs中觉得可以的话请给一个小星星或者一个赞QQ群:1082834010

菜鸡饶·2023-10-28 16:32

使用blender烘培导入Three.js中

导入模型到blender中给场景打光展uv给需要烘培的物体展uv创建烘培纹理选择物体烘培使用展开uv并且使用烘培纹理导入threejs场景中天空用的自带的dynamicsky展uv用的uv-packer

菜鸡饶·2023-10-28 16:32

基于threejs开发的3D地球大屏可视化，支持2D地图模式，飞线，涟漪，配置简单易上手

摘要基于threejs封装的3D可视化地球组件，开箱即用主要实现功能根据geojson格式的json文件，渲染平面2D和3D地图,地图可配置区域色，边界色支持以贴图的方式实现用户设计的个性化地图图片的3D

qq81650984·2023-10-28 16:02

threejs实现一个固定大小的3d标点

需求背景需要在3d模型上实现标注的功能，一开始是直接通过添加一个普通的mesh来实现的，但是这样就会有一个问题-当视图缩放的时候，标注也会跟着一起放大缩小，影响视觉效果，因此需要实现一个不会随着视图一起放大或者缩小的mesh实现思路明确方向根据需求，可以知道我们其实需要实现的就是更改模型渲染的默认方式，而模型的渲染是由模型的MVP三个矩阵来决定的再进一步分析MVP三个矩阵，Model矩阵决定模型的

Polaris_tl·2023-10-28 16:29

基于Threejs开发的3D点位编辑器

简介编辑器可以让用户在3D场景中添加、编辑和删除点位，并且支持上传参考模型、多点位类型的添加、上传、编辑、下载和删除、场景视图中点位的拖拽、场景配置等功能。注：所有操作均在本地。技术栈three.js：一个用于创建3D图形的JavaScript库。Vue.js：一个流行的JavaScript框架，用于构建用户界面。功能点添加、编辑和删除点位。上传参考模型。多点位类型的添加、上传、编辑、下载和删除。

菜鸡饶·2023-10-28 16:28

threejs(8)-详解光线投射与物体交互

详解光线投射与物体交互import*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";//导入dat.guiimport*asdatfrom"dat.gui";//目标：raycasterconstg

拾荒李·2023-10-28 15:33

threejs(7)-精通粒子特效

一、初识Points与点材质//设置点材质constpointsMaterial=newTHREE.PointsMaterial();import*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";/

拾荒李·2023-10-28 15:23

JS组件

jquery.ripples介绍jquery.ripples一个简单的基于WebGL的涟漪效应。背景图像通常很无聊。使用此效果可以使您的静态CSS背景图像更具交互性！

九瀺·2023-10-28 11:00

webGL编程指南第五章 MultiAttributeSize

git本章节中我我们学习使用buffer传递数据Documentletcanvas=document.getElementById('canvas');letgl=canvas.getContext('webgl

sogooday·2023-10-28 08:29

不谈opengl---CGAL安装

说起图形库，但凡是对图形行业有点了解的人都知道opengl，再专业一点的可能还知道webgl，directX这些图形库，原神如此华丽的场景，王者荣耀如此酷炫的皮肤都要靠这些图形库来渲染。

異轩·2023-10-28 04:52

Javascript高性能WebGL图表--LightningChart JS

GPU加速和WebGL渲染可确保有效利用设备的图形处理器，从而实现高刷新率和流畅的动画效果。

Tech_Observer·2023-10-28 02:47

0. threejs源码阅读——结构概述

从Git上Clone好项目后，目录结构如下：threejs源码目录结构src-我们主要看的部分，包含了所有源码。editor-如果有自己做webglwebIDE的计划，可以参考一下。

吃货传说·2023-10-27 22:13

WebGL - 概述和 canvas 基础示例

1、webgl概述1、概述博客webgl示例大部分基于《webgl编程指南》一书而来，所以你也可以直接去看这本书，如果书中有些代码运行失败的话，再来看这个博客的webgl系列，或许对你有些帮助是一项用来在网页上绘制和渲染辅助三维图形

「已注销」·2023-10-27 12:56

七、threejs学习笔记-PBR材质与纹理贴图

友情链接：threejs中文文档目录1.PBR材质简介光照模型网格模型材质整体回顾2.PBR材质金属度和粗糙度金属度metalness粗糙度roughness3.环境贴图.enMap环境贴图反射率.envMapIntensity

焦焦焦焦焦·2023-10-27 09:54

sdf 渲染文字在three.js中

sdf渲染文字在three.js中最终效果:上面是SDF文字贴图,下面是在webgl中渲染。实现使用tiny-sdf制作sdf文字贴图。

DSLMing·2023-10-27 09:50

three.js 错误记录: GL_INVALID_OPERATION

错误信息：[.WebGL-0x7feb0c1a0600]GLERROR:GL_INVALID_OPERATION:glDrawArrays:attempttoaccessoutofrangeverticesinattribute0

DSLMing·2023-10-27 09:49

WebGL Babylon 利用pbr材质(金属材料)

BabylonPBR金属材料合理利用pbr材质结合环境纹理,可以大幅度提升模型质感和反射效果调整pbr材质的金属和粗糙程度可以模拟出不通材质注意：pbr材质会降低渲染性能，根据材质需求添加pbrnewBABYLON.PBRMaterial(‘Name’,Scene)//创建pbrpbr.albedoColor//反射颜色pbr.metallic//金属pbr.roughness//粗糙针对性能提升

Alxxhxx·2023-10-27 09:17

webgl速记之如何根据用户硬件进行性能模式OR质量模式的切换的设计思路

然后性能就会相对下降那么要处理这种事情，该怎么办，想了想，干脆就根据硬件级别来切换shader效果varcanvas=document.createElement('canvas');vargl=canvas.getContext('webgl

DBBH·2023-10-27 04:26

WebGL笔记：矩阵的变换之平移的实现

解释webgl要绘图的话，它是先定顶点的，就比如说我要画个三角形，那它会先把这三角形的三个顶点定出来。

Wang's Blog·2023-10-27 04:45

层级结构化的3D场景运动变换（three.js webgl_hierarchy2例子)

Three.js中的webgl_hierarch2例子展示了如何进行3D场景的层级结构化矩阵变换。

绿风烟·2023-10-27 00:15

SuperMap iClient3D for WebGL扩展开发教程——圆形旋转广告牌

圆形旋转广告牌.gif在这个效果图中，还有另外一个比较有意思的效果，圆形的旋转广告牌，这一级来实现该效果。1、效果分析在该效果中，可以将效果进行拆分，主要有一下两个难点：（1）侧面贴图，基于之前的经验可以选择wall对象进行实现。（2）旋转效果，该效果可以有两个想法，一个是通过设置对象的orientation进行实现，类似前面实现的雷达扫描效果，另外一个想法就是通过改变wall的节点顺序，基于这两

Mr桔子先生·2023-10-26 22:01

threejs(5)-详解灯光与阴影

一、Gsap动画库基本使用与原理npm地址：https://snyk.io/advisor/npm-package/gsapimport*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";//cons

拾荒李·2023-10-26 22:33

threejs(6)-操控物体实现家居编辑器

//导入threejsimport*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js

拾荒李·2023-10-26 21:48

【three.js 第一课】创建场景，显示几何体

1.three.js中文手册网址：https://www.techbrood.com/threejs/docs/注意事项：代码中出现的newTHREE中的THREE必须为大写。

小张帅三代·2023-10-26 20:06

threejs学习网址记录

636109562&utm_campaign=ThingJS&utm_medium=SEM&utm_source=baidusem&utm_content=City2&utm_term=UPto_2111263115、threeJS

weixin_44356698·2023-10-26 19:40

前端3D规划

学习WebGL：WebGL是一种在浏览器中实现3D图形的技术，它是OpenGL的Web版本，可以直接在浏览器中使用。学习WebGL可以帮助你理解3D图形的底层实现。

ZHWenDong·2023-10-26 07:37

JavaScript WebGL 帧缓冲区对象

引子在看HowIbuiltawindmapwithWebGL的时候，里面用到了framebuffer，就去查了下资料单独尝试了一下。

_XXHolic_·2023-10-26 05:29

10 WebGL的缓冲区对象使用

WebGL提供了一种很方便的机制，就是缓冲区对象，它可以一次性向着色器传入多个顶点的数据。

暮志未晚Webgl·2023-10-26 05:23

推荐频道

threejs(webgl)