<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<style>
body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: radial-gradient(#292929, #000000); }
</style>
</head>
<body>
<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();
renderer = new THREE.WebGLRenderer({alpha:true,antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
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('img/').load('rosendal_park_sunset_2k.hdr', function(hdrmap) {
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 = {
clearcoat: 1.0,
clearcoatRoughness:0.1,
metalness: 0.9,
roughness:0.5,
color: 0x8418ca,
normalMap: texture,
normalScale: new THREE.Vector2(0.15,0.15),
envMap: envmap.texture
};
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();
</script>
</body>
</html>소스는 여기서 다운
https://github.com/mrdoob/three.js/releases/tag/r166
Release r166 · mrdoob/three.js
https://github.com/mrdoob/three.js/wiki/Migration-Guide#r165--r166 https://github.com/mrdoob/three.js/milestone/79?closed=1 BatchedMesh Add support for instanced rendering with sorting, frustum c...
github.com
hdr 이미지는 여기서 다운
HDRIs • Poly Haven
Previously known as HDRI Haven. Hundreds of free HDRI environments, ready to use for any purpose. No login required.
polyhaven.com
'3Js' 카테고리의 다른 글
| threejs, 파티클, 마우스 방향 이동 (0) | 2024.07.23 |
|---|---|
| Raycaster() + gsap (1) | 2024.07.19 |
| OBJLoader(), MTLLoader(). 블렌더에서 파일 가져오기 (0) | 2024.07.19 |
| threejs GLTFloader.load() 블렌더에서 파일 가져오기 (0) | 2024.07.19 |
| threejs skybox 배경 (0) | 2024.07.18 |
| threejs Fog() 안개 (0) | 2024.07.18 |
| OrbitControls(), 마우스휠 확대축소 제한, 로테이션 제한 (0) | 2024.07.18 |
| threejs 텍스처 (0) | 2024.07.18 |
