{
let camera,
renderer,
scene,
controls,
mesh,
cubeGroup,
renderOnDemand=true,
renderRequested=false,
height=400;
init();
function createCamera() {
const fov = 25;
const aspect = width / height;
const near = 0.1;
const far = 1000;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 2, 4);
}
function createLights() {
const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 9);
const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
scene.add(ambientLight);
mainLight.position.set(10, 10, 10);
scene.add(ambientLight, mainLight);
}
function createMaterials() {
const cube = new THREE.MeshStandardMaterial({
color: 0xff3333,
flatShading: true
})
cube.color.convertSRGBToLinear();
return {
cube
}
}
function createGeometries() {
const cube = new THREE.BoxGeometry( 1, 1, 1 );
return {
cube
}
}
function createMeshes() {
const materials = createMaterials();
const geometries = createGeometries();
const cubeMesh = new THREE.Mesh( geometries.cube, materials.cube );
const group = new THREE.Group();
group.add(cubeMesh);
cubeGroup = group;
scene.add(group);
}
function createRenderer() {
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
}
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color('skyblue');
createCamera();
createLights();
createMeshes();
createRenderer();
controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
}
function render() {
renderer.render(scene, camera);
}
function update() {
}
function onWindowResize() {
camera.aspect = width / height;;
camera.updateProjectionMatrix();
renderer.setSize(width, height)
}
window.addEventListener('resize', onWindowResize)
function animationLoop(){
update();
render();
controls.update()
}
controls.update()
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.1;
renderer.setAnimationLoop(animationLoop)
invalidation.then(() => (controls.dispose(), renderer.dispose()));
yield renderer.domElement
}