fractalkitty looking for math? fractalkitty.com

all

p5 to three.js translation

#trig#3d#animation#study#scrap

scenecamerarenderercontrolscontainermateriallighttorusSizetorusGeometrytorussphereSizesphereGeometrysphereanimate

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  100,
  window.innerWidth / window.innerHeight,
  100,
  5000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 700;
const controls = new THREE.OrbitControls(camera, renderer.domElement);

const container = new THREE.Object3D();
scene.add(container);

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0xffffff,
  shininess: 10
});

const light = new THREE.PointLight(0x5f5f5f);
light.position.set(500, 500, 1500);
scene.add(light);

const torusSize = Math.min(window.innerWidth / 4, window.innerHeight / 4);
const torusGeometry = new THREE.TorusGeometry(
  torusSize,
  torusSize / 10,
  30,
  48
);
const torus = new THREE.Mesh(torusGeometry, material);
container.add(torus);

const sphereSize = Math.min(window.innerWidth / 8, window.innerHeight / 8);
const sphereGeometry = new THREE.SphereGeometry(sphereSize, 24, 24);
const sphere = new THREE.Mesh(sphereGeometry, material);
container.add(sphere);

let t = 0;

function animate() {
  requestAnimationFrame(animate);
  t++;
  container.rotation.x = t * (Math.PI / 180);
  container.rotation.y = t * (Math.PI / 180);

  sphere.position.z =
    500 * Math.sin((t * Math.PI) / 180) * Math.cos((t * Math.PI) / 180);
  controls.update();
  renderer.render(scene, camera);
}

animate();