function circle (r, theta) { return new THREE.Vector2( r * Math.cos(theta), //x r * Math.sin(theta) //y ); } function disc (R,t,r,p) { var c = circle(R,t); //円周上の点 return new THREE.Vector2( c.x + r * Math.cos(p) * Math.cos(t), c.y + r * Math.cos(p) * Math.sin(t) ); } function torus (R,t,r,p) { var d = disc(R,t,r,p); return new THREE.Vector3( d.x, d.y, r * Math.sin(p) ); } document.addEventListener("DOMContentLoaded", function () { var renderer = new THREE.CanvasRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //renderer.setClearColor(0x000000); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100); camera.position.set(0,-25,15); camera.lookAt(new THREE.Vector3(0,0,0)); scene.add(camera); //var dl = new THREE.DirectionalLight(); //dl.position.set(0,1,0); //scene.add(dl); var donut = new THREE.Mesh( new THREE.TorusGeometry(10,2,32,32), new THREE.MeshLambertMaterial({ color: 0xD04255, ambient: 0xD04255 }) ); scene.add(donut); var balls = [0,0,0,0,0].map(function () { var ball = new THREE.Mesh( new THREE.SphereGeometry(1,12,12), new THREE.MeshBasicMaterial({ color: 0xF0BA32 }) ); scene.add(ball); return ball; }); var t = 0; function frame () { requestAnimationFrame(frame); t += 0.02; balls.forEach(function (ball, i) { t_ = t - i * 0.03; var c = torus(10, t_, 3, 8*t_); ball.position.set(c.x, c.y, c.z); }); donut.rotation.z = -t/10; renderer.render(scene, camera); } requestAnimationFrame(frame); });