I was trying to render a primitive character I made in 3dsmax, but seems like there's something wrong with my exported DAE file or just ColladaLoader is unable to process it correctly.
Scene consists of an animated biped skeleton, simple rigged character using Physique modifier, one static box and an animated one.
Here's my code:
<script src="three.js" type="text/javascript"></script>
<script src="ColladaLoader.js" type="text/javascript"></script>
<script type="text/javascript">
var size_width = window.innerWidth;
var size_height = window.innerHeight;
var player;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, size_width/size_height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(size_width, size_height);
document.body.appendChild(renderer.domElement);
camera.position.x = 100;
camera.position.y = -50;
camera.position.z = 7;
camera.rotation.x = 1.4;
var player_loader = new THREE.ColladaLoader();
player_loader.load( "running_babe.dae", function(collada) {
player = collada.scene;
init();
});
function init() {
scene.add(player);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
But all I get are those two boxes and a error:
ColladaLoader: Could not find the skeleton for the skin.
Here's exported DAE file I use - http://touhou.ru/upload/ff72eb0b40adf5c97286a1bcb164e1f0.DAE
Any suggestions?
Update: After rigging character with skin modifier I came up with the same result - could not find the skeleton for the skin.
Here's the link to exported dae with skin modifier - http://touhou.ru/upload/af6ba52b7bff5fa2b0f6ba3f704a3b77.dae
I had the same problem and spent days playing with exporter settings before i started reading the threejs colladaloader source and figured it out. so in case you haven't solved it yet, here's what you have to do:
First: when you export your model from max, make sure none of the elements in your scene have the same name as your filename (or your geometry wont show up this has something to do with generated ids in the DAE file)
Now, 3DSMax somehow neglects to export a node, so you have to add that manually:
open the running_babe.dae file in a text editor
look for an <instance_controller url="...."/> node and rewrite it to:
<instance_controller url="....">
<skeleton>#xxxxx</skeleton>
</instance_controller>
wherein 'xxxxx' is the id(=element/bone name in 3dsmax) that is the root element of your skeleton hierarchy. and don't forget the 'hash' at the beginning! :)
hope that solves it for you. i haven't tried animation yet, but i will now, and let you know if there's anything missing from this solution.
edit: nevermind, apparently i just scratched the surface of the tip
of a huge frigging iceberg.. seems like getting collada(from 3dsmax
2013) + skinned animation working is a pain.. i'll look at writing a new json exporter.
the format seems straight forward and well documented, plus, there's the old .ms file
from github to start from. good luck to you! if you find something, be so kind as to post
your method here, would you? :)
The default plugin that comes with 3ds max does not work. You need to use the OpenCollada plugin. Then you can follow the collada loader example. You get bones, animations and all!
Related
I'm to add 2d text as labels next to an object, as shown in the image. I've tried sprites (which, as far as I understand, don't work in newer versions of three.js), fontLoader, and a couple of rendering mechanisms--but I have not had any success, unfortunately.
I see that I can use CSS3D, but I'm not sure what to grab from the sample codes. If someone could point me in the right direction, I would appreciate it.
Image showing what I'm trying to achieve
If anyone has any advice, I would greatly appreciate it.
The following are some key parts of my code:
<script src="https://unpkg.com/three#0.132.2/build/three.min.js"></script>
<script src="https://unpkg.com/three#0.132.2/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three#0.132.2/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://unpkg.com/three#0.132.2/examples/js/controls/OrbitControls.js"></script>
<canvas id="c"></canvas>
window.addEventListener('load', init);
function init() {
const width = window.innerWidth;
const height = window.innerHeight;
const canvasElement = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({
canvas: canvasElement,
});
renderer.setSize(width, height);
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf5e8c6 );
loader.load('js/PricklyPearObject/scene.gltf', (gltf) => {
const model = gltf.scene;
model.scale.set( 0.1,0.1,0.1);
model.position.set(-2, 0, 0);
scene.add(model);
});
I tried using sprites, fontloader, and an approach using render but could not get them to work.
I'll show you a quick and easy way to achieve this when no experience with coding. You can use "Model Viewer". Go to: https://modelviewer.dev/
Click their Editor shown in the pic ->>
Then, drag your glTF or GLB model to the scene.
Then click "Edit" button, then "Add Hotspot" button. Add the text as a label. See the pic below:
Then you can setup the camera (initial position etc.), improve the lights and shadow, or add styles and customize the material.
When you are happy with your model, copy the "snippet code" to add it to your HTML (without forgetting to add the scripts), or "download the scene" as a Three.js project and check the code and run it with simply "Go Live" button in VS Code.
Hope it helps.
I am loading a 3D model using 3 files I've been provided with:
example.obj
example.mtl
example.jpg
I am loading them in my Three.js script with this snippet:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('./');
mtlLoader.load('example.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('./');
objLoader.load('example.obj', function(obj) {
scene.add(obj);
}, onProgress, onError);
});
The model is displayed on screen and the textures applied, but incorrectly (textures are not properly assigned to each face, look rotated, etc). Looks like the texture mapping is incorrect. Since the snippet is so simple and everything seems to be set automatically I'm not sure what I could do to try to fix it. Any idea?
BTW, the files were exported from Zbrush.
Thanks in advance
Thanks for the comments but I finally found out what the problem was: Zbrush was exporting the textures upside down. I corrected them and the issue was fixed. Thanks again.
I'm in the process of developing a chrome VR web app. Now I'm desperately trying to figure out how to render a website into my into my stereoscopic scene which has some meshes in it.
So I have my renderer for the meshes, which works well. The following code is only the relevant snippets:
var renderer = new THREE.WebGLRenderer();
Then i have my stereoeffect renderer which receives the webgl renderer:
var effect = new THREE.StereoEffect(renderer);
Next is that I create the website renderer, and apply it to the stereoeffect:
var rendererCSS = new THREE.CSS3DRenderer();
var effectHUD = new THREE.StereoEffect(rendererCSS);
Then I have scenes which are being rendered:
var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();
function render(dt) {
effect.render(scene, camera);
effectHUD.render( sceneCSS, camera );
}
No what I receive is this:
A stereoscopic image of my mesh, but a non stereoscopic image of the website. The problem is that the when I try to add the css renderer into the StereoEffect renderer, the setViewport function (among others, probably) are missing.
I've tried adding the website object to the webgl renderer, but it doesn't want to render my website, so adding the website object to the scene with the meshes doesn't work.
Any help is greatly appreciated!
I've been having the same problem.
It appears there was a CSS Stereo renderer but it's been removed along with all examples. This could have been for any number of reasons so use the following with caution, or until they reintroduce compatibility:
After searching I found a remaining copy of their demo from which you can mine the code and copy its CSS3DStereoRenderer.js file.
Hopefully this helps.
Following method of adding light helper works ok:
var light = new THREE.SpotLight( 0xFFFFFF );
light.position.set(100,100,100);
scene.add(light);
var helper = new THREE.SpotLightHelper( light );
scene.add(helper);
but following will cause helper to be off position:
var wrapper = new THREE.Object3D();
wrapper.position.set(100,100,100);
var light = new THREE.SpotLight( 0xFFFFFF );
wrapper.add(light);
var helper = new THREE.SpotLightHelper( light );
wrapper.add(helper);
scene.add(wrapper);
It seems like helper position is taken from absolute light position to scene, but is then applied from it's wrapper, that means it is actually applied twice a thus doesn't match actual position of the light. In this example, helper would appear on (200,200,200). Same applies for PointLight and probably other light types.
Is it possible to put helpers into wrapper together with light and avoid position problem?
see it demonstrated here: http://jsfiddle.net/wfpxdw37/24/
Light Helpers are just that -- helpers.
They must be added as a child of the scene.
Consider that requirement a feature. :-)
three.js r.69
I'm having issues getting a custom made collada object with no built in camera or lighting to render. I more or less copied what I had seen in a few collada examples to create my own loader, which looks like this:
var loader = new THREE.ColladaLoader();
var room, scene, stats;
loader.load('../Models/Rooms/boot.dae', function colladaReady( collada ){
collada.scene.getChildByName('Cube',true).doubleSided = true;
room = collada.scene;
room.scale.x = room.scale.y = room.scale.z = 1;
room.updateMatrix();
init();
});
The init function is fairly basic and looks like this
scene = new THREE.Scene();
scene.add( room );
scene.add( camera );
renderer.render(scene, camera);
Here is the actual object I'm trying to render. I have also tried it out with the monster.dae file that is in the examples folder without success. The Chrome javascript console isn't showing any errors, so I'm not quite sure where to look in my code. It all resembles functional examples, so I'm not sure why it's not functional. Is there something I'm unaware of that is relevant to collada loading?
RESOLVED: The item was rendering, but had no skin or texture associated with it. So it was rendering at the same colour as the background, which understandably appears to not be rendering at all. Discovered by adding a grid to the ground just to check.