diff --git a/threeJS/09_cubic_bezier3.js b/threeJS/09_cubic_bezier3.js new file mode 100644 index 0000000000000000000000000000000000000000..79db74dfac327e359d2d2d4ff80ec4aebacafb51 --- /dev/null +++ b/threeJS/09_cubic_bezier3.js @@ -0,0 +1,42 @@ + const h_scr = window.innerWidth; + const v_scr = window.innerHeight; + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera(45, h_scr/v_scr, 0.1, 1000); + camera.position.z = 5; + + const renderer = new THREE.WebGLRenderer({canvas: HelloCanvas}); + renderer.setSize( h_scr, v_scr ); + + const points = [ new THREE.Vector3(0,0,1), new THREE.Vector3(0,0,0), + new THREE.Vector3(1,0,0), new THREE.Vector3(0,0,0), new THREE.Vector3(0,1,0) ]; + // 빨간 xyz축들 생성 + + const geometry = new THREE.BufferGeometry().setFromPoints(points); + const material = new THREE.LineBasicMaterial( { color: 0xff0000 } ); + const wire = new THREE.Line( geometry, material ); + // geometry 를 point로 해서 이걸 line으로 그렸네 + scene.add( wire ); + // 여기까지 축을 그리는 거 + const curve = new THREE.CubicBezierCurve3( + // curve에 bezier curve를 넣어 + new THREE.Vector3( 0,0,0 ), new THREE.Vector3( -2,-2,3 ), + new THREE.Vector3( 3,2,-2 ),new THREE.Vector3(1,1,1 ) ); + // 베이제 커브의 4개의 control point + const points2 = curve.getPoints( 50 ); + // points2에 vector 50개 들어간 array를 갖는거 + // 숫자가 커지면 더 부드러지고 숫자가 작으면 더 각지겠지 + const geometry2 = new THREE.BufferGeometry().setFromPoints(points2); + const material2 = new THREE.LineBasicMaterial( { color: 0x00ff00 } ); + // 그리고 이걸 linematrial 로 그린거 + // 즉. webgl에서 베지어 커브를 직접적으로 그릴 수 없다. + const wire2 = new THREE.Line( geometry2, material2 ); + wire.add( wire2 ); + + + const animate = function () { + requestAnimationFrame( animate ); + wire.rotation.x += 0.01; + wire.rotation.y += 0.01; + renderer.render( scene, camera ); + }; + animate();