# webgl-threejs

**Repository Path**: qi-jia/webgl-threejs

## Basic Information

- **Project Name**: webgl-threejs
- **Description**: threejs webgl 包含地图数据可视化，模型渲染，阴影效果。 内含3d地图选中抬起 3d模型 持续学习更新中...
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 6
- **Created**: 2022-03-25
- **Last Updated**: 2025-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 3D可视化, 3d模型, webgl, Threejs, 3D地图

## README

# 案例预览

项目案例打开需要搭建一个本地静态服务器进行预览，加载外部文件或贴图的案例，不能直接通过浏览器打开.html 文件。

### `live-server`(Nodejs 本地静态服务器)

使用 npm 执行`npm install -g live-server`安装`live-server`模块，如果你想通过安装好的`live-server`模块开启一个静态服务器，打开命令行，进入 threejs 案例所在的文件目录，然后执行`live-server`命令就可以。

通过浏览器访问`http://localhost:8080`或`http://127.0.0.1:8080`地址，找到 threejs 案例的.html 文件直接打开就可以看到三维场景渲染效果。

### vscode 使用 live-server

对于 vscode 代码编辑器，你可以搜索 live 关键词，找到 live-server 插件安装即可，安装后右键需要打开的文件 open with live server 即可 并且支持热更新

### 中文文档

http://www.webgl3d.cn/threejs/docs/

### OrbitControls

图形控制插件 使用 OrbitControls 后会影响 lookAt 设置并强制指向坐标原点 (ex:5-1)

### 3d 模型资源地址

https://sketchfab.com/feed

### Box3 包围盒查看几何信息

(ex:5-1)
// 地图 mapGroup 的包围盒计算
var box3 = new THREE.Box3();//创建一个包围盒
// .expandByObject()方法：计算层级模型 group 包围盒
box3.expandByObject(lineGroup);
// console.log('查看包围盒 box3', box3);

//scaleV3 表示包围盒长宽高尺寸
var scaleV3 = new THREE.Vector3();
// .getSize()计算包围盒长宽高尺寸
box3.getSize(scaleV3)
// 查看控制台包围盒大小，辅助设置相机参数
console.log('查看包围盒尺寸', scaleV3);

//scaleV3 表示包围盒的几何体中心
var center = new THREE.Vector3();
// .getCenter()计算一个层级模型对应包围盒的几何体中心
box3.getCenter(center);
// 查看控制台包围盒集合中心，作为 lookAt()参数
console.log('查看几何中心', center);

### 小游戏来源-- https://github.com/rossning92/t-rex

### issues
有问题提问及探讨可发起issues