WebGL, Three.js and Babylon.js Three.js COLLADA loading

2017.07.03 20:37

졸리운_곰 조회 수:574

 

Three.js COLLADA loading

Open

A rendering of a COLLADA file in three.js (release 69 - r71 produces jagged edges in our attempts).

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

WebGL is used to actually render the scene. Attempting to use Canvas or SVG renderers results in an issue with Hidden Surface Detrermination, causing artifacts to be displayed above the elongated thin face of the colored object.

index.html#

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js Collada loading </title>
<link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r69/examples/js/loaders/ColladaLoader.js"></script>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

index.coffee#

width = 960
height = 500
aspect = width/height
D = 8

scene = new THREE.Scene()
camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000)

renderer = new THREE.WebGLRenderer
  alpha: true

renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

# create two cubes
material = new THREE.MeshPhongMaterial
#   ambient: 0x555555
#   color: 0x555555
#   specular: 0xffffff
#   shininess: 50
#   shading: THREE.SmoothShading
#   side: THREE.DoubleSde
  wireframe: true

# geometry = new THREE.BoxGeometry(1,1,1)
# cube = new THREE.Mesh(geometry, material)
# scene.add(cube)

# lil_geometry = new THREE.BoxGeometry(0.2,0.2,0.2)
# lil_cube = new THREE.Mesh(lil_geometry, material)
# lil_cube.position.x = 1
# scene.add(lil_cube)

# create the light
light = new THREE.DirectionalLight(0xffffff, 1.1)
light.position.set(10, 20, 15)
scene.add(light)

# set the camera
camera.position.set(20, 20, 20)
camera.lookAt(new THREE.Vector3( 0, 0, 0 ))
camera.rotation.z = 5/6*Math.PI


# load DAE
loader = new THREE.ColladaLoader()
# loader.options.convertUpAxis = true
loader.load 'scene.dae', (collada) ->  
  collada.scene.scale.set(0.1,0.1,0.1)
  scene.add collada.scene
  renderer.render(scene, camera)

index.css#

html, body {
  margin: 0;
  padding: 0;
}

svg path {
  shape-rendering: crispEdges;
}

index.js#

// Generated by CoffeeScript 1.4.0
(function() {
  var D, aspect, camera, height, light, loader, material, renderer, scene, width;

  width = 960;

  height = 500;

  aspect = width / height;

  D = 8;

  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);

  renderer = new THREE.WebGLRenderer({
    alpha: true
  });

  renderer.setSize(width, height);

  document.body.appendChild(renderer.domElement);

  material = new THREE.MeshPhongMaterial({
    wireframe: true
  });

  light = new THREE.DirectionalLight(0xffffff, 1.1);

  light.position.set(10, 20, 15);

  scene.add(light);

  camera.position.set(20, 20, 20);

  camera.lookAt(new THREE.Vector3(0, 0, 0));

  camera.rotation.z = 5 / 6 * Math.PI;

  loader = new THREE.ColladaLoader();

  loader.load('scene.dae', function(collada) {
    collada.scene.scale.set(0.1, 0.1, 0.1);
    scene.add(collada.scene);
    return renderer.render(scene, camera);
  });

}).call(this);

