首页 > TAG信息列表 > threejs

基于webgl(threejs)的路面编辑

楔子 在很多应用中,特别是一些园区类的应用。 都需要对园区的地面 环境进行展示,路面就是地面的一部分。 通常的做法是,都是建模的时候把相关的元素都建好,然后导入到展示系统中进行展示。 不过有些情况下,可能建模并不太方便,所以三维编辑器可以直接进行简单的路面编辑显得挺有必要。

reactjs中使用threejs从0到1

搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src/ 文件夹下的所有文件。(不要删除整个 src 文件夹,删除里面的源文件。) 安装路由依赖包和threejs依赖包 # tips: 注意版本兼容问题

threejs两个向量旋转

threejs向量旋转 threejs一个向量绕另一个向量旋转 threejs向量变换   var v3 = new THREE.Vector3(0,1,1); var v1 = new THREE.Vector3(1,0,0); var v2 = new THREE.Vector3(1,1,0); var v4 = new THREE.Vector3(0,0,1); var angle1 = v1.angleTo(v2); // var angle2 = v2.an

threeJS基础学习---创建一个场景(Creating a scene)

开始之前 在开始使用three.js之前,你需要一个地方来显示它。将下列HTML代码保存为你电脑上的一个HTML文件,同时将three.js复制到该HTML文件所在的目录下的lib/目录下,然后在你的浏览器中打开这个HTML文件。在js目录下创建creatingaScene.js <!DOCTYPE html> <html lang="en"> <head>

threejs-灯光

光源类型: THREE.AmbientLight 基础光源   基本上使用这个光源的时候需要搭配其他的光源一块,目的是弱化阴影或者给场景添加一些额外的颜色 THREE.PointLight 电光源 没有阴影 从特定的一点向所有方向发射光线 THREE.SpotLight 聚光灯 有阴影 从特定的一点以锥形发射光线 THREE.Di

Threejs基本功能——实现自动旋转阴影的立方体

