블렌더에서 웹페이지로 ( 성공! )

안 보이시면 여쪽으로~ 🥼👖🥼👖 http://dreamplan7.cafe24.com/canvas7/canvas4.htm

블렌더3D에서 glTF 라는 형식으로 내보내기라는 형식이 있는데,
자바스크립트 라이브러리 three.js 에서 이를 그대로 읽어 올 수 있다는 해외 게시글을 보고 따라해보았습니다.

시도해보니 티스토리에서 적용이 되는군요! 앞으로 티스토리에서 더 재미난 걸 할 수 있을것 같습니다 :)

< 블랜더 모델링 화면 >

 

< 출력할 항목을 선택 하여 내보내기 >

불러오는 자바스크립트 소스 ( 티스토리용 )

<script src="https://threejs.org/build/three.min.js"></script>
<script src="http://dreamplan7.cafe24.com/canvas7/js/GLTFLoader.js"></script>
<!-- 캔버스 -->
<canvas id="MyCanvas" width=640 height=180></canvas>
<script>
    const renderer = new THREE.WebGLRenderer( { canvas: MyCanvas } );
    const camera = new THREE.PerspectiveCamera(50, 640 / 180, 1, 1000);
    const scene = new THREE.Scene();
    let Mesh;
    let light;
    let light_sun;

    function init() {
        scene.background = new THREE.Color('black');
        camera.position.set(5, 14, 18);
        camera.lookAt( 0.5, 10, 16 );
        // renderer.setSize(window.innerWidth, window.innerHeight);
        // document.body.appendChild(renderer.domElement);
    }

    function setLight() {
        light = new THREE.AmbientLight(0xffffff); // soft white light
        scene.add(light);
        
        light_sun = new THREE.DirectionalLight ( 0x808080, 1.0 );
          var shadowBlur=10;
          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 loadGLTF() {
        let balloonLoader = new THREE.GLTFLoader();

        balloonLoader.load('http://dreamplan7.cafe24.com/canvas7/model/City1.glb', (gltf) => {
            Mesh = gltf.scene;
            Mesh.scale.set(1,1,1);
            scene.add(Mesh);
            Mesh.position.x = 0;
            Mesh.position.y = 10;
            Mesh.position.z = 15;
        });
    }

    function animate() {
        requestAnimationFrame(animate);
        if (Mesh && Mesh.rotation) {
            Mesh.rotation.y -= 0.001;
        }
        
        // 카메라 컨트롤러 추가
        //let controls = new THREE.OrbitControls (camera, renderer.domElement);
        //controls.update();
      
        renderer.render(scene, camera);
    }

    init();
    setLight();
    loadGLTF();
    animate();
</script>

 

내가 만든 모델을 올리고 싶어요!

 

블렌더에서 내보내기하신 glTF 파일을 웹상의 어딘가에 파일을 올리신 다음에,
아래 소스중 http://dreamplan7.cafe24.com/canvas7/model/City1.glb 를 바꿔주시면 됩니다 :)

balloonLoader.load('http://dreamplan7.cafe24.com/canvas7/model/City1.glb', (gltf) => {

---

필요하신 분께 도움이 되셨을지요 :)
방문해주시는 모든 분들께 늘 감사드립니다.

유익하셨다면 공감 한방, 댓글은 굿잡!
감사합니다~