threejs
threejs基础
## 一、学习收获 **1、OpenGL、WebGL、Canvas、Three.js四者关系** **2、Three.js 三大要素** **3、Three.js基本要素** **4、Three.js 相关插件的使用** **5、使用Three.js展示3D几何体效果** ## 二、主要内容： ## ......
本地搭建Threejs
[TOC] 因为Three.js官网是国外的服务器，所以为了方便学习和快速的查阅文档，我们可以自己搭建Three.js官网和文档，方便随时查看案例和文档内容进行学习。 #### 1、首先进入threejs库GitHub地址： https://github.com/mrdoob/three.js ......
我不知道的threejs(4)-材质
通透性_厚度_衰减 物理MeshPhysicalMaterial材质下： 参数： { transparent：true, transmission:1, // 透光率 0-1【1表示透光最强，0表示完全不透光】但是如果设置完全透光时， 物体有可能还是不会透明， 这是因为没有设置粗糙度roughnes ......
我不知道的threejs(3)
法向量（normal）【存在辅助器helpers VertexNormalsHelper.js】： 概念上来说就是垂直于某个平面的所有支线的一个向量。 功能上来表述，法向量用于光线反射， 比如有一束光照到平面上，存在法向量就可以计算出反射光的射出方向。 geometry.computedVertex ......
Three.js教程：threejs语法总结
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 threejs语法总结 本节课从JavaScript面向对象语法的角度，给大家总结下threejs API的使用习惯，这样方便大家更好的使用threejs API。 Three.js语法总结：类(构造函数) Three ......
firefox threejs 显示异常排查处理
# firefox版本: 114.0.2 # threejs: 0.135.0 # 异常描述 火狐浏览器下 threejs 3D页面展示的 CSS3DSprite 中的 有border border-radius 的div边框显示异常 显示情况如下 ： // 绑定鼠标事件，当用户移动视角后触发() function bindRayShotEvent() ......
使用THREEJS实现一个可调节档位、可摇头的电风扇
夏天到了，用Three.js实现一个可以摇头和调节档位的电风扇。主要使用到Blender处理3D模型，用Vite+Typescript搭建项目框架。 ......
threejs绘制多边形几何体
threejs绘制多边形 // 创建一个立方体几何体 var cubeGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5 ); // 创建一个多边形几何体 var polygonGeometry ......
threejs绘制平面多边形
在Three.js中，可以使用geometry对象和geometryMaterial对象来创建和渲染多边形几何体。下面是一个绘制多边形平面的示例代码： // 创建一个立方体几何体 var cubeGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5, 0.5 ......
webgl 渲染带透明通道的视频（threeJS）
首先，你需要一个这样的视频 或者一个这样的视频 webgl渲染可以用three.js，上下叠加的代码如下： import * as THREE from 'three'; let videoWidth = 540; //视频实际的宽度 let videoHeight = 540;//原视频实际的高度 ......
threejs绘制球体
threejs绘制球体 在Three.js中，可以使用geometry对象和geometryMaterial对象来创建和渲染球体几何体。下面是一个绘制球体的示例代码： // 创建一个立方体几何体 var cubeGeometry = new THREE.BoxGeometry( 0.5, 0.5, ......
threejs创建圆柱体
threejs创建圆柱体 创建一个几何体（geometry）：使用Three.js的几何体类创建一个几何体，该类将定义您的几何体的形状和大小。例如，您可以使用以下代码创建一个圆柱体： var geometry = new THREE.CylinderGeometry(5, 32, 32); 这将创建 ......
threejs webgl性能优化
threejs webgl性能优化 WEBGL性能优化的方法有很多，以下是一些常见的方法： 减少渲染次数：在WEBGL中，渲染次数越少，性能越好。因此，您可以通过减少渲染次数来提高性能。例如，使用批处理技术将多个对象合并为一个批处理对象进行渲染。 降低纹理分辨率：纹理分辨率越高，渲染的时间就越长。因 ......
threejs相机动画
threejs相机动画 import * as dat from "dat.gui"; import { GUI } from "../../utils/lil-gui.module.min.js"; import TWEEN from "@tweenjs/tween.js"; const gui ......
# vue 使用 threejs 实现实景看房效果 demo
vue 使用 threejs 实现实景看房效果 demo 关于这个 threejs 实现 VR 看房效果也超级简单，只需要提供一个思路的话就可以了其实，首先需要一个房间结构的贴图，这个贴图网上有，当然找个合适的也不好找，我找了一上午在别人的 demo 里面扣了一张出来，代码都是一样的，稍微说一下思路 ......
threejs_动态heatmap渲染
heatmap > heatmap2d.ts import { Mesh, Texture, MeshBasicMaterial, PlaneGeometry, Box3, Vector3, } from 'three'; import Base from '../Base'; import Hea ......
# threejs 加载第三方模型
threejs 加载第三方模型 接专栏的上一篇博文，这是加载第三方模型相关的。这篇博文拖了很久了哈，简单说一下吧，本来不想写了的，觉得相对来说比较简单，但是还是稍微一扯。为啥要加载第三方呢，上一篇我们绘制的小立方体很简单啊，但是有一些模型可能比较复杂，比如一辆小汽车，一个大楼，我们用代码一行一行的写 ......
threejs_交互_鼠标点击_添加物体_删除物体
click点击添加物体,shirft+click点击删除物体 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>three.js webgl - interactive - voxel painter</tit ......
threejs 拖拽 画矩形
import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; export function initThree() { THREE.Object3 ......
threejs中渲染html
背景 最近中看threejs的时候发现一个好玩的事情，可以在threejs中渲染普通的html。threejs本身可以做各种炫酷的界面，但是与用户交互的时候写起来没有用dom实现方便，但是如果可以将已有的dom渲染到threejs中，那么就可以实现非常炫酷的界面，也能提高用户的体验。 依赖介绍 这里 ......
threejs-材质（textures）
what is textures? UV: UV coordinate 决定了 材质在mesh上贴 、铺的方式和位置 // add texture // //第一种方式 // const image = new Image(); // const texture = new THREE.Textur ......
使用dat.gui 控制threejs(一）
1 import * as THREE from 'three' 2 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' 3 import gsap from 'gsap' 4 import * a ......
我不知道的threejs(2)
geometry(ies) 几何体: BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Intege ......