如何利用 Three.js 绘制由三维坐标数组定义的任意形状？

用三维坐标绘制任意形状

问题：已有三维坐标数组，如 [[162,81,10],[162,704,10],[773,704,20],[773,145,20]]。如何利用 three.js 绘制对应的 3d 形状？

答案：

1. 引用 three.js 库：

   <script src="three.min.js"></script>

   登录后复制

2. 创建场景和摄像机：

   const scene = new three.scene();
   const camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000);

   登录后复制

3. 从坐标数组创建几何体：

   const points = [[162,81,10],[162,704,10],[773,704,20],[773,145,20]];
   const geometry = new three.geometry();
   for (let i = 0; i < points.length; i++) {
     geometry.vertices.push(new three.vector3(...points[i]));
   }
   geometry.faces.push(new three.face3(0, 1, 2), new three.face3(0, 2, 3));

   登录后复制

4. 创建材质并将其应用于几何体：

   const material = new three.meshbasicmaterial({color: 0x00ff00, wireframe: true});
   const mesh = new three.mesh(geometry, material);

   登录后复制

5. 将网格添加到场景中：

   scene.add(mesh);

   登录后复制

6. 渲染场景：

   const renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);
   renderer.render(scene, camera);

   登录后复制

以上就是如何利用 Three.js 绘制由三维坐标数组定义的任意形状？的详细内容，更多请关注php中文网其它相关文章！