# I want to clone a website using 3js (here is the website https://www.ilithya.rocks/)

**URL:** <https://discourse.threejs.org/t/i-want-to-clone-a-website-using-3js-here-is-the-website-https-www-ilithya-rocks/53570>\
**Category:** Questions\
**Tags:** animation\
**Created:** [July 6, 2023, 9:39am UTC](https://discourse.threejs.org/t/i-want-to-clone-a-website-using-3js-here-is-the-website-https-www-ilithya-rocks/53570 "2023-07-06T09:39:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aryaj07](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aryaj07/32/37630_2.png) [@Aryaj07](https://discourse.threejs.org/u/Aryaj07)\
**Post date:** [July 6, 2023, 9:39am UTC](https://discourse.threejs.org/t/i-want-to-clone-a-website-using-3js-here-is-the-website-https-www-ilithya-rocks/53570/1 "2023-07-06T09:39:25Z")

</div>

So basically i wrote a code and i got somewhere near it idk but i seem to think i need to add only a mouse tracker without me clicking or draging the mouse physically. I m a total newbie to three js so correct my code if I m wrong. Thanks

here is my code :

```js
import './style.css'
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new Three.Scene();
const camera = new Three.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new Three.WebGL1Renderer({
  canvas: document.querySelector('#container'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(25);
renderer.render(scene, camera);
const geometry = new Three.BoxGeometry(5, 5, 5)
const material = new Three.MeshStandardMaterial({ color: 0xFFA500 });
const cube = new Three.Mesh(geometry, material);
scene.add(cube)
const light = new Three.PointLight(0xffffff)
light.position.set(5, 5, 5)
const alight = new Three.AmbientLight(0xffffff)
scene.add(light, alight)
const controls = new OrbitControls(camera, renderer.domElement)
const lighthelper = new Three.PointLightHelper(light)
const gridhelper = new Three.GridHelper(200, 500)
scene.add(lighthelper, gridhelper)

function addstar() {
  const geometry = new Three.TorusGeometry(0.9, 0.25, 16, 100)
  const material = new Three.MeshStandardMaterial({ color: 0xFFA500 });
  const torus = new Three.Mesh(geometry, material);

  const [x, y, z] = Array(3).fill().map(() => Three.MathUtils.randFloatSpread(100));
  torus.position.set(x, y, z)
  scene.add(torus)
}
Array(200).fill().forEach(addstar)

function addcube(){
  const geo = new Three.BoxGeometry(2,2,2)
  const mat = new Three.MeshStandardMaterial({color: 0xffffff})
  const square = new Three.Mesh(geo, mat)

  const[x,y,z] = Array(3).fill().map(() => Three.MathUtils.randFloatSpread(100));
  square.position.set(x,y,z)
  scene.add(square)
}
Array(200).fill().forEach(addcube)

const texture = new Three.TextureLoader().load('dot.jpg')
scene.background = texture

window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {
  requestAnimationFrame(animate);
  render();
  stats.update();
}
animate()

function render() {

  var timer = Date.now() * 0.0001;

  camera.position.x = Math.cos( timer ) * 800;
  camera.position.z = Math.sin( timer ) * 800;

  camera.lookAt( scene.position );

  scene.traverse( function ( object ) {

    if ( object.isMesh === true ) {

      object.rotation.x = timer * 5;
      object.rotation.y = timer * 2.5;

    }

  } );

  renderer.render( scene, camera );

}

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 6, 2023, 2:45pm UTC](https://discourse.threejs.org/t/i-want-to-clone-a-website-using-3js-here-is-the-website-https-www-ilithya-rocks/53570/2 "2023-07-06T14:45:00Z")

</div>

> [@Aryaj07](#):
>
> i need to add only a mouse tracker without me clicking or draging the mouse physically

I’m not sure what do you mean by ‘dragging’.

If you need a mouse tracker, you have to listen to the [mouse move event](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event). It will provide you with the screen coordinates of the mouse position. There is no need to click mouse button.

However, it is better to use the [pointer move event](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event) as it also works with touch screen.

Some hints:

- do not clone websites, it is OK to be inspired by their design, but cloning and mimicking are bad
- when posting code, use tripple backticks to format the code as code … but it is always better to share an online and debuggable example of the code

---

<div class="post-metadata">

**Author:** ![Aryaj07](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aryaj07/32/37630_2.png) [@Aryaj07](https://discourse.threejs.org/u/Aryaj07)\
**Post date:** [July 7, 2023, 2:26am UTC](https://discourse.threejs.org/t/i-want-to-clone-a-website-using-3js-here-is-the-website-https-www-ilithya-rocks/53570/3 "2023-07-07T02:26:21Z")

</div>

Ohh I m not cloning the website as a website I just need the interface of the 3d thing for a project nothing else. I’ll remember to share online codes next time. Also I solved the problem so I basically needed to use GSAP for the movement and enable orbitcontrols to use the dragging function as I asked for. Thanks for your help 😛