3Js10 threejs + gsap 마우스 스크롤 연동 1 2 3 4 2024. 7. 23. threejs, 파티클, 마우스 방향 이동 2024. 7. 23. Raycaster() + gsap // raycaster 시작 const raycaster = new THREE.Raycaster();renderer.domElement.addEventListener('mousemove', onMouseMove)function onMouseMove(e){const mouse = { x : (e.clientX / renderer.domElement.clientWidth) * 2 - 1, y : -(e.clientY / renderer.domElement.clientHeight) * 2 + 1,}raycaster.setFromCamera(mouse, camera)const intersects = raycaster.intersectObjects(scene.children, true);if(inter.. 2024. 7. 19. OBJLoader(), MTLLoader(). 블렌더에서 파일 가져오기 블렌더에서 -> 형태인 obj 와 재질인 mtl 파일로 export 하여 가져옴. 처음에 아무것도 안보여서 다른 개체를 다 삭제함. 그래도 안보여서 스케일을 1000배 키웠더니 검게 형태만 보임.빛을 추가하고 세기를 키웠더니 그제서야 보임 // OBJ Loaderconst OBJloader = new OBJLoader() // MTLLoader에서 로드한 materials 파일을 설정합니다.let ObjGroup = new THREE.Object3D()// MTL Loaderconst mtlLoader = new MTLLoader()mtlLoader.load('../static/img/lemon.mtl', (mtl) => {mtl.preload()OBJloader.setMaterials(mtl);OBJl.. 2024. 7. 19. threejs GLTFloader.load() 블렌더에서 파일 가져오기 블랜드에서 파일을 gltf 확장자로 export 한후 가져옴 로드import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // GLTF loader const GLTFMaterial = new THREE.MeshPhysicalMaterial({ clearcoat: 0.9, clearcoatRoughness:0.1, metalness: 0.9, roughness:0.5, color: 0xd11b1b, envMap: envmap.texture, }) const GLTFloader = new GLTFLoader() let GLTFObjGroup = new THREE.Ob.. 2024. 7. 19. threejs skybox 배경 // 하늘 시작 배열 const skyMaterialArray = [] const texture_ft = new THREE.TextureLoader().load( '../static/img/skybox_front.png') const texture_bk = new THREE.TextureLoader().load( '../static/img/skybox_back.png') const texture_up = new THREE.TextureLoader().load( '../static/img/skybox_up.png') const texture_dn = new THREE.TextureLoader().load( '../static/img/skybox_down.png') const texture_r.. 2024. 7. 18. threejs Fog() 안개 const FogColor = 0x0d99cd;scene.background = new THREE.Color(FogColor);// scene.fog = new THREE.Fog(FogColor, 150, 1000); //색상, 가까운, 멀리scene.fog = new THREE.FogExp2(FogColor, 0.0015); // 밀도 2024. 7. 18. OrbitControls(), 마우스휠 확대축소 제한, 로테이션 제한 2024. 7. 18. threejs 텍스처 2024. 7. 18. threejs cdn으로 사용하기 세팅 소스는 여기서 다운 https://github.com/mrdoob/three.js/releases/tag/r166 Release r166 · mrdoob/three.jshttps://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 이미지는 여기서 다운 https://polyhaven.com/hdris HDRIs • Poly HavenPreviously known as HDRI Haven. .. 2024. 7. 8. 이전 1 다음
