Как получить тот же результат преобразования в Three.js, чем в моем 2D-контексте? - PullRequest
Новая
       8

Как получить тот же результат преобразования в Three.js, чем в моем 2D-контексте?

0 голосов
/ 29 октября 2019

Я пытаюсь получить то же поведение, что и на холсте, с 2D-контекстом на холсте с использованием three.js. Я пытаюсь построить генератор L-системы.

Я понимаю, что в 2d context вся плоскость вращается и переводится, но я не могу достичь того же результата с помощью three.js.

конечно, я делаю всю систему в цикле, но вот где я до сих пор с основной логикой.

2 первые строки в 3d переведены и повернуты хорошим способом, нотретий не могу объяснить, что, как сказано выше, тем, что я не перемещаю и не вращаю всю плоскость 

let canvas2D = document.getElementById('myCanvas2D');
let ctx2D = canvas2D.getContext('2d');

draw2D = ()=>{
  ctx2D.strokeStyle = '#1b998b'
  //translation to the center of the screen
  ctx2D.translate(200, 200);
  
  //first line drawn with upper direction
  ctx2D.beginPath()
  ctx2D.moveTo(0, 0)
  ctx2D.lineTo(0, -20)
  ctx2D.stroke();

  //translation & rotation of the whole plane
  ctx2D.translate(0, -20)
  ctx2D.rotate(20);

  //second line starting from the end of first line
  ctx2D.beginPath()
  ctx2D.moveTo(0, 0)
  ctx2D.lineTo(0, -20)
  ctx2D.stroke();

  //translating and rotating again
  ctx2D.translate(0, -20)
  ctx2D.rotate(20);

  //third line starting from the end of second line
  ctx2D.beginPath()
  ctx2D.moveTo(0, 0)
  ctx2D.lineTo(0, -20)
  ctx2D.stroke();
}

draw3D = () => {
  let canvas3D = document.getElementById('myCanvas3D');
  let angle = 20 * Math.PI / 180;
  let currentAngle = 0;
  let scene = new THREE.Scene();
  
  //initialisation of the camera
  let camera = new THREE.PerspectiveCamera(75, 1, 0.01, 500 );
  camera.position.set( -30, -40, -30);
  camera.lookAt( 0, 20, 0);

  //DOM renderer
  let renderer = new THREE.WebGLRenderer({canvas: canvas3D});
  renderer.setSize(400, 400);
  
  //color of the line
  let lineMaterial = new THREE.LineBasicMaterial({ color: 0x1b998b, linewidth: 1 });
  let axesHelper = new THREE.AxesHelper( 5 );
	scene.add( axesHelper );
  
  //adding first line with upper  direction to the scene
  let geometry1 = new THREE.BufferGeometry();
  let vertices1 = new Float32Array([0, 0 , 0, 0, 20, 0])
  geometry1.addAttribute('position', new THREE.Float32BufferAttribute(vertices1,  3));
  let line1 = new THREE.Line( geometry1, lineMaterial );
  scene.add(line1);

  //adding second line with same vectors but with a trnaslation & rotation. second line starts at the end of first line
  let geometry2 = new THREE.BufferGeometry();
  let vertices2 = new Float32Array([0, 0 , 0, 0, 20, 0])
  geometry2.addAttribute('position', new THREE.Float32BufferAttribute(vertices2,  3));
  let line2 = new THREE.Line( geometry2, lineMaterial );
  line2.translateY(20);
  currentAngle += angle
  line2.rotateX(currentAngle);
  scene.add(line2);

 //same methodology but third line is not starting at the end of second line 
  let geometry3 = new THREE.BufferGeometry();
  let vertices3 = new Float32Array([0, 0 , 0, 0, 20, 0])
  geometry3.addAttribute('position', new THREE.Float32BufferAttribute(vertices3,  3));
  let line3 = new THREE.Line( geometry3, lineMaterial );
  line3.translateY(40);
  currentAngle += angle
  line3.rotateX(currentAngle);
  scene.add(line3);

  renderer.render(scene, camera);
  
}

draw2D();
draw3D();
#screens {
  display: flex;
}
canvas {
 margin: 10px;
 border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js" integrity="sha256-Wua0LsQkGDEeIkbmBNjj9wcThJh5uCD6R8+5YQhXveQ=" crossorigin="anonymous"></script>
<div id="screens">
  <div>
    <canvas width="400" height="400" id="myCanvas2D"></canvas>
  </div>
  <div>
    <canvas width="400" height="400" id="myCanvas3D"></canvas>
  </div>
</div>

Любая помощь в том, как я могу эффективно сделать вышеупомянутую 2D-фигуру в three.js (это будет рекурсивно в конце)с благодарностью (объяснения приветствуются)

...