3D 이미지 head.php > 그누보드

• 목록
• 답변
• 글쓰기

<!-- E: 메이플 마뇽 -->
            <div>
                <canvas id="canvas-manon" width="300" height="400"></canvas>
                <script type="importmap">
                    {
                        "imports": {
                            "three": "three@0.141.0/build/three.module.js"," TARGET="_blank" rel="nofollow">https://unpkg.com/three@0.141.0/build/three.module.js",
                            "GLTFLoader" : "three@0.141.0/examples/jsm/loaders/GLTFLoader.js"" TARGET="_blank" rel="nofollow">https://unpkg.com/three@0.141.0/examples/jsm/loaders/GLTFLoader.js"
                        }
                    }
                </script>

                <script type="module">
                    import {GLTFLoader} from 'GLTFLoader';
                    import * as THREE from 'three';

                    let scene = new THREE.Scene();
                    let renderer = new THREE.WebGLRenderer({
                        canvas : document.querySelector('#canvas-manon'),
                        antialias : true
                    });
                    renderer.outputEncoding = THREE.sRGBEncoding;
                  // renderer.setSize(150, 200);


                  //let camera = new THREE.PerspectiveCamera(30,1);
                  //let camera = new THREE.PerspectiveCamera(50, 600 / 800);
                    let camera = new THREE.PerspectiveCamera(11, 300 / 400);
                    camera.position.set(0,0,100);

                    scene.background = new THREE.Color('white');
                    //let light = new THREE.DirectionalLight(0xeeee88, 4);

                    let light = new THREE.DirectionalLight(0xeeee88, 2);
                    scene.add(light);

                    let loader = new GLTFLoader();
                    loader.load('https://sein.quail.kr/theme/community/img/maplestory/scene.gltf', function(gltf){
                        scene.add(gltf.scene)
                        renderer.render(scene, camera)
                        function animate(){
                            requestAnimationFrame(animate);
                            gltf.scene.rotation.y -= 0.02;
                            renderer.render(scene, camera);
                        }
                        animate();
                    });
                </script>
            </div>
            <!-- S: 메이플 마뇽 -->