scene.dae#

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
    <asset>
        <contributor>
            <authoring_tool>SketchUp 15.3.331</authoring_tool>
        </contributor>
        <created>2015-07-21T18:28:51Z</created>
        <modified>2015-07-21T18:28:51Z</modified>
        <unit meter="0.0254" name="inch" />
        <up_axis>Z_UP</up_axis>
    </asset>
    <library_visual_scenes>
        <visual_scene id="ID1">
            <node name="SketchUp">
                <instance_geometry url="#ID2">
                    <bind_material>
                        <technique_common>
                            <instance_material symbol="Material2" target="#ID4">
                                <bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
                            </instance_material>
                        </technique_common>
                    </bind_material>
                </instance_geometry>
                <instance_geometry url="#ID10">
                    <bind_material>
                        <technique_common>
                            <instance_material symbol="Material2" target="#ID4">
                                <bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
                            </instance_material>
                            <instance_material symbol="Material3" target="#ID11">
                                <bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
                            </instance_material>
                        </technique_common>
                    </bind_material>
                </instance_geometry>
                <instance_geometry url="#ID18">
                    <bind_material>
                        <technique_common>
                            <instance_material symbol="Material2" target="#ID4">
                                <bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
                            </instance_material>
                        </technique_common>
                    </bind_material>
                </instance_geometry>
            </node>
        </visual_scene>
    </library_visual_scenes>
    <library_geometries>
        <geometry id="ID2">
            <mesh>
                <source id="ID5">
                    <float_array id="ID8" count="210">39.37008 39.37008 0 0 0 0 0 39.37008 0 39.37008 0 0 39.37008 0 0 39.37008 13.12336 7.480315 39.37008 0 39.37008 39.37008 39.37008 0 39.37008 39.37008 7.480315 39.37008 13.12336 39.37008 39.37008 0 39.37008 0 0 0 39.37008 0 0 0 0 39.37008 0 39.37008 39.37008 0 0 0 0 0 39.37008 0 39.37008 0 0 39.37008 0 13.12336 39.37008 11.81102 39.37008 39.37008 0 0 39.37008 39.37008 26.24672 39.37008 7.480315 13.12336 39.37008 39.37008 26.24672 39.37008 11.81102 39.37008 39.37008 7.480315 26.24672 13.12336 7.480315 26.24672 39.37008 7.480315 26.24672 26.24672 7.480315 39.37008 39.37008 7.480315 39.37008 13.12336 7.480315 13.12336 13.12336 39.37008 26.24672 13.12336 19.68504 13.12336 13.12336 19.68504 39.37008 13.12336 7.480315 26.24672 13.12336 7.480315 39.37008 13.12336 39.37008 0 0 39.37008 13.12336 13.12336 39.37008 0 39.37008 39.37008 39.37008 0 39.37008 13.12336 39.37008 39.37008 39.37008 13.12336 39.37008 13.12336 39.37008 11.81102 13.12336 26.24672 19.68504 13.12336 26.24672 11.81102 13.12336 13.12336 39.37008 13.12336 13.12336 19.68504 13.12336 39.37008 39.37008 26.24672 26.24672 11.81102 13.12336 39.37008 11.81102 13.12336 26.24672 11.81102 26.24672 39.37008 11.81102 26.24672 39.37008 7.480315 26.24672 26.24672 11.81102 26.24672 26.24672 7.480315 26.24672 39.37008 11.81102 26.24672 26.24672 7.480315 26.24672 13.12336 19.68504 26.24672 13.12336 7.480315 26.24672 26.24672 19.68504 26.24672 26.24672 11.81102 13.12336 13.12336 19.68504 26.24672 26.24672 19.68504 13.12336 26.24672 19.68504 26.24672 13.12336 19.68504 13.12336 26.24672 19.68504 26.24672 26.24672 11.81102 13.12336 26.24672 11.81102 26.24672 26.24672 19.68504</float_array>
                    <technique_common>
                        <accessor count="70" source="#ID8" stride="3">
                            <param name="X" type="float" />
                            <param name="Y" type="float" />
                            <param name="Z" type="float" />
                        </accessor>
                    </technique_common>
                </source>
                <source id="ID6">
                    <float_array id="ID9" count="210">0 0 -1 0 0 -1 0 0 -1 0 0 -1 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 1 6.678278e-017 -5.976088e-018 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 1 0 0 1 0 0 1 0 0 1 0 0 1 2.707168e-016 -0 1 2.707168e-016 -0 1 2.707168e-016 -0 1 2.707168e-016 -0 1 2.707168e-016 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0</float_array>
                    <technique_common>
                        <accessor count="70" source="#ID9" stride="3">
                            <param name="X" type="float" />
                            <param name="Y" type="float" />
                            <param name="Z" type="float" />
                        </accessor>
                    </technique_common>
                </source>
                <vertices id="ID7">
                    <input semantic="POSITION" source="#ID5" />
                    <input semantic="NORMAL" source="#ID6" />
                </vertices>
                <triangles count="42" material="Material2">
                    <input offset="0" semantic="VERTEX" source="#ID7" />
                    <p>0 1 2 1 0 3 4 5 6 5 4 7 5 7 8 9 6 5 10 11 12 11 10 13 14 15 16 15 14 17 18 19 20 19 18 21 20 19 22 19 21 23 24 22 19 25 20 22 26 27 28 27 26 29 29 26 30 31 32 33 32 34 35 34 32 36 36 32 31 37 38 39 38 37 40 39 38 41 38 40 42 43 44 45 44 46 47 46 44 48 48 44 43 49 50 51 50 49 52 53 54 55 54 53 56 57 58 59 58 57 60 60 57 61 62 63 64 63 62 65 66 67 68 67 66 69</p>
                </triangles>
            </mesh>
        </geometry>
        <geometry id="ID10">
            <mesh>
                <source id="ID13">
                    <float_array id="ID16" count="228">41.18147 59.41722 12.59843 41.18147 -27.98435 0 41.18147 -27.98435 12.59843 41.18147 59.41722 0 41.18147 59.41722 0 42.59173 55.58378 0 41.18147 -27.98435 0 82.91375 59.41722 0 77.6311 55.58378 0 77.6311 -23.94378 0 42.59173 -23.94378 0 82.91375 -27.98435 0 82.91375 -27.98435 12.59843 41.18147 -27.98435 0 82.91375 -27.98435 0 41.18147 -27.98435 12.59843 41.18147 -27.98435 12.59843 42.59173 -23.94378 12.59843 41.18147 59.41722 12.59843 82.91375 -27.98435 12.59843 77.6311 -23.94378 12.59843 77.6311 55.58378 12.59843 69.23864 59.41722 12.59843 69.23864 55.58378 12.59843 82.91375 59.41722 12.59843 42.59173 55.58378 12.59843 53.56141 59.41722 12.59843 53.56141 55.58378 12.59843 41.18147 59.41722 0 53.56141 59.41722 4.724409 82.91375 59.41722 0 41.18147 59.41722 12.59843 53.56141 59.41722 12.59843 69.23864 59.41722 4.724409 82.91375 59.41722 12.59843 69.23864 59.41722 12.59843 82.91375 59.41722 0 82.91375 -27.98435 12.59843 82.91375 -27.98435 0 82.91375 59.41722 12.59843 77.6311 55.58378 0 69.23864 55.58378 4.724409 42.59173 55.58378 0 77.6311 55.58378 12.59843 69.23864 55.58378 12.59843 53.56141 55.58378 4.724409 42.59173 55.58378 12.59843 53.56141 55.58378 12.59843 53.56141 59.41722 4.724409 53.56141 55.58378 12.59843 53.56141 55.58378 4.724409 53.56141 59.41722 12.59843 69.23864 59.41722 12.59843 69.23864 55.58378 4.724409 69.23864 55.58378 12.59843 69.23864 59.41722 4.724409 77.6311 55.58378 12.59843 77.6311 -23.94378 0 77.6311 -23.94378 12.59843 77.6311 55.58378 0 42.59173 -23.94378 12.59843 77.6311 -23.94378 0 42.59173 -23.94378 0 77.6311 -23.94378 12.59843 42.59173 55.58378 0 42.59173 -23.94378 12.59843 42.59173 -23.94378 0 42.59173 55.58378 12.59843 69.23864 55.58378 4.724409 53.56141 59.41722 4.724409 53.56141 55.58378 4.724409 69.23864 59.41722 4.724409 77.6311 -23.94378 0 77.6311 55.58378 0 42.59173 -23.94378 0 42.59173 55.58378 0</float_array>
                    <technique_common>
                        <accessor count="76" source="#ID16" stride="3">
                            <param name="X" type="float" />
                            <param name="Y" type="float" />
                            <param name="Z" type="float" />
                        </accessor>
                    </technique_common>
                </source>
                <source id="ID14">
                    <float_array id="ID17" count="228">-1 0 0 -1 0 0 -1 0 0 -1 0 0 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 -1 0 0 -1 0 0 -1 0 0 -1 0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1</float_array>
                    <technique_common>
                        <accessor count="76" source="#ID17" stride="3">
                            <param name="X" type="float" />
                            <param name="Y" type="float" />
                            <param name="Z" type="float" />
                        </accessor>
                    </technique_common>
                </source>
                <vertices id="ID15">
                    <input semantic="POSITION" source="#ID13" />
                    <input semantic="NORMAL" source="#ID14" />
                </vertices>
                <triangles count="50" material="Material3">
                    <input offset="0" semantic="VERTEX" source="#ID15" />
                    <p>0 1 2 1 0 3 4 5 6 5 4 7 5 7 8 8 7 9 6 10 11 10 6 5 11 10 9 11 9 7 12 13 14 13 12 15 16 17 18 17 16 19 17 19 20 20 19 21 21 22 23 22 21 24 24 21 19 18 25 26 25 18 17 26 25 27 28 29 30 29 28 31 29 31 32 30 33 34 33 30 29 34 33 35 36 37 38 37 36 39 40 41 42 41 40 43 41 43 44 42 45 46 45 42 41 46 45 47 48 49 50 49 48 51 52 53 54 53 52 55 56 57 58 57 56 59 60 61 62 61 60 63 64 65 66 65 64 67 68 69 70 69 68 71 72 73 74 75 74 73</p>
                </triangles>
                <triangles count="2" material="Material2">
                    <input offset="0" semantic="VERTEX" source="#ID15" />
                    <p>8 10 5 10 8 9</p>
                </triangles>
            </mesh>
        </geometry>
        <geometry id="ID18">
            <mesh>
                <source id="ID19">
                    <float_array id="ID22" count="126">31.25294 64.1196 0 0.5442762 46.79676 0 0.5442762 64.1196 0 31.25294 46.79676 0 0.5442762 64.1196 33.85827 0.5442762 46.79676 0 0.5442762 46.79676 33.85827 0.5442762 64.1196 0 0.5442762 64.1196 33.85827 31.25294 64.1196 0 0.5442762 64.1196 0 17.86711 64.1196 17.71654 17.86711 64.1196 33.85827 31.25294 64.1196 17.71654 31.25294 46.79676 0 31.25294 49.55267 17.71654 31.25294 46.79676 33.85827 31.25294 64.1196 0 31.25294 64.1196 17.71654 31.25294 49.55267 33.85827 31.25294 46.79676 33.85827 0.5442762 46.79676 0 31.25294 46.79676 0 0.5442762 46.79676 33.85827 0.5442762 46.79676 33.85827 17.86711 49.55267 33.85827 0.5442762 64.1196 33.85827 31.25294 46.79676 33.85827 31.25294 49.55267 33.85827 17.86711 64.1196 33.85827 17.86711 64.1196 17.71654 17.86711 49.55267 33.85827 17.86711 49.55267 17.71654 17.86711 64.1196 33.85827 31.25294 49.55267 17.71654 17.86711 64.1196 17.71654 17.86711 49.55267 17.71654 31.25294 64.1196 17.71654 17.86711 49.55267 33.85827 31.25294 49.55267 17.71654 17.86711 49.55267 17.71654 31.25294 49.55267 33.85827</float_array>
                    <technique_common>
                        <accessor count="42" source="#ID22" stride="3">
                            <param name="X" type="float" />
                            <param name="Y" type="float" />
                            <param name="Z" type="float" />
                        </accessor>
                    </technique_common>
                </source>
                <source id="ID20">
                    <float_array id="ID23" count="126">0 0 -1 0 0 -1 0 0 -1 0 0 -1 -1 0 0 -1 0 0 -1 0 0 -1 0 0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -1 -0 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 1 1 -0 -0 1 -0 -0 1 -0 -0 1 -0 -0 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0</float_array>
                    <technique_common>
                        <accessor count="42" source="#ID23" stride="3">
                            <param name="X" type="float" />
                            <param name="Y" type="float" />
                            <param name="Z" type="float" />
                        </accessor>
                    </technique_common>
                </source>
                <vertices id="ID21">
                    <input semantic="POSITION" source="#ID19" />
                    <input semantic="NORMAL" source="#ID20" />
                </vertices>
                <triangles count="24" material="Material2">
                    <input offset="0" semantic="VERTEX" source="#ID21" />
                    <p>0 1 2 1 0 3 4 5 6 5 4 7 8 9 10 9 8 11 11 8 12 13 9 11 14 15 16 15 14 17 15 17 18 19 16 15 20 21 22 21 20 23 24 25 26 25 24 27 25 27 28 29 26 25 30 31 32 31 30 33 34 35 36 35 34 37 38 39 40 39 38 41</p>
                </triangles>
            </mesh>
        </geometry>
    </library_geometries>
    <library_materials>
        <material id="ID4" name="material">
            <instance_effect url="#ID3" />
        </material>
        <material id="ID11" name="_0079_Teal">
            <instance_effect url="#ID12" />
        </material>
    </library_materials>
    <library_effects>
        <effect id="ID3">
            <profile_COMMON>
                <technique sid="COMMON">
                    <lambert>
                        <diffuse>
                            <color>1 1 1 1</color>
                        </diffuse>
                    </lambert>
                </technique>
            </profile_COMMON>
        </effect>
        <effect id="ID12">
            <profile_COMMON>
                <technique sid="COMMON">
                    <lambert>
                        <diffuse>
                            <color>0 0.5019608 0.5019608 1</color>
                        </diffuse>
                    </lambert>
                </technique>
            </profile_COMMON>
        </effect>
    </library_effects>
    <scene>
        <instance_visual_scene url="#ID1" />
    </scene>
