3D 可视化项目

📦 如何安装

npm isntall dim-mlamp

🔨 如何使用

1. 创建一个基础场景。包含相机(camera)、图层(layers)、渲染器(renderer)、场景(scene)

import { Dim } from 'dim-mlamp';
const dim = new Dim({
    axesHelper: true,
    container: document.getElementById('app'),
    position: 'center', // 可选
    scale: 'normal', // 可选
    dblClick: callback,
});
function callback(geo) {
    console.log(geo);
}

2. 创建一个几何体。

import { Obj3 } from 'dim-mlamp';
const fillD = [
    {
        position: [0, 0, 0],
        color: 0xff0000,
        materialType: 'MeshPhongMaterial', // 几何体材质
        geometryType: 'SphereBufferGeometry', // 几何体类型
    },
];
const cubes = new Obj3({ type: 'geo', userData: fillD });
dim.sence.add(cubes);

⌨️ 参数

Dim 参数

1. position —— 相机初始化的位置 | 参数 | 说明 | 类型 | 默认值 | :----|:-----:|-----:|-----: center|45° 看向中心|string|是 left|Z 轴看向圆心|string|否 right|X 轴看向圆心|string|否 top|Y 轴看向圆心|string|否 number[]|可以自定义一个角度|number[x,y,z]|否

2. scale —— 相机初始化视距，同时影响可缩放范围 | 参数 | 说明 | 类型 | 默认值 | :----|:-----:|-----:|-----: normal|scale 值为 1，表示最接近人眼的视距|string|是 near|scale 值为 3|string|否 far|scale 值为 0.6|string|否 number|可以自定义一个距离|number 或'number|否

3. dblClick —— 双击物体回调函数 | 参数 | 说明 | 类型 | 默认值 | :----|:-----:|-----:|-----: callback|双击物体的回调函数，参数为点击到的物体对象|(geo) => void|否

✨ 方法

相机方法

1. setPosition —— 设置相机位置 参数 1 详见 dim 类参数 —— position 参数 2 | 参数 | 说明 | 类型 | 默认值 | :----|:-----:|-----:|-----: number[]|可以自定义一个焦点，即相机指向的中心点|number[x,y,z]|[0,0,0]

// 以x:10，y:10，z:10为中心。相机在中心点左上45°，即[55, 55, 55]
dim.camera.setPosition('center', [10, 10, 10]);

2. setScale —— 设置缩放 参数 1 详见 dim 类参数 —— scale

dim.camera.setScale('far');