three.js 在地质学上的应用
近期有个项目需要在客户端展示三维地质模型，网上搜集相关资料也无从下手，突然看到Three3D封装的WebGL，其3D渲染效果令我大为惊叹，于是乎开始了Three3D 的摸索。有兴趣的同学可以点击在线中文文档（http://techbrood.com/threejs/docs查看其演示...
deck.gl 叠加 three.js 物体
import { Matrix4 } from "@math.gl/core";import { Layer, LayerContext } from "@deck.gl/core";import DeckGL from "@deck.gl/react";import { OrbitView } f...
3dmax导出three.js使用的obj格式文件时缺少贴图
最近一直在研究使用three.js加载obj模型，遇到的很多问题，其中之一就是这个让人头大，模型/贴图/材质/渲染都没有问题，导出来的OBJ怎么就没有贴图了呢，经过一周折腾得到的答案，其实答案很简单，就是3dmax导出obj（含贴图），是不支持插件渲染器下的材质，只支持3dmax本身自带的默认扫描线...
three.js实现物体描边效果-shader
three.js 实现物体描边效果-shader在游戏中描边效果非常常见，比如选中物体或者人物的时候会出现。描边效果的原理是在物体的外包包裹了一层，就需要描边的物体比实际的物体大一点点。所以需要牵涉到顶点，就是需要把物体顶点往法线的方向扩展一点点。需要修改vertexShader。...
Webgl显示Revit模型（二）——利用Three.js优化显示效果
Webgl显示Revit模型（一）请见：https://blog.csdn.net/niuge8905/article/details/80044802Three.js已经算是开发webgl最常用的开源库了。Autodesk团队开源了一个va3c来在web端显示revit，但是这个更新很慢，而且效果...
three.js实现obj模型爆炸
由于obj模型是一个有多个mesh组成的组，而不是mesh，因此通过改变obj模型中mesh即children的位置，可实现模型爆炸。通过在控制台输入console.log(model.children)查看，如图首先获取模型中心坐标，由于在设置模型的位置信息时，将模型的中心的设置为（0，0，0），...
maxscript脚本：模型导出为json，用于three.js加载
一、总的任务1.数据来源：将3dsmax中建好的模型，通过烘焙反贴，赋予SelfIllumMap（自发光材质）一个bitmap（位图贴图），用于表达物体的光影效果。加上本身的diffuseMap(本色贴图/漫反射贴图)，每个材质一共有两个材质贴图。2.任务：three.js 可以加载json格式的材...
websocket + three.js实时驱动模型
介绍一个使用websocket传输数据，实时驱动three.js场景中的模型运动的demo，先来看一下效果：这个demo的制作主要涉及了websocket和three.js, 这是一个前后端交互的例子：后端采用了Express作为框架，并使用express-ws模块来完成Websocket实时传输数...
用three.js做一个3D汉诺塔游戏（上）-添加桌台
在汉诺塔游戏中，场景里主要的 3D 物体包括桌台、柱杆和盘子，我们先来添加最简单的桌台到场景中。 桌台的形状是一个长方体，我们可以使用 BoxGeometry 来实现它，网格材质则使用 MeshLambertMaterial 模拟木质的非光泽表面。 const tableSize = { wid...
WebGL笔记(六)_Three.js渲染obj模型并同时渲染全景图
基本思路简述：一个模型的渲染的流程是，创建一个场景，并将模型和相机放到场景中合适的位置；然后就会呈现出一个3D模型在屏幕上。全景图的呈现其实就是在创建一个场景、相机、几何球。模型和全景同时被呈现在屏幕上就会出现模型被放在全景环境下的样子。效果图在后面。第一步：创建一个demo.html文件将必要的j...
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
项目背景消防安全一直是各大都市关注的重要课题，在消防体系中，特别是高楼消防体系中，消防系统整体布控与监控，火情有效准确定位，防火器材定位，人员逃生路径规划，火情预警，消防演习都是特别重要的环节。所以一套直观的，迅速治控的系统展现，可体验式演戏游戏也就变得那么的不可或缺了。解决方案技术选型：使用web...
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
序：这段时间忙于奔波，好久没有更新了，今天更新一下，继续上节课的完善讲解，算是对前段时间的一个总结吧。披星戴月的时光也算有点应用效果了。对于webgl(three.js)性能这一块我在上节课《使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课》已经给了详细的说明比较与解决方案...
学习Three.js——摄像机(camera)
摄像机包括透视投影摄像机和正交投影摄像机。透视投影摄像机构造函数var camera = new THREE.PerspectiveCamera(fov,aspect,near,far,zoom)fov:视场，摄像机左右两侧睁开的角度，fov越大看到的东西越多，默认值为50aspect:长宽比，渲染...
使用three.js加载obj+mtl模型完整案例
使用three.js加载obj+mtl模型使用说明资源下载目录结构js部分csshtml效果图后记使用说明这里我借鉴了threejs案例的部分代码 （传送门：https://threejs.org/examples/?q=obj#webgl_loader_obj_mtl），但是这个案例并不能满足我们...
three.js 鼠标左右拖动改变玩家视角
这里主要用到了 一个方法 obj.getWorldDirection(); obj.getWorldDirection()表示的获取obj对象自身z轴正方向在世界坐标空间中的方向。 按下 W键前进运动； <template> <div> <el-c...
【WebGL】Three.js绘制基础3D图形示例
WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与...
Three.js - 使用stats.js库显示帧数（以及画面渲染时间）
1，stats.js 介绍（1）stats.js 是一个 Three.js 开发的辅助库，这个库同样也是 Three.js ...
three.js如何实现简易3D机房？（一）基础准备-上
目录 一、tips 二、功能说明 1.模型初始化 2.功能交互 三、初始化准备 1.目录结构 2.创建三要素 3.创建轨道控制器 4.初始化灯光 5.适配 6.循环渲染 一、tips 1.three.js入门的相关基础性知识就不在此过多赘述了，可以自行提前了解 three.js docs：...
three.js 叉乘判断物体在人前左，前右，后左、后右
效果： 代码： <template> <div> <el-container> <el-main> <div class="box-card-left"> <div id="thre...
three.js 相机camera位置属性设置详解
开始很懵逼，完全不能理解，有个position，还要up和lookAt干嘛。[黑人问号脸❓❓❓]既然是位置属性不明白，那默认其它属性都懂了。上坐标轴：先来第一个po...