</COLLADA>

 

[출처] http://bl.ocks.org/nitaku/1d673374f890d833b421

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
번호 제목 글쓴이 날짜 조회 수
54 javascript : js Array에서 한 원소 삭제 : JavaScript: Remove Element from an Array 졸리운_곰 2018.05.24 323
53 [자바스크립트] 동일한 단어를 문자열에서 찾기, match() 함수 file 졸리운_곰 2018.05.24 346
52 Javascript 함수 생성 2가지 방법의 차이점 file 졸리운_곰 2018.05.24 498
51 React 시작하기 [javascript] 졸리운_곰 2018.05.20 509
50 javascript 에서 큐, 스택, 트리 졸리운_곰 2018.02.27 513
49 CKEditor. Plugin 직접 만들기. 예: Cy-GistInsert file 졸리운_곰 2018.02.21 459
48 템플릿 엔진을 벗어나고 싶은 이유, React 와 Angular 2 사이의 갈등 중간 정리 졸리운_곰 2017.09.26 1354
47 [CSS 기초] DIV 태그를 이용하여 프레임 나누기 file 졸리운_곰 2017.08.25 496
46 jQuery 스타일 & 속성 다루기 file 졸리운_곰 2017.08.25 597
45 Cross-origin resource sharing file 졸리운_곰 2017.08.05 403
44 HTTP 접근 제어 (CORS) 졸리운_곰 2017.08.05 290
43 자바스크립트 문자열 비교 예제; 대소 문자 구분/구분 없이 졸리운_곰 2017.07.22 1285
42 [javascript] hashtable 같은 key=value 예제 졸리운_곰 2017.07.22 484
41 Three.js-Object-Rotation-with-Quaternion file 졸리운_곰 2017.07.08 435
40 Javascript [자바스크립트] 변수 선언과 유효범위 졸리운_곰 2017.07.08 582
39 remove-innerhtml-from-div 태그 안의 html코드 삭제 졸리운_곰 2017.07.08 633
38 HTML5 동영상 임베딩 졸리운_곰 2017.06.18 421
37 Javascript 문자열을 실수(부동소수점) 변수로 변환 가을의곰 2017.06.10 518
36 HTML div 왼쪽, 오른쪽 배치 가을의곰 2017.06.10 493
35 HTML DIV tag: 테두리 너비 지정하는 방법 - WIDTH : 픽셀(px) 또는 퍼센트(%) file 가을의곰 2017.06.10 827
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED