我尝试使用关于递归的答案来绘制每棵树 3 和 3 个分支的深度，但答案很奇怪? [英] I try to use the answer about recursion to draw a depth of 3 and 3 branches per tree,but answer is very strange?

问题描述

我根据 图二:我用来画答案

const 树 = [[0, 0, 0 ],//A//根[-2, 104, -4 ],//B[-39, 189, -23],//c[-4, 230, 19 ],//D[34, 192, -61 ],//E[-150, 270, -72],//F[-115, 296, -63],//G[-106, 326, 6],//G[-82, 365, 23 ],//我[-43, 360, 123],//J[10, 294, 144 ],//K[76, 271, -176],//L[132, 289, -150],//M[87, 228, -63]//否].map(v => new THREE.Vector3().fromArray(v));//假设每个分支有 3 个分支函数 addBranch(父级，深度，偏移量，树，parentNdx = 0，childNdx = 1){const start = tree[parentNdx];const end = tree[childNdx];const length = start.distanceTo(end);const material = new THREE.MeshPhongMaterial({color:'#ff0000'});const geometry = new THREE.CylinderGeometry(5, 5, length, 20, 1, false);geometry.translate(0, 长度/2, 0);geometry.rotateX(Math.PI/2);const mesh = new THREE.Mesh(geometry, material);mesh.position.z = 偏移量；parent.add(mesh);网格.lookAt(结束)；让 ndx = childNdx + 1;如果(深度> 1){const numBranches = 3;for (let i = 0; i 

图三:奇怪的答案

解决方案

该算法使用深度优先顺序，这意味着您的顶点顺序需要

ABCFGHDIJKELMN

body {边距:0；}#C {宽度:100vw；高度:100vh；显示:块；}

<canvas id="c"></canvas><脚本类型=模块">从https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js"导入*为三；函数主(){const canvas = document.querySelector('#c');const renderer = new THREE.WebGLRenderer({canvas});常量 fov = 75;常量方面 = 2;//画布默认const 附近 = 1;const 远 = 1000;const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);相机位置设置(250、500、-75)；camera.lookAt(0, 200, 0);const 场景 = 新的 THREE.Scene();Scene.background = new THREE.Color('lightskyblue');{常量颜色 = 0xFFFFFF；常量强度 = 1;const light = new THREE.DirectionalLight(颜色，强度)；light.position.set(1, 2, 4);场景.添加(光)；}//ABCFGHDIJKELMN常量树 = [[0, 0, 0],//A[-2, 104, 4],//B[-39, 183, -23],//C[-156, 270, -72],//F[-115, 296, -63],//G[-106, 326, 6],//H[-4, 230, 19],//D[-82, 366, 23],//我[-43, 360, 123],//J[10, 294, 144],//K[34, 192, -61],//E[76, 271, -176],//L[132, 289, -150],//M[97, 228, -63],//否].map(v => new THREE.Vector3().fromArray(v));//假设每个分支有 3 个分支函数 addBranch(父级，深度，偏移量，树，parentNdx = 0，childNdx = 1){const start = tree[parentNdx];const end = tree[childNdx];const length = start.distanceTo(end);const material = new THREE.MeshPhongMaterial({color:'#ff0000'});const geometry = new THREE.CylinderGeometry(5, 5, length, 20, 1, false);geometry.translate(0, 长度/2, 0);geometry.rotateX(Math.PI/2);const mesh = new THREE.Mesh(geometry, material);mesh.position.z = 偏移量；parent.add(mesh);网格.lookAt(结束)；让 ndx = childNdx + 1;如果(深度> 1){const numBranches = 3;for (let i = 0; i 

I according the answer from use recursion to draw the tree and use recursion try to draw a depth of 3 and 3 branches per(like picture one) but it print a strange answer (like picture three) Please tell me where is the problem.THANK YOU.

picture one: picture two: I use for to draw the answer

const tree = [

[0, 0, 0 ], // A // root
[-2, 104, -4 ], //B  
[-39, 189, -23],//c  
[-4, 230, 19 ], //D  
[34, 192, -61 ], //E 
[-150, 270, -72], //F 
[-115, 296, -63], //G
[-106, 326, 6], //G
[-82, 365, 23 ],//I
[-43, 360, 123],//J
[10, 294, 144 ],//K
[76, 271, -176], //L
[132, 289, -150],//M
[87, 228, -63] //N

  ].map(v => new THREE.Vector3().fromArray(v));

  // assumes there are 3 branches per
  function addBranch(parent, depth, offset, tree, parentNdx = 0, childNdx = 1) {
    const start = tree[parentNdx];
    const end = tree[childNdx];
    const length = start.distanceTo(end);

    const material = new THREE.MeshPhongMaterial({color:'#ff0000'});
    const geometry = new THREE.CylinderGeometry(5, 5, length, 20, 1, false); 
    geometry.translate(0, length / 2, 0);
    geometry.rotateX(Math.PI / 2);
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = offset;
    parent.add(mesh);
    mesh.lookAt(end);
    let ndx = childNdx + 1;
    if (depth > 1) {
      const numBranches = 3;
      for (let i = 0; i < numBranches; ++i) {
        ndx = addBranch(mesh, depth - 1, length, tree, childNdx, ndx);
      }
    }
    return ndx;
  }
  addBranch(scene, 3, 0, tree) 

picture three: strange answer

解决方案

The algorithm uses depth first order, that means the order of your vertices needs to be

ABCFGHDIJKELMN

body {
  margin: 0;
}
#c {
  width: 100vw;
  height: 100vh;
  display: block;
}

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(250, 500, -75);
  camera.lookAt(0, 200, 0);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('lightskyblue');

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(1, 2, 4);
    scene.add(light);
  }

//ABCFGHDIJKELMN
  const tree = [
    [0, 0, 0], // A
    [-2, 104, 4], // B
    [-39, 183, -23], // C
    [-156, 270, -72], // F
    [-115, 296, -63], // G
    [-106, 326, 6], // H
    [-4, 230, 19], // D
    [-82, 366, 23], // I
    [-43, 360, 123], // J
    [10, 294, 144], // K
    [34, 192, -61], // E
    [76, 271, -176], // L
    [132, 289, -150], // M
    [97, 228, -63], // N 
  ].map(v => new THREE.Vector3().fromArray(v));

  // assumes there are 3 branches per
  function addBranch(parent, depth, offset, tree, parentNdx = 0, childNdx = 1) {
    const start = tree[parentNdx];
    const end = tree[childNdx];
    const length = start.distanceTo(end);

    const material = new THREE.MeshPhongMaterial({color:'#ff0000'});
    const geometry = new THREE.CylinderGeometry(5, 5, length, 20, 1, false); 
    geometry.translate(0, length / 2, 0);
    geometry.rotateX(Math.PI / 2);
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = offset;
    parent.add(mesh);
    mesh.lookAt(end);
    let ndx = childNdx + 1;
    if (depth > 1) {
      const numBranches = 3;
      for (let i = 0; i < numBranches; ++i) {
        ndx = addBranch(mesh, depth - 1, length, tree, childNdx, ndx);
      }
    }
    return ndx;
  }
  addBranch(scene, 3, 0, tree);

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

//    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>

这篇关于我尝试使用关于递归的答案来绘制每棵树 3 和 3 个分支的深度，但答案很奇怪?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！