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

Questions
1

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 :

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 );

}
2

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. 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 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
1 Like
3

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 :stuck_out_tongue: