Loading DAE in Three.js - javascript

I have a problem, I can't load DAE file in Three.js. Can anybody help please.
I have model.dae in the same directory as index.html and when I load page it shows only black screen.
I had a file FBX and I exported it with Maya to FBX_DAE
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<style type="text/css">
html, body {
margin:0;
padding: 0;
}
</style>
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
loader = new THREE.ColladaLoader();
loader.load('model.DAE',function colladaReady( collada ){
player = collada.scene;
skin = collada.skins [ 0 ];
scene.add( player );
});
/*
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
*/
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
//cube.rotation.x += 0.1;
//cube.rotation.y += 0.1;
}
render();
</script>
</body>
</html>

This is just a guess, but I suspect you're not loading the ColladaLoader properly.
Should be this:
<script src="js/ColladaLoader.js"></script>
Instead of this:
<script src="js/ColladaLoader.min.js"></script>
If this is the case you should be seeing a error in the console.

You might have to run your sample on a web server to be able to load the .dae files, since JavaScript does not allow file access on a client for security reasons.

I´ve had the same issue with DAE-Files i had created in Cinema4D. I had to export a FBX from C4D, import it to Blender and export the DAE with Blender.
C4D´s DAE-Exporter seems broken

Related

Firefox error during three.js execution code

I try to do a 3D animation with Three.js controls. During the execution of my code in Firefox, a have this error :
EDIT
SyntaxError: import declarations may only appear at top level of a module
And here is my code, simplified :
<!DOCTYPE html>
<head>
<title>Three.js Test</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%;};
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script type="module">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//keep the scene in center of the page
window.addEventListener('resize', function() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
//prevent distortion
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
// create the shape
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xFF0080 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate()
{
requestAnimationFrame( animate );
/*cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube.rotation.z += 0.01;*/
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
I don't understand where the error came from and I don't know how to fix it.
I now run my code on a wamp server.
Thanks for your help !
import * as THREE from './jsthree.module.js';
It seems there is a typo. It should be ./js/three.module.js.
In any event, ensure to run your code on a local web server in order to avoid any security issues. More information about this topic in the following guide:
https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

I Cannot Load the Three.js Library In Cloud 9

I am trying to make a three-d js game in c9. This is my html:
<html>
<head><title>Tower Defender</title></head>
<body>
<script src="/three.js"></script>
<script src="/main.js"></script>
</body>
</html>
And this is the main.js file:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
}
render();
Both of these files are in the main dir of the project. I have the three.js file also in the main dir. The three.js file is the file that is in the src dir in the three.js download folder. (The dowload file is called Three.js, and I renamed it with all lowercase in c9). When I run main.html and open the webpage, nothing is there. I check the js console, and i see this:
Uncaught TypeError: THREE.Scene is not a constructor main.js:5
I also see little warning signs on the left side of the code window, where ever the code uses THREE. To me, it looks like everything should be working fine.
EDIT:
I have changed the html to this:
<html>
<head><title>Tower Defender</title></head>
<body>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Cannot execute JS function from HTML file

For some reason with this code it will not call 'createScene();' in index.html. I'm probably overlooking something very simple as I'm new to JS but I haven't been able to find anything.
index.html
<html>
<head>
<title>Pallidity</title>
<script type = "text/javascript" src="Javascript/scene.js"></script>
<style type ="text/css">
BODY
{
Margin: 0;
}
canvas
{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<script type="text/javascript">
createScene();
</script>
</body>
scene.js:
function createScene(){
<script src="Libraries/three.min.js"></script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Bare minmum to render
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x045f00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
}
You have an html element (a script tag) as the first line of you createScene function. This is not valid JavaScript, therefore that function essentially does not exist. That's why it is not defined.
You probably want this line in your HTML file right before your scene.js script tag.

Threejs canvas background black

I made a trial with basic scene of threejs but I can't understand why the canvas background is completely black.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%;background-color: white; }
</style>
</head>
<body>
<script src="Stereos/threejs/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
</script>
</body>
</html>
EDIT:
Code at felpone.netsons.org
The color of the background of the canvas is not determined by the CSS value but using renderer.setClearColor (0xff0000, 1);
You can control the background color using css, but you must first set the "alpha" of your WebGLRenderer to "true".
In you example, I added the alpha option and set to true in the renderer, and I also added the background-color property in the body style.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; background-color: white; }
canvas { width: 100%; height: 100%; background-color: white; }
</style>
</head>
<body>
<script src="Stereos/threejs/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( {alpha: true} );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
</script>
</body>
</html>
Better add the background to the scene directly which can be a texture or a THREE.Color!
From r78 versions onwards, you can use the code below to set your scene's background colour:
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
Docs:
Scene.background
You made a scene, created a camera and created a renderer, but you're missing two important things: adding something to render, and actually rendering it.
After your last line, add
var cube = new THREE.Mesh(
new THREE.CubeGeometry( 1,1,1 ),
new THREE.MeshNormalMaterial()
);
scene.add( cube );
camera.position.set( 2,2,2 );
camera.lookAt( cube.position );
renderer.render( scene, camera );
That will create a cube on the origin ( 0,0,0 ), with size 1 unit; place the camera a bit away from it and pointed at the cube; and then call the renderer to render the cube.
Updating this for the latest version of ThreeJS (2019) -
After you instantiate your scene using:
scene = new THREE.Scene();
You can then access the "background" property of this object and set the hex color like this:
scene.background = new THREE.Color(0xf5f5f5);
#Jaume Sanchez is the correct answer. Although the others answers are factual, I don't think that they answer what you where asking as a person new to threeJS. the var rendereris just a reference to your render target. your code does not draw anthing. You also do not have a camera in your scene to look at anything. Creating a scene a tutorial for getting started
If for some reason:
renderer.setClearColor(0xff0000, 1);
does not work, try this:
const renderer = new THREE.WebGLRenderer();
renderer.domElement.className = "domElement";
and in css add a selector:
.domElement {
background-color: red; /* any color */
}

ThreeJS Getting Started code gives console error

I am trying to attempt to learn Three.js from their getting started guide: http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene and I have the code as exactly from the site. I am using the latest code from their site, as for the library. The error in the console is as follows:
Uncaught TypeError: Object #<Object> has no method 'mergeVertices'
I am not really too sure on what the issue is
Here is the code that is from the site that I am using:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>First Three JS App</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// To be able to view anything with Three.js we need a scene, a camera, and a renderer
// -> To render the scene with the camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth / window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = THREE.BoxGeometry(10, 10, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 });
var cube = new THREE.Mesh( geometry, material);
scene.add( cube );
camera.position.z = 5;
var render = function render() {
requestAnimationFrame( render )
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>
From what #WestLangley suggested, I needed to review my code. I was missing a new in geometry declaration, and my renderer.setSize call needed 2 params instead of 1 (I was using a ratio) and the final var render = function.... I needed to take out the second render
Sometimes it is good to have a second pair of eyes.. Thanks again #WestLangley

Categories

Resources