돈 뽑는 기계

무한으로 돈을 뽑아주는 기계가 있다면 어떨까요?
당장은 좋을지 몰라도 과도한 돈은 재앙이 된다고도 합니다.

적당한 수준에서 잘 관리할 수 있는게 뭐니뭐니해도 딱 좋지요.

그래도 돈을 실컷 눈으로라도 벌어보고 싶은 이웃님들을 위해(?) 만들어 보았습니다 :)

일명 돈 무한 뽑기 기계 3D 웹애니메이션 !

마우스로 클릭하면 이리 저리 돌려보실수 있습니다 :)
블렌더에서 만든 모델과 애니메이션을 자바스크립트 THREE.JS 라이브러리에서 재생해 보았습니다.

안되시면 여쪽으로 오세요~ 🔈🔉🔊 http://dreamplan7.cafe24.com/canvas7/canvas5.htm

아래는 블렌더 모델링 스샷

티스토리용 자바스크립트 소스는 아래와 같습니다.
삼점이 아이콘 - HTML 블록으로 넣으실 수 있어요.

<script src="https://threejs.org/build/three.min.js"></script>
<script src="http://dreamplan7.cafe24.com/canvas7/js/GLTFLoader.js"></script>
<script src="http://dreamplan7.cafe24.com/canvas7/js/OrbitControls.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;
    let mixer;

    function init() {
        scene.background = new THREE.Color('black');
        camera.position.set(1, 2, 2);
        camera.lookAt( 0, 0, 0 );
    }

    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 modelLoader = new THREE.GLTFLoader();

        modelLoader.load('http://dreamplan7.cafe24.com/canvas7/model/pulley.glb', (gltf) => {
            Mesh = gltf.scene;
            Mesh.scale.set(1,1,1);
            scene.add(Mesh);
            Mesh.position.x = 0;
            Mesh.position.y = 0;
            Mesh.position.z = 0;
            mixer = new THREE.AnimationMixer(Mesh);
            const clips = gltf.animations;
            clips.forEach(function(clip) {
                const action = mixer.clipAction(clip);
                action.play();
            });
        });
    }

    const clock = new THREE.Clock();
    
    let controls = new THREE.OrbitControls (camera, renderer.domElement);
    controls.target.set( 0, 0, 0 );
    
    function animate() {
        requestAnimationFrame(animate);
        
        if(mixer)
          mixer.update(clock.getDelta()); 
          
        controls.update();
        renderer.render(scene, camera);
    }

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

---

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

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