[threejs] 扇形を描画する
three.js（r79）で扇形を描画する方法。
CircleGeometryの第3、4引数を利用します。
第3引数に開始角度、第4引数に終了角度を代入します。（共にラジアン角）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
class Main constructor: -> # stats @stats = new Stats() document.body.appendChild(@stats.dom) # scene @scene = new THREE.Scene() # camera @camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) @camera.position.z = 100 @camera.lookAt(x:0,y:0,z:0) # renderer @renderer = new THREE.WebGLRenderer(alpha:true,antialias:true) @renderer.setClearColor(0x000000) if window.devicePixelRatio @renderer.setPixelRatio(window.devicePixelRatio) document.body.appendChild(@renderer.domElement) # controls @controls = new THREE.OrbitControls(@camera,@renderer.domElement) # container @container = new THREE.Group() @scene.add(@container) # mesh @geometry = new THREE.CircleGeometry(50,32,0,90 * Math.PI / 180) material = new THREE.MeshNormalMaterial(side:THREE.DoubleSide) @circle = new THREE.Mesh(@geometry,material) @container.add(@circle) wireMaterial = new THREE.MeshBasicMaterial(color:0xffffff,wireframe:true) @wireCircle = new THREE.Mesh(@geometry,wireMaterial) @container.add(@wireCircle) # dat.gui @conf = thetaLength: 90 @gui = new dat.GUI() @folder = @gui.addFolder('change thetaLength') @folder.add(@conf,'thetaLength',0,360).onChange(@changeThetaLength) @render() @resize() $(window).resize(@resize) changeThetaLength: => @geometry.dispose() @geometry = new THREE.CircleGeometry(50,32,0,@conf.thetaLength * Math.PI / 180) @circle.geometry = @geometry @wireCircle.geometry = @geometry return resize: => @camera.aspect = window.innerWidth / window.innerHeight @camera.updateProjectionMatrix() @renderer.setSize(window.innerWidth, window.innerHeight) return render: => @stats.begin() @renderer.render(@scene,@camera) @controls.update() @stats.end() requestAnimationFrame(@render) return $ -> new Main() return |
