3dsub/3d.js

import * as THREE from "three"
import {OrbitControls} from "https://unpkg.com/three@0.150.1/examples/jsm/controls/OrbitControls.js"
const container = document.querySelector('#container')

// Scene setup
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x88ccff)

    

// Light setup
const ambientLight = new THREE.AmbientLight(0xb3c3e6);
scene.add(ambientLight);

// Renderer setup
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const controls = new OrbitControls( camera, renderer.domElement );
camera.position.z = 5;

// Objects setup
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add(cube);

container.appendChild(renderer.domElement);

// Animation loop setup
function animate() {
    renderer.render(scene, camera)
    controls.update()
    requestAnimationFrame(animate)
    cube.rotation.x +=0.01;
    cube.rotation.y += 0.01;
}

animate()

// Window resize callback
window.addEventListener("resize", ()=>{
    camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
})

export default {
    scene: scene,
}