Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active July 15, 2018 20:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nitaku/1d673374f890d833b421 to your computer and use it in GitHub Desktop.
Save nitaku/1d673374f890d833b421 to your computer and use it in GitHub Desktop.
Download ZIP
Three.js COLLADA loading
Raw
README.md

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

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.

Raw
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)
Raw
index.css
html, body {
margin: 0;
padding: 0;
}
svg path {
shape-rendering: crispEdges;
}
Raw
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>
Raw
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);
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment