JSFiddle - React, Tailwind, and code Playground

by Thanos Saringelos

HTML

<ul>

<li><a href='#' onclick="centerElement(1)">a</a></li>
<li><a href='#' onclick="centerElement(2)">b</a></li>
<li><a href='#' onclick="centerElement(3)">c</a></li>
<li><a href='#' onclick="centerElement(4)">d</a></li>

</ul>

<script>

function centerElement(s){

     camera.position.y -=50;
     
 
}
</script>

CSS

body{
  background-color:white;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.z = 500;

    scene.add(camera);

    geometry = new THREE.CubeGeometry(100, 100, 100);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    
    var geometry2 = new THREE.CubeGeometry(40, 40, 200);
    var material2 = new THREE.MeshNormalMaterial();

    var mesh2 = new THREE.Mesh(geometry2, material2);
    
    mesh.add(mesh2);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}



function render() {

    mesh.rotation.x += 0.001;
    mesh.rotation.z += 0.001;
    mesh.rotation.y += 0.002;

    renderer.render(scene, camera);

}