ZBLOG

请写出完整代码

以下是一个完整的示例代码,实现使用Three.js绘制三维坐标系,并通过鼠标点击多出不同处,然后将这些点连接成线:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Three.js 3D Coordinate System</title>
  6. <style>
  7. body { margin: 0; }
  8. </style>
  9. </head>
  10. <body>
  11. <script src="https://threejs.org/build/three.js"></script>
  12. <script>
  13. var scene, camera, renderer;
  14. var points = [];
  15. init();
  16. animate();
  17. function init() {
  18. scene = new THREE.Scene();
  19. camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  20. camera.position.z = 5;
  21. renderer = new THREE.WebGLRenderer();
  22. renderer.setSize(window.innerWidth, window.innerHeight);
  23. document.body.appendChild(renderer.domElement);
  24. var axisHelper = new THREE.AxisHelper(2);
  25. scene.add(axisHelper);
  26. document.addEventListener('mousedown', onDocumentMouseDown, false);
  27. }
  28. function onDocumentMouseDown(event) {
  29. event.preventDefault();
  30. var mouseVector = new THREE.Vector3(
  31. (event.clientX / window.innerWidth) * 2 - 1,
  32. -(event.clientY / window.innerHeight) * 2 + 1,
  33. 0.5
  34. );
  35. mouseVector.unproject(camera);
  36. var dir = mouseVector.sub(camera.position).normalize();
  37. var distance = -camera.position.z / dir.z;
  38. var pos = camera.position.clone().add(dir.multiplyScalar(distance));
  39. createPoint(pos.x, pos.y, pos.z);
  40. if (points.length >= 2) {
  41. createLine();
  42. }
  43. }
  44. function createPoint(x, y, z) {
  45. var geometry = new THREE.SphereGeometry(0.1, 32, 32);
  46. var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  47. var point = new THREE.Mesh(geometry, material);
  48. point.position.set(x, y, z);
  49. scene.add(point);
  50. points.push(new THREE.Vector3(x, y, z));
  51. }
  52. function createLine() {
  53. var geometry = new THREE.BufferGeometry().setFromPoints(points);
  54. var material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
  55. var line = new THREE.Line(geometry, material);
  56. scene.add(line);
  57. }
  58. function animate() {
  59. requestAnimationFrame(animate);
  60. renderer.render(scene, camera);
  61. }
  62. </script>
  63. </body>
  64. </html>

你可以将以上代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到绘制的三维坐标系。点击鼠标左键可以添加新的点,并将这些点用线连接起来。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=16058

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?