前言学习教程：老陈 threejs课程官方网站是在国外，在本地搭建threejs是为了更方便的查看官方文档、例子。 官方网站：threejs搭建下载开发环境的压缩包文件，github 有时候打不开，这里用国内的：https://gitcode.net/mirrors/mrdoob/three.js 下载完成后解压，用vscode打开//安装依赖
npm install
//启动
npm run s
转载
2024-07-08 07:37:05
146阅读
本文将介绍如何使用ThreeJS导入obj和带贴图mtl的外部obj模型；使用AmbientLight为场景所有物体添加基础光源；使用SpotLight为场景添加聚光灯效果，并为obj添加阴影效果；使用SpotLightHelper，为聚光灯添加光源调试辅助线；使用GUI，添加一些简单的属性操作obj模型；本文代码结构将在之前的文章 VUE整合ThreeJS并创建一个带动画的简单场景&n
转载
2024-09-24 15:00:34
75阅读
懒得写了，大概记录下步骤。 1. 使用开源软件Blender制作3D模型1.1 BlenderBlender类似于3DMax、Maya，是制作3D模型的工具软件，是开源软件，但较难使用，无法制作精确尺寸模型，学习资料匮乏，仅有B站有少量教学视频。1.2 制作模型Three.js只能控制 模型中的 不同 物体，不能控制模型中的 物体 的部分。如果要做个小轿车行驶的动画，如果轮子无需做转动效
1.shader基本使用 2.shader粒子shader是什么？shader是一个用GLSL编写的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器，在WEBGL编程一书中 25-26页有详细说明shader在Three.js中如何使用？threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial 两种编写shade
转载
2024-07-24 11:20:31
242阅读
文章目录前言关键点源码总结 前言基于react-hooks创建的三维地图，只实现了基本的交互展示，可根据个人喜好增加各种交互和展示效果，效果如下。关键点使用threejs创建3d地图注意的组要是以下几点。GeoJson数据规范，尤其是面状Feature的数据结构特点，可参考官网：https://geojson.org/。地图生成和交互主要是使用THREE.ExtrudeBufferGeometry
转载
2024-05-27 13:54:35
903阅读
环境：threejs：129 （在浏览器的控制台下输入： window.__THREE__即可查看版本）vscodewindowedge关于threejs： 开源web3d引擎github：https://github.com/mrdoob/three.js/ 官网：https://threejs.org/ 中文教程：http://www.yanhuangxueyuan.com/WebGL/1.
转载
2024-05-28 17:51:28
200阅读
threejs 简单的demo 因为CSS3 写3D 会存在各种兼容性问题 用pixijs又没可视化界面 所以用threejs写3D 最稳妥 <!DOCTYPE html> <html> <head> <title></title> <style> canvas { width: 100%; hei
转载
2020-10-25 12:35:00
388阅读
2评论
作者：个推web前端开发工程师 梁神 一、背景粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js
转载
2023-12-25 08:20:27
192阅读
前言之前的
threejs入门视频教学已经学习完了，下面会陆续学习官方
demo。官方网址太卡了建议在本地进行搭建，具体见：
threejs视频教程学习（1）：本地搭建
threeJS官网、渲染第一个场景官方的例子都是html格式，后续以vue3的格式进行学习。webgl_animation_keyframes代码<template>
<div id="keyframes">
转载
2024-04-05 21:29:59
249阅读
demo来源（如果觉得有用请点赞，如果收藏更好了 谢谢各位）本期为github拉取Three.js源代码中的对引入glb格式的模型demo分析clone地址：git@github.com:mrdoob/three.js.gitdemo目录：examples\webgl_animation_keyframes源代码如下 （下方我会对源代码进行逐条分析）<!DOCTYPE html>
&l
转载
2024-05-28 22:50:32
143阅读
一、初识three.js平时喜欢在各博客看些文章，偶然情况下看到了关于webgl制作的一些相当有趣网站于是便去webgl的官网上了解知识，期间发现three.js这个封装webgl api的库，官网的例子感觉很牛，于是去b站等看了些three.js写的炫酷特效，自己也尝试不看视频的情况下写了一个3D全景图demo，截了demo的上下左右前后的效果图，在页面底部。于是记录下期间收获的一些知识和技巧，
转载
2023-10-27 08:17:39
161阅读
一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能。模型准备模型制作模型可以通过网上下载，也可以自己通过c4d、maya、blender等模型制作软件得到。这里就不叙述有关模型制作的问题，本文中会在blender进行模型的有关设置。模型导出1、导出前设定为了在页面中方便后续的操作，在导出模型前，将模型的各个部件拆分好进行命名约定（本文以小车模型为例）具体如下图所示：图12、导出
转载
2024-04-28 11:48:51
457阅读
Three.js 应用程序以每秒 60 帧 (FPS) 的速度执行 3D 渲染是流畅和愉快体验的保证。 然而，这是一个有时难以实现的目标！本文整理了优化 Three.js 应用程序和达到 60 FPS 的最佳提示和技巧！推荐：使用 NSDT场景编辑器 快速搭建 3D场景。1、监测性能在开始优化Three.js应用之前，我们必须能够衡量应用程序的性能。 我建议你使用 Three.js的 stat模块
转载
2024-04-22 10:21:01
108阅读
题外话：关于黑色和白色在计算机中的颜色占比 黑色RBG=（0,0,0）、白色RBG=（1,1,1） 在现实生活中黑色吸收所有光，即所有光都不反射，因为本身的其RGB的颜色组成都是0； 白色反射所有光，即所有光都反射，因为本身的其RGB的颜色组成都是1。进入正题原理： 辉光的实现可以拆分成两部分： 1、原来比较亮的地方更亮 2、原来亮的地方附近也变亮 用纯数学的方式去表达就是： 1、更亮即 lumi
转载
2024-05-05 13:10:41
303阅读
虚拟仿真变电站建模物联网系统，商迪3D是通过3D建模技术手段以及物联网大数据技术、先进的传感和测量等技术采集变电站的精细点云数据，构建变电站的虚拟仿真三维模型，检测变电站的情况是否有缺漏和破损，同时方便对变电站进行数字化管理，实现智慧变电站电力使用情况以及资产的优化高效运行。 3D变电站vr建模三维展示可视化管理系统智慧变电站改变了传统变电站的巡查管理方式传统的变电站管理巡查管理方式主要采用人工巡
three.js vr Twitter是一个很棒的信息丰富的野兽。 我想将某些可视化功能，Three.js及其VR功能与Socket.IO和Node结合使用，以创建一个通过Twitter流生成的粒子的漂亮世界。 之前，我已经在SitePoint文章中讨论了开发虚拟现实Web体验的所有基础知识， 并使用Google Cardboard和Three.js将VR引入网络 ，因此，如果您不熟悉整个想法，
转载
2024-08-22 15:15:39
194阅读
01 echarts介绍echarts是基于JavaScript的图表插件，由百度开发，后来捐赠给apache基金会开源。 echarts网站地址： https://echarts.apache.org/examples/zh/index.html 常用的图表都可以找到 进入网站首页查找需要哪个图表直接点击就可以获取js代码 代码编辑（可以修改属性实现自己想要的效果） 完整代码（如果需要引用需要把
转载
2024-08-12 20:08:20
411阅读
现代浏览器直接通过JavaScript就可以实现非常强大的功能。使用HTML5的标签可以很容易地添加语音和视频，而且在HTML5提供的画布上可以添加具有交互功能的组件。现在，现代浏览器也开始支持WebGL。通过WebGL可以直接使用显卡资源来创建高性能的二维和三维图形，但是直接使用WebGL编程来从JavaScript创建三维动画场景十分复杂而且还容易出问题。使用Three.js库可以简化这个过程
转载
2024-08-13 08:59:54
316阅读
three.js场景渲染模型，基于项目来说大多数模型都是建模师提供的，three.js建模api有限，无法制作出过于精美和写实的模型，而且代码量过大效率低。 1.three.js建立模型 内置ipa包括很多形状。更多几何体api可以参考官方文档（http://www.yanhuangxueyuan.com/Three.js/） // 立方体模型
var
转载
2024-04-13 12:52:13
94阅读
早在几年前动态可交互的图表已经流行，在各公司前台、大厅都展示着漂亮的可视化大屏，本文简单介绍一个简单好用的动态可交互图表工具-pyecharts，并使用pyecharts制作一个简单的图表大屏，先附上部分动图效果：gif动图附上pyecharts官网链接：Document由于官网基本demo图较多、并包
