dim-mlamp

3D 可视化项目

📦 如何安装

npm isntall dim-mlamp

🔨 如何使用

• 创建一个基础场景。包含相机(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);
}

• 创建一个几何体。

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 参数

• position —— 相机初始化的位置

  参数	说明	类型	默认值
  center	45° 看向中心	string	是
  left	Z 轴看向圆心	string	否
  right	X 轴看向圆心	string	否
  top	Y 轴看向圆心	string	否
  number[]	可以自定义一个角度	number[x,y,z]	否

• scale —— 相机初始化视距，同时影响可缩放范围

  参数	说明	类型	默认值
  normal	scale 值为 1，表示最接近人眼的视距	string	是
  near	scale 值为 3	string	否
  far	scale 值为 0.6	string	否
  number	可以自定义一个距离	number 或'number	否

• dblClick —— 双击物体回调函数

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

✨ 方法

相机方法

• 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]);

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

dim.camera.setScale('far');