写在前面: 初次接触Three.js,个人认为需要的几个网站地址如下。如果官网打不开,教大家一个办法(借助站长之家的一个工具:打开https://ping.chinaz.com/github.com ,输入你需要的地址,可以测速,然后在自己电脑的host中把你需要打开的地址配置上对应的ip即可)。 1、查看官网教程 2、下载

ThreeJs渲染3d,FairyGUI渲染UI

1.从github地址https://github.com/gameatp/FairyGUI-threejs下载库文件 2.index.html里引入fairyguijs库 3.初始化fairygui加载ui资源并渲染到3d窗口上 4.最终效果如下:

threejs易忘点1

在空间中显示一个基础的300*200*100的几何体,使用正投影相机,远处限制使得一个角被切除。 以下截自“郭隆邦技术博客” 正投影参数: 透视投影参数:  

屏幕坐标转换成threejs的坐标

使用场景:当我们点击屏幕时获取的坐标和three的坐标不一样时,这时候就需要转换。 const convertCoodsToThree = (mouseX, mouseY, mouseZ = 0) => { const x = (mouseX / window.innerWidth) * 2 - 1; const y = -(mouseY / window.innerHeight) * 2 + 1; var vec

threejs vector3叉积

threejs  vector3叉积 var vOA4 = new THREE.Vector3(1.0, 0.0, 0.0); var vOB4 = new THREE.Vector3(0.0, 0.0, 1.0); var vOC4_2 = vOB4.cross(vOA4); console.log(vOC4_2);   输出: Object { x: 0, y: 1, z: 0 }     #########################

threejs绘制中文方案

1.使用threejs创建文字几何体 需要找个 ttf 中文字体在 http://gero3.github.io/facetype.js/ 上转换为TypeFace格式的json文件。 import {FontLoader} from "../librarys/jsm/loaders/FontLoader.js"; import {TextGeometry} from '../librarys/jsm/geometries/TextGeometry

ThreeJs编辑器(Lod减面)

1、点击转换 Lod自动减面,系统一共预设了3个等级分别按照原总面数 * 0.7, 0.5,0.3的比例来进行减面。点击生成即可生成对应等级的.model文件,比例精度可以修改,拖动滑块调整。 点击生成后会出现一个: 原模型名_Lod1.model的新模型 2、打开低等级模型 打开低等级模型后发现总面数已

threejs 贴图动画总结

引言 在三维可视化中,会涉及到很多动画,其中贴图动画是其中很重要的一种,本文介绍几种贴图动画的思路,供大家一起探讨。 流动动画 流动动画通过设置贴图的repeat属性,并不断改变贴图对象的offset让贴图产生流动效果。 这种动画不难实现,首先加载贴图,如下所示: let img = new Image(); img

vue3 + threejs 实现仿iView官网大波浪特效

一、效果图 先上最终效果图: 具体效果可参考iview官方界面iView - 一套高质量的UI组件库 大波浪效果,使用的是three.js的官方例子,需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org) 二、代码 1.安装threejs npm install --save three 2.代码(复制可

threejs绘制多边形2

threejs绘制多边形 function test2(){ // 三维坐标返回顶点索引 可以参照上面的五边形 返回结果是一样的 //var trianglesIndex3 = earcut([ //三维顶点数据 var arr = [7.0,-130.0,700.0, 7.0,130.0,700.0, 150.0,130.0,

ThreeJS 加载 obj/3ds/fbx/gltf/等等

1. 下载ThreeJS https://github.com/mrdoob/three.js/archive/master.ziphttps://github.com/mrdoob/three.js/archive/master.zip2. 查看Example         示例真的是十分的详尽,特别的良心.         webgl_loader_3ds.html 加载3ds         webgl_loade

js 求圆周每个点坐标解决 threejs 获取2D圆上的每个点

JS Math.sin() 与 Math.cos() 用法 Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间; Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数; 这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2PI/360角度; 30° 角度 的弧度 = 2PI/36030 如何得

Threejs绘制多边形

Threejs绘制多边形,使用THREE.Shape() function createPolygon(){ var group = new THREE.Group(); var rectLength = 120, rectWidth = 40; var rectShape = new THREE.Shape(); rectShape.moveTo( 10, 10 ,0); rectShape.lineTo( 10, 20,0 ); rectSha

threejs绘图

threejs绘图 function test17(){ var group = new THREE.Group(); var list1 = [[[58.0,-18.0,3452.0],[59.0,-18.0,3446.0],[59.0,18.0,3446.0],[58.0,17.0,3452.0]],[[58.0,17.0,3452.0],[59.0,18.0,3446.0],[60.0,18.0,3440.0],[62.0,18.0,3435.0],[65.0,18.0,3431.

threejs场景中的场景

这两天导入adb模型,发现导入模型时直接导入模型中的对象有点问题,左键拖动,旋转的方向只能是左右翻转,而当把整个场景都加载进来时则可以正常旋转。 loadCollada(that) { // 加载Collada模型 const loader = new ColladaLoader() // public\models\dae\hysopendoor.d

Threejs封装电流效果

利用Threejs封装电流效果, 在initObject方法中添加一个路径就可以 //样条线,根据规划的路径显示电流 云 const curve_catmullRom3 = new THREE.CatmullRomCurve3( [ new THREE.Vector3( 500, 500, 0 ), new THREE.Vector3(900, 600, 0 ),

threeJS加载obj模型以及其纹理mtl

// 模型引入obj模型引入 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; // 模型引入obj模型的纹理引入 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'; function initOBJ() {//OBJ模型加载 var mtlLoader = new MTLLoader(

threejs-控件的监听事件

以MapControl控件为例: import { OrbitControls, MapControls } from 'three/examples/jsm/controls/OrbitControls' this.controls = new MapControls(this.camera, this.renderer.domElement) this.controls.enableDamping = true // 开启动态阻尼,需要在动画更新函数render

iframe中嵌套threejs使用TrackballControls时touch事件报错

iframe中嵌套threejs使用TrackballControls时touch事件报错 作者:咕魂 时间:2021年8月3日 项目背景:在使用threejs引擎进行游戏开发时,使用iframe嵌套解决bgm在不同页面连续播放的问题,但是iframe中的onPointerDown事件会触发两次导致position出现两个元素无法使用 解决办法:修改Trackba

Threejs学习 一

Threejs学习和总结前传 学习 Three.js 之前要知道的 什么是 WebGL? WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API,可以在 HTML5 <canvas> 元素中使用。WebGL