Dynamic creation of a logo

I create a 3D logo with Strata Design 3D SE7. It’s possible to export file in several formats, especially in .DAE.
I used three.js and different sources on the web to build this code :

var renderer, scene, camera, mesh;


function init(){
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 1000);
var colladaReady = function(collada) { dae = collada.scene; dae.scale.x = dae.scale.y = dae.scale.z = 0.002; dae.rotation.x = -Math.PI/2; dae.updateMatrix(); scene.add(collada, dae); }
var model_loader = new THREE.ColladaLoader();
model_loader.load(’…/js/test.dae’, colladaReady);
var lumiere = new THREE.DirectionalLight( 0xffffff, 1.0 );
lumiere.position.set( 0, 0, 400 );
scene.add( lumiere );
function animate(){
renderer.render(scene, camera);

And nothing is displayed. And no error on the console.
I tested with different files .dae (by creating with strata and dowload in web) but there is nothing that appears.

Can you help me ?

Could you explain the logics of the order of the lines in this function?
There is no place in your code, where you call this function, except that you call it from itself, kind of recursively.
Have a look at the source code of the example with collada.

Besides, please share your DAE in this thread.

three.js webgl - collada body { background:#777; padding:0; margin:0; overflow:hidden; } #info { position: absolute; top: 0px; width: 100%; color: #ffffff; padding: 5px; font-family:Monospace; font-size:13px; text-align:center; } a { color: #ffffff; }
	<div id="container"></div>
	<div id="info">
		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> collada loader
		| Elf Girl by <a href="https://sketchfab.com/yellow09" target="_blank" rel="noopener">halloween</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>

	<script src="../github/three.js-dev/build/three.js"></script>

	<script src="../github/three.js-dev/build/ColladaLoader.js"></script>
	<script src="../github/three.js-dev/examples/js/Detector.js"></script>
	<script src="../github/three.js-dev/examples/js/libs/stats.min.js"></script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
		var container, stats, clock;
		var camera, scene, renderer, elf;
		function init() {
			container = document.getElementById( 'container' );
			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
			camera.position.set( 8, 10, 8 );
			camera.lookAt( new THREE.Vector3( 0, 3, 0 ) );
			scene = new THREE.Scene();
			clock = new THREE.Clock();
			// loading manager
			var loadingManager = new THREE.LoadingManager( function() {
				scene.add( elf );
			} );
			// collada
			var loader = new THREE.ColladaLoader( loadingManager );
			loader.load( './js/test.dae', function ( collada ) {
				elf = collada.scene;
			} );
			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
			scene.add( ambientLight );
			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
			directionalLight.position.set( 1, 1, 0 ).normalize();
			scene.add( directionalLight );
			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );
			stats = new Stats();
			container.appendChild( stats.dom );
			window.addEventListener( 'resize', onWindowResize, false );
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			renderer.setSize( window.innerWidth, window.innerHeight );
		function animate() {
			requestAnimationFrame( animate );
		function render() {
			var delta = clock.getDelta();
			if ( elf !== undefined ) {
				elf.rotation.z += delta * 0.5;
			renderer.render( scene, camera );

I took the link code that you indicated to me. I adapted it to my file. I tested it with different .dae but here is the error message on the console :

THREE.Object3D.add: object not an instance of THREE.Object3D. undefined

Here are the dae files

test.dae (83.9 KB)
Spider.dae (637.1 KB)

Can you please also share the textures for test.dae.


I discover three.js and I don’t know where are the texture parameters in three. I didn’t create textures

I refer to the texture that are defined in test.dae:

	<image id="image1" name="Cloth-Silk_Swirl-Blue_diffuse" height="0" width="0">
	<image id="image2" name="Cloth-Silk_Swirl-Blue_bump" height="0" width="0">


Ok, I changed :





But the error is always the same :

THREE.Object3D.add: object not an instance of THREE.Object3D. undefined
test.dae (83.8 KB)

If I use your model in webgl_loader_collada, everything works fine. I’ve only changed the URL of the load() method and slightly adjusted the scale of the scene via collada.scene.scale.set( 0.01, 0.01, 0.01 ); in the callback function.

Ok thank you.

I think that I have a problem with position of files. When I do the same test of you, it’s ok but color is purple and not blue. And if I test the same file in other folder (with change url for three.js, ColladaLoder.js, …), I have the same error. I think there is an url who is affect with the variable object. And if the file .dae is not in a same folder so three.js don’t find model and stop.

Do you know if it’s possible to have a formation to use this program in France ?

Sry, I don’t know that. But you find in the following thread a lot of resources about three.js.

Ok, thanks.

For the moment, I tested only with the letter E. Do you know why in three.js there is a veil on the letter, as if my .dae file was a partially transparent cube ?

I find the problem : it’s the soft Strata what makes a bad export in .dae because it works with SketchUp.

Now, I research to make the logo of laboratory to put it in my HTML page. It’s a normal page with informations and pictures.
I want to create a logo with several parts to create an animation internal to the logo. So I create several .dae files to be include in page with three.js

How to remove the small frame at the top left that displays counters and graphics (elf model) ?

And it is possible to change the background color of thee.js ? I wish it was transparent…

Finaly, I find solutions :

To remove the small frame at the top left, I used a css code :

#container div canvas
visibility: hidden;

To have a transparent background, I used :

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

You could remove:

<script src="../github/three.js-dev/examples/js/libs/stats.min.js"></script>

stats = new Stats(); 
container.appendChild( stats.dom );
. . .

thanks for your responses