p5 to three.js translation
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();