以下是一个web端cad测量面积的示例代码，基于Three.js和jQuery库实现：

HTML部分：

  

    

    

    

  

  

    

    

    

    

    

  

 

部分（app.js）：

// 初始化Three.js场景、相机、渲染器

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(

  75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize( window.innerWidth, window.innerHeight );

document.getElementById("container").appendChild(renderer.domElement);

 

// 初始化画线的材质

var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

 

// 初始化测量变量

var linePoints = [];

var area = 0;

 

// 监听鼠标点击事件，绘制线段并计算面积

document.addEventListener( 39;click39;, onClick, false );

 

function onClick( event ) {

  // 获取鼠标点击坐标

  var mouse = new THREE.Vector2();

  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

 

  // 创建射线

  var raycaster = new THREE.Raycaster();

  raycaster.setFromCamera( mouse, camera );

 

  // 计算射线和平面的交点，并绘制线段

  var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);

  var intersection = new THREE.Vector3();

  raycaster.ray.intersectPlane(plane, intersection);

  linePoints.push(intersection);

  if (linePoints.length > 1) {

    var geometry = new THREE.BufferGeometry().setFromPoints(linePoints);

    var line = new THREE.Line(geometry, material);

    scene.add(line);

 

    // 计算面积

    var v1 = linePoints[linePoints.length-2];

    var v2 = linePoints[linePoints.length-1];

    area += (v1.x * v2.y - v2.x * v1.y) / 2;

    $("#output").html("

面积: " + Math.abs(area).toFixed(2) + "

");

  }

}

 

// 渲染场景

function animate() {

  requestAnimationFrame( animate );

  renderer.render( scene, camera );

}

animate();

 

这个示例代码可以在浏览器中运行，并实现了在Three.js场景中绘制线段、计算面积等功能，在线CAD有很多其他功能，可以到梦想CAD控件官网查看。以上代码可以根据实际需求对代码进行修改和拓展。