New Warehouse 3D Viewer? Any Info?

AndrewS

Does anyone know what is planned for this awesome viewer? I would love and be willing to pay for an unbranded version as well.

I don't understand what you're getting at. Why would you desire to pay for someone else to make an unbranded SketchUp web viewer when you can just embed the official SketchUp viewer that's provided for free?

Are you not aware of how to embed a model in your own website?

juan974

try this :

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>maison - trackball controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color; #000;
				font-family;Monospace;
				font-size;13px;
				text-align;center;
				font-weight; bold;

				background-color; #FFFFCC;
				margin; 0px;
				overflow; hidden;
			}

			#info {
				color;#000;
				position; absolute;
				top; 0px; width; 100%;
				padding; 5px;

			}

			a {
				color; red;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<div id="info">
			<a href="http://www.tarn.us" target="_blank">MAISON TARNUS</a> - trackball controls example</br>
			MOVE mouse &amp; press LEFT; rotate, MIDDLE; zoom, RIGHT; pan
		</div>
	
		
		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>

		<script src="http://threejs.org/build/three.min.js"></script>

		<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
		
		<script src="http://threejs.org/examples/js/loaders/ColladaLoader.js"></script>

		<script src="http://threejs.org/examples/js/Detector.js"></script>
		<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var camera, controls, scene, renderer;

			var cross;
			
			var loader = new THREE.ColladaLoader();
			var dae //, skin;
			loader.options.convertUpAxis = true;
		    //loader.load( './model/maison5.dae', function ( collada ) {
			loader.load( 'https://dl.dropboxusercontent.com/u/3352731/model/maison5.dae', function ( collada ) {

				dae = collada.scene;
				//skin = collada.skins[ 0 ];

				dae.scale.x = dae.scale.y = dae.scale.z = 1;
				dae.updateMatrix();

			init();
			animate();
            });
			function init() {

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.x = 500;
				camera.position.y = 500;
				camera.position.z = 500;

				controls = new THREE.TrackballControls( camera );

				controls.rotateSpeed = 1.0;
				controls.zoomSpeed = 5;
				controls.panSpeed = 0.8;

				controls.noZoom = false;
				controls.noPan = false;

				controls.staticMoving = true;
				controls.dynamicDampingFactor = 0.3;

				controls.keys = [ 65, 83, 68 ];

				controls.addEventListener( 'change', render );

				// world

				scene = new THREE.Scene();
				//scene.fog = new THREE.FogExp2( 0xFFFFFF, 0.0002 );

				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
				var material =  new THREE.MeshLambertMaterial( { color;0xffffff, shading; THREE.FlatShading } );

				//~ for ( var i = 0; i < 500; i ++ ) {
//~ 
					//~ var mesh = new THREE.Mesh( geometry, material );
					//~ mesh.position.x = ( Math.random() - 0.5 ) * 1000;
					//~ mesh.position.y = ( Math.random() - 0.5 ) * 1000;
					//~ mesh.position.z = ( Math.random() - 0.5 ) * 1000;
					//~ mesh.updateMatrix();
					//~ mesh.matrixAutoUpdate = false;
					//~ scene.add( mesh );
//~ 
				//~ }
				var geometry = new THREE.CubeGeometry(1,1,1);
			    var material = new THREE.MeshBasicMaterial( { color; 0x00ff00 } );
			    cube = new THREE.Mesh( geometry, material );
			    //scene.add( cube );
			    // Add the COLLADA

				scene.add( dae );


				// lights

				light = new THREE.AmbientLight( 0x404040 );
				
				light = new THREE.DirectionalLight( 0x404040 );
				light.position.set( 1000, 1000, 1000 );
				scene.add( light );
				
				light = new THREE.DirectionalLight( 0x404040 );
				light.position.set( 1000, -1000, 1000 );
				scene.add( light );
				
				light = new THREE.DirectionalLight( 0x404040 );
				light.position.set( -1000, 1000, 1000 );
				scene.add( light );

                light = new THREE.DirectionalLight( 0x404040 );
				light.position.set( 1000, 1000, -1000 );
				scene.add( light );

				light = new THREE.DirectionalLight( 0x002288 );
				light.position.set( -1000, -1000, 1 );
				scene.add( light );

				light = new THREE.AmbientLight( 0x222222 );
				scene.add( light );


				// renderer

				renderer = new THREE.WebGLRenderer( { antialias; false } );
				renderer.setClearColor( 0xFFFFFF, 1 );
				renderer.setSize( window.innerWidth, window.innerHeight );

				container = document.getElementById( 'container' );
				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				stats.domElement.style.zIndex = 100;
				container.appendChild( stats.domElement );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

				controls.handleResize();

				render();

			}

			function animate() {

				requestAnimationFrame( animate );
				controls.update();

			}

			function render() {
				//cube.rotation.z += 0.1;
				//requestAnimationFrame(render);    
				renderer.render( scene, camera );
				stats.update();

			}
			//render();


		</script>

	</body>
</html>

@chrisglasier said:

@juan974 said:

i m looking for it too, it s three.js :
https://sites.google.com/site/dessinsgillestarnus/home/test-3d-sketchup
http://threejs.org/

it s quite like adobe pdf3D SDK :
(sample here http://a8z888yc17.1fichier.com/) acrobat 8.1 minimum

This is something I am working on using three.js which you may find helpful/interesting. Free for developing.