3Js
threejs 텍스처
by 영감은어디에
2024. 7. 18.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<style>
body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: radial-gradient(#292929, #000000); }
canvas{display: block;width: 100%; height: auto; top: 0; left: 0;}
</style>
</head>
<body>
<canvas id="threebox"></canvas>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.166.1/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.1/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FlakesTexture } from 'three/addons/textures/FlakesTexture.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
let scene, camera, renderer, controls, pointlight;
function init() {
scene = new THREE.Scene();
const canvas = document.querySelector('#threebox');
renderer = new THREE.WebGLRenderer({alpha:true,antialias:true,canvas});
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.25;
camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,1,1000);
camera.position.set(0,0,500);
controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.autoRotateSpeed = 1;
controls.enableDamping = true;
pointlight = new THREE.PointLight(0xffffff,1);
pointlight.position.set(200,200,200);
scene.add(pointlight);
let envmaploader = new THREE.PMREMGenerator(renderer);
new RGBELoader().setPath('../static/img/').load('rosendal_park_sunset_2k.hdr', function(hdrmap) {
// 텍스처 추가
const textureLoader = new THREE.TextureLoader();
const textureBaseColor = textureLoader.load('../static/img/stone_basecolor.jpg');
const textureNormalMap = textureLoader.load('../static/img/stone_normal.jpg');
const textureHeightMap = textureLoader.load('../static/img/stone_height.png');
const textureRoughnessMap = textureLoader.load('../static/img/stone_roughness.jpg');
let envmap = envmaploader.fromCubemap(hdrmap);
let texture = new THREE.CanvasTexture(new FlakesTexture());
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 10;
texture.repeat.y = 6;
const ballMaterial = {
normalScale: new THREE.Vector2(0.15,0.15),
envMap: envmap.texture,
map: textureBaseColor,
normalMap : textureNormalMap,
displacementMap : textureHeightMap,
displacementScale : 30,
};
let ballGeo = new THREE.SphereGeometry(100,64,64);
let ballMat = new THREE.MeshPhysicalMaterial(ballMaterial);
let ballMesh = new THREE.Mesh(ballGeo,ballMat);
scene.add(ballMesh);
animate();
});
}
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
// 반응형 처리
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
</script>
</body>
</html>
