JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//threejs.org/build/three.min.js"></script>
<script src="//threejs.org/examples/js/loaders/ColladaLoader.js"></script>
CSS
body {
margin: 0;
overflow: hidden;
}
JavaScript
var camera, scene, renderer;
var geometry, material, mesh;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.ColladaLoader;
mesh = loader.parse( dae() ).scene;
mesh.scale.multiplyScalar(42);
mesh.traverse( function(o){
// overwrite material to make it visible
if(o.material)o.material = new THREE.MeshBasicMaterial({
color: 0xff00, skinning: true, wireframe: true
})
});
scene.add( mesh );
// render once
renderer.render(scene, camera);
// render twice - no green cube before this happens
setTimeout (function () { renderer.render(scene, camera) }, 2017);
function dae() {
return `<?xml version="1.0" encoding="utf-8"?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
<asset>
<contributor>
<author>Blender User</author>
<authoring_tool>Blender 2.74.0 commit date:2015-03-31, commit time:13:39, hash:000dfc0</authoring_tool>
</contributor>
<created>2017-08-17T01:26:13</created>
<modified>2017-08-17T01:26:13</modified>
<unit name="meter" meter="1"/>
<up_axis>Z_UP</up_axis>
</asset>
<library_images/>
<library_effects>
<effect id="Material-effect">
<profile_COMMON>
<technique sid="common">
<phong>
<emission>
<color sid="emission">0 0 0 1</color>
</emission>
<ambient>
<color sid="ambient">0 0 0 1</color>
</ambient>
<diffuse>
...