3Js
OrbitControls(), 마우스휠 확대축소 제한, 로테이션 제한
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, plhelper;
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;
controls.minDistance = 200; // 마우스 휠로 카메라 거리 조작시 최소 값
controls.maxDistance = 950; // 마우스 휠로 카메라 거리 조작시 최대 값
controls.maxPolarAngle = Math.PI / 2 ; // 각도 제한
pointlight = new THREE.PointLight(0xffffff, 1);
pointlight.position.set(100,100,100);
scene.add(pointlight);
const plhelper = new THREE.PointLightHelper(pointlight, 10);
scene.add(plhelper);
let envmaploader = new THREE.PMREMGenerator(renderer);
new RGBELoader().setPath('../static/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: 0.9,
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();
// 반응형 처리
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
</script>
</body>
</html>
