Simple interactive CAD-model in browser with three.js
Loading simple .dae-SketchUp-model (colored cube) in (WebGL provided) browser with main scaling- and rotating-functions using Three.js and HTML of course.
HTML
<script src="https://www.tu-cottbus.de/owncloud/remote.php/webdav/JSFiddle/03_Kubus.dae"></script>
<div id="container"></div>
<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/ColladaLoader.js"></script>
<!-- <script src="https://raw.githubusercontent.com/shelbyspeegle/threejs-13365/master/ColladaLoader.js"></script> -->
<script src="http://mrdoob.github.com/three.js/examples/js/Detector.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/libs/stats.min.js"></script>
<script src="http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js"></script>
CSS
body {background-color: #000000;}
JavaScript
var container, stats;
var camera, scene, renderer, controls, objects;
var particleLight;
var dae;
var loader = new THREE.ColladaLoader();
loader.load( 'https://raw.githubusercontent.com/shelbyspeegle/threejs-13365/master/source-model.dae', function ( collada ) {
dae = collada.scene;
console.clear();
console.log('expected this object to have name "Element entry-door-handle":', dae.children[0].children);
init();
render();
} );
function animate() {
requestAnimationFrame(animate);
controls.update();
}
function init() {
scene = new THREE.Scene();
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 2;
controls = new THREE.OrbitControls( camera );
controls.enableZoom = false;
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// Add the COLLADA
scene.add( dae );
// Lights
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.add( light );
light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
controls.addEventListener('change', render);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
...