웹 페이지에 버튼 누를 때마다 다른 .glb 파일(3D) 보이는 기능 구현 질문
본문
현재 위에 이미지처럼 웹 페이지에 .glb를 보여주는 것까지는 구현하였습니다.
이제 버튼를 누를 때마다 다른 glb 파일을 불러와서 버튼마다 다른 3D 모델을 보여주고 싶은데
어떻게 해야할지 도저히 감이 오지 않아 질문합니다!
body에 아래 코드 넣고 실행하면 웹페이지에 버튼만 뜨고 아무것도 뜨지 않습니다.
<style>
#c {
width: 100%;
height: 100%;
display: block;
}
</style>
<button id="show_3d1" onclick="show_3d1()">모양1</button>
<button id="show_3d2" onclick="show_3d2()">모양2</button>
<canvas id="c"></canvas>
<script type="module">
function show_3d1() {
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/loaders/GLTFLoader.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 45;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 10, 20);
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();
const scene = new THREE.Scene();
scene.background = new THREE.Color('#fffff0'); //배경색
{
const planeSize = 40; //바닥 사이즈 결정
const loader = new THREE.TextureLoader();
const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png'); //바닥 이미지
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.magFilter = THREE.NearestFilter;
const repeats = planeSize / 20; //체크 바닥 사용할거면 필요
texture.repeat.set(repeats, repeats);
const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
map: texture,
side: THREE.DoubleSide
});
//아래 코드 지우면 바닥 없어짐
// const mesh = new THREE.Mesh(planeGeo, planeMat);
// mesh.rotation.x = Math.PI * -.5;
// scene.add(mesh);
}
//바닥색 설정
{
const skyColor = 0xB1E1FF; // light blue
const groundColor = 0xB97A20; // brownish orange(바닥 밑면)
const intensity = 1;
const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);
}
//light 색 설정
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(5, 10, 2);
scene.add(light);
scene.add(light.target);
}
//3D 모델 불러오는 코드
const gltfLoader = new GLTFLoader();
gltfLoader.load('./3D/basic_cylinder_cake.glb', (gltf) => {
const root = gltf.scene;
scene.add(root); //여기까지
});
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
}
function show_3d2() {
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/loaders/GLTFLoader.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 45;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 10, 20);
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();
const scene = new THREE.Scene();
scene.background = new THREE.Color('#fffff0'); //배경색
{
const planeSize = 40; //바닥 사이즈 결정
const loader = new THREE.TextureLoader();
const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png'); //바닥 이미지
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.magFilter = THREE.NearestFilter;
const repeats = planeSize / 20; //체크 바닥 사용할거면 필요
texture.repeat.set(repeats, repeats);
const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
map: texture,
side: THREE.DoubleSide
});
//아래 코드 지우면 바닥 없어짐
// const mesh = new THREE.Mesh(planeGeo, planeMat);
// mesh.rotation.x = Math.PI * -.5;
// scene.add(mesh);
}
//바닥색 설정
{
const skyColor = 0xB1E1FF; // light blue
const groundColor = 0xB97A20; // brownish orange(바닥 밑면)
const intensity = 1;
const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);
}
//light 색 설정
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(5, 10, 2);
scene.add(light);
scene.add(light.target);
}
//3D 모델 불러오는 코드
const gltfLoader = new GLTFLoader();
gltfLoader.load('./3D/basic_square_cake.glb', (gltf) => {
const root = gltf.scene;
scene.add(root); //여기까지
});
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
}
</script>
답변 2
중복 제거
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/loaders/GLTFLoader.js';
function show_3d1() {
:
}
function show_3d1() {
:
}
window.show_3d1 = show_3d1;
window.show_3d2 = show_3d2;
어차피 중복이니, 함수 하나만 남기고, glb 파일명을 넘기는 것이 낫겠네요.
와... 오늘 새벽부터 못하고 있었는데 덕분에 해결했어요 너무 감사합니다!
URL이 있으면 좋겠지만
그 버튼이라는 누르면
//3D 모델 불러오는 코드
const gltfLoader = new GLTFLoader();
gltfLoader.load('./3D/basic_square_cake.glb', (gltf) => {
const root = gltf.scene;
scene.add(root); //여기까지
});
이 부분을 한번 더 실행하게 하면 되지 않을까요?
답변을 작성하시기 전에 로그인 해주세요.
