3d_website/main.js

import { PointLight } from 'three';
import './style.css';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three';


const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);

renderer.render(scene, camera);

const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshStandardMaterial({color: "green"});
const torus = new THREE.Mesh(geometry, material);

scene.add(torus);

const pointLight = new PointLight(0xffffff, 150);

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight, pointLight);

pointLight.position.set(10, 10, 10);

const lightHelper = new THREE.PointLightHelper(pointLight);


const gridHelper = new THREE.GridHelper(200, 50);
scene.add(gridHelper, lightHelper);

const controls = new OrbitControls(camera, renderer.domElement)


function animate(){
    requestAnimationFrame(animate);

    torus.rotation.x += 0.01;
    torus.rotation.y -= 0.01;
    torus.rotation.z -= 0.01;

    renderer.render(scene, camera)
}
animate();