在three.js中绘制3D网络。

huangapple
go评论100阅读模式
英文:

Plotting 3d network in three.js

问题

我正在尝试使用three.js生成一个3D图形。

以下是代码部分：

  1. <html>
  2.   <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/three@0.119.0/build/three.min.js"></script>
  4.     <style>
  5.       body { margin: 0; }
  6.       canvas { display: block; }
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       var scene = new THREE.Scene();
  12.       var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  13.       var renderer = new THREE.WebGLRenderer();
  14.       renderer.setSize(window.innerWidth, window.innerHeight);
  15.       document.body.appendChild(renderer.domElement);
  17.       var node1_geometry = new THREE.BoxGeometry(1, 1, 1);
  18.       var node1_material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  19.       var node1 = new THREE.Mesh(node1_geometry, node1_material);
  20.       node1.position.set(-2, 4, 1);
  22.       var node2_geometry = new THREE.BoxGeometry(1, 1, 1);
  23.       var node2_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  24.       var node2 = new THREE.Mesh(node2_geometry, node2_material);
  25.       node2.position set(2, 4, 1);
  27.       var edge_geometry = new THREE.Geometry();
  28.       edge_geometry.vertices.push(node1.position, node2.position);
  29.       var edge_material = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 });
  30.       var edge = new THREE.Line(edge_geometry, edge_material);
  32.       scene.add(node1);
  33.       scene.add(node2);
  34.       scene.add(edge);
  36.       camera.position.z = 5;
  38.       var animate = function () {
  39.         requestAnimationFrame(animate);
  40.         renderer.render(scene, camera);
  41.       };
  43.       animate();
  44.     </script>
  45.   </body>
  46. </html>

但是这只会显示一个黑色窗口，图形没有显示出来。如何修复这个问题将非常有帮助。

英文:

I am trying to generate a 3d graph using three.js

Code:

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/three@0.119.0/build/three.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;style&gt;
  5. body { margin: 0; }
  6. canvas { display: block; }
  7. &lt;/style&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;script&gt;
  11. var scene = new THREE.Scene();
  12. var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  13. var renderer = new THREE.WebGLRenderer();
  14. renderer.setSize( window.innerWidth, window.innerHeight );
  15. document.body.appendChild( renderer.domElement );
  16. var node1_geometry = new THREE.BoxGeometry( 1, 1, 1 );
  17. var node1_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  18. var node1 = new THREE.Mesh( node1_geometry, node1_material );
  19. node1.position.set(-2, 4, 1);
  20. var node2_geometry = new THREE.BoxGeometry( 1, 1, 1 );
  21. var node2_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  22. var node2 = new THREE.Mesh( node2_geometry, node2_material );
  23. node2.position.set(2, 4, 1);
  24. var edge_geometry = new THREE.Geometry();
  25. edge_geometry.vertices.push( node1.position, node2.position );
  26. var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
  27. var edge = new THREE.Line( edge_geometry, edge_material );
  28. scene.add( node1 );
  29. scene.add( node2 );
  30. scene.add( edge );
  31. camera.position.z = 5;
  32. var animate = function () {
  33. requestAnimationFrame( animate );
  34. renderer.render( scene, camera );
  35. };
  36. animate();
  37. &lt;/script&gt;
  38. &lt;/body&gt;
  39. &lt;/html&gt;

But this only gives a black window and the graph is not displayed.
Suggestions on how to fix this will be really helpful.

答案1

得分: 2

要使代码片段运行，你的代码中有一个小问题：

  1. var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

你可以将其修改为：

  1. var edge_material = new THREE.LineDashedMaterial({
  2.   color: 0xffffff,
  3.   dashSize: 2,
  4.   gapSize: 2
  5. });

现在应该能够渲染了，但是仍然会出现黑色背景。问题是你的相机没有对准你创建的内容，所以添加一行代码设置相机位置：

  1. camera.position.y = 5;

现在你应该能够看到你的两个方块和线了。

英文:

To get the snippet to run you have a small problem with you line

  1. var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

You can change this to:

  1. var edge_material = new THREE.LineDashedMaterial({
  2. color: 0xffffff,
  3. dashSize: 2,
  4. gapSize: 2
  5. });

It should now render, but a black background still shows up. The problem now is that your camera is not angled at the content you have created, so add a line with a camera position below.

  1. camera.position.y = 5;

Now you should be able to see your two boxes, and the line.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const scene = new THREE.Scene();
  2. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  3. const renderer = new THREE.WebGLRenderer();
  4. renderer.setSize(window.innerWidth, window.innerHeight);
  5. document.body.appendChild(renderer.domElement);
  6. scene.background = new THREE.Color(0x333333);
  7. var node1_geometry = new THREE.BoxGeometry(1, 1, 1);
  8. var node1_material = new THREE.MeshBasicMaterial({
  9. color: 0x00ff00
  10. });
  11. var node1 = new THREE.Mesh(node1_geometry, node1_material);
  12. node1.position.set(-2, 4, 1);
  13. var node2_geometry = new THREE.BoxGeometry(1, 1, 1);
  14. var node2_material = new THREE.MeshBasicMaterial({
  15. color: 0xff00ff
  16. });
  17. var node2 = new THREE.Mesh(node2_geometry, node2_material);
  18. node2.position.set(2, 4, 1);
  19. var edge_geometry = new THREE.Geometry();
  20. edge_geometry.vertices.push(node1.position, node2.position);
  21. var edge_material = new THREE.LineDashedMaterial({
  22. color: 0xffffff,
  23. dashSize: 2,
  24. gapSize: 2
  25. });
  26. var edge = new THREE.Line(edge_geometry, edge_material);
  27. scene.add(node1);
  28. scene.add(node2);
  29. scene.add(edge);
  30. camera.position.z = 5;
  31. camera.position.y = 5;
  32. var animate = function() {
  33. requestAnimationFrame(animate);
  34. renderer.render(scene, camera);
  35. };
  36. animate();

<!-- language: lang-html -->

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/three@0.119.0/build/three.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;style&gt;
  5. body {
  6. margin: 0;
  7. }
  8. &lt;/style&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;/body&gt;
  12. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月8日 15:16:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/75382450.html
  • graph
  • html
  • javascript
  • three.js
  • webgl
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定