threejs chrome paint

//main.js

import './style.css'

import { THREEx } from './threex.js'

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import { SpotLight } from 'three';

import {

  GodRaysEffect, BloomEffect, BlendFunction, KernelSize,

  SMAAEffect, EffectComposer, EffectPass, RenderPass

} from 'postprocessing';

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture.js'

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer({

  canvas: document.querySelector('#bg'),

});

renderer.setPixelRatio(window.devicePixelRatio);

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

camera.position.set(0, 0, 500);

THREEx.WindowResize(renderer, camera)

renderer.outputEncoding = THREE.sRGBEncoding;

renderer.toneMapping = THREE.ACESFilmicToneMapping;

renderer.toneMappingExposure = 1.25;

const pointLight = new THREE.PointLight(0xffffff, 1)

pointLight.position.set(200, 200, 200)

scene.add(pointLight)

const envmaploader = new THREE.PMREMGenerator(renderer);

new RGBELoader().load('cayley_interior_4k.hdr', function (hdrmap) {

  const envmap = envmaploader.fromCubemap(hdrmap);

  const texture = new THREE.CanvasTexture(new FlakesTexture());

  texture.wrapS = THREE.RepeatWrapping;

  texture.wrapT = THREE.RepeatWrapping;

  texture.repeat.x = 10;

  texture.repeat.y = 6;

  const ballMaterial = {

    clearcoat: 1.0,

    clearcoatRoughness: 0.1,

    metalness: 0.9,

    roughness: 0.5,

    color: 0xffd700,//0x8418ca,

    normalMap: texture,

    normalScale: new THREE.Vector2(0.15, 0.15),

    envMap: envmap.texture

  }

  const sphereGeo = new THREE.SphereGeometry(100, 64, 64);

  const sphereMaterial = new THREE.MeshPhysicalMaterial(ballMaterial);

  let sphere = new THREE.Mesh(sphereGeo, sphereMaterial);

  scene.add(sphere);

})

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

controls.autoRotate = true;

controls.autoRotateSpeed = 5;

controls.enableDamping = true;

function animate() {

  requestAnimationFrame(animate);

  controls.update();

  renderer.render(scene, camera);

}

animate()

reference:

https://www.youtube.com/watch?v=aJun0Q0CG_A&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM&index=16

flakes texture

https://threejs.org/docs/#api/en/textures/Texture

mesh physical material

https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial

tone mapping

https://threejs.org/examples/webgl_tonemapping.html