jsp 에서는 아래와같이 작성해주고
3d 모델파일은 블랜더에서 glb파일로 export 하였다
<head>
<script type="module" src="../build/three.module.js"></script>
</head>
<body>
<div id="container"></div>
<script type="module">
import * as THREE from '../js/aa/build/three.module.js';
import { OrbitControls } from '../js/aa/example/jsm/controls/OrbitControls.js';
import { RoomEnvironment } from '../js/aa/example/jsm/environments/RoomEnvironment.js';
import { GLTFLoader } from '../js/aa/example/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '../js/aa/example/jsm/loaders/DRACOLoader.js';
const container = document.getElementById('container');
const renderer = new THREE.WebGLRenderer({ antialias: true });
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, 1, 1, 100);
camera.position.set(4, 2, 8);
let Mesh; // 이 부분을 추가
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(600, 600);
container.appendChild(renderer.domElement);
function init() {
scene.background = new THREE.Color('white');
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0).texture;
// 부모 요소의 가로 길이를 기준으로 canvas 크기 설정
window.onresize = function () {
const containerWidth = container.clientWidth;
camera.aspect = containerWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(containerWidth, container.clientHeight);
};
}
function control() {
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(1, 2, 0);
controls.update();
controls.enablePan = false;
controls.enableDamping = true;
// 중심점 계산
const boundingBox = new THREE.Box3().setFromObject(Mesh);
const center = boundingBox.getCenter(new THREE.Vector3());
// 중심점을 중심으로 카메라를 조정
controls.target.copy(center);
camera.position.set(center.x + 5, center.y + 2, center.z + 8);
controls.update();
}
function loadGLTF() {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('../aaa/');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(dracoLoader.decoderPath + 'modelingfile.glb', function (gltf) {
Mesh = gltf.scene;
Mesh.position.set(0, 0, 0);
Mesh.scale.set(2, 2, 2);
control();
scene.add(Mesh);
}, undefined, function (e) {
console.error(e);
});
}
function setLight() {
let light_sun;
light_sun = new THREE.DirectionalLight(new THREE.Color('#7f7b58'), 0.1); // 노란빛으로 변경
var shadowBlur = 0.8;
light_sun.castShadow = true;
light_sun.shadow.camera.left = -shadowBlur;
light_sun.shadow.camera.right = shadowBlur;
light_sun.shadow.camera.top = shadowBlur;
light_sun.shadow.camera.bottom = -shadowBlur;
scene.add(light_sun);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
setLight();
loadGLTF();
animate();
</script>
</body>
three.min.js 안에서도 경로를 맞게 변경해줘야함
분명 jsp에서 경로 똑바르게 써줬는데도
크롬 콘솔로 확인해보니 계속 not found 에러가 남
확인해보니 three.min.js를 사용하는 다른 모듈에서
three.min.js import를 하는 과정에서 경로들이 다 맞지 않는거였음
예를들면
OrbitControls.js 에서 import 하는 부분 코드를 보자
import {
EventDispatcher,
MOUSE,
Quaternion,
Spherical,
TOUCH,
Vector2,
Vector3,
Plane,
Ray,
MathUtils
} from '../../../build/three.module.js';
// OrbitControls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
//
// Orbit - left mouse / touch: one-finger move
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
const _changeEvent = { type: 'change' };
const _startEvent = { type: 'start' };
const _endEvent = { type: 'end' };
.
.
.저기 from 이후 경로를 확실히 맞춰줘야함
반응형
'웹 개발 > 🎆 JSP' 카테고리의 다른 글
| Apache Tomcat 버전에 따른 JSP, Servlet 버전 (0) | 2024.03.25 |
|---|---|
| 전자정부 Spring 3.1버전 인터셉터로 로그인 세션체크 (0) | 2024.03.19 |
| JSP | postman,REST,JSON, Java CRAWLING (0) | 2022.12.05 |
| JSP | 사진첨부파일 업로드,수정,삭제 가능한 게시판 (0) | 2022.12.04 |
| JSP | JSP영역,EL표현식,JSTL,Maven,fileupload (0) | 2022.11.30 |
