I'm not sure why I cannot rescale my scene after loading with sceneLoader.
I have a simple box that I created and exported from blender as js file.
I tried rescaling the entire result scene before and after. I even looped over the mesh objects and tried rescaling but the scale.set has no affect.
var callbackFinished = function ( result ) {
result.scene.scale.set(10,10,10)
scene.add(result.scene);
}
loader.load( "box.js", callbackFinished );
Thanks,
Jim
Nevermind, I managed to solve it. When loading my model with SceneLoader, the verticesNeedUpdate property is set to false. So I had to set all the mesh verticesNeedUpdate to true for the scale to work.
Related
I added CSS2DObject to the scene.
self.labelDiv = document.createElement( 'div' );
self.labelDiv.className = 'label';
self.labelDiv.innerHTML = textshow;
self.label = new THREE.CSS2DObject( self.labelDiv );
self.label.position.set(obj.x, obj.y, obj.z);
this.scene.add(lab);
The effect is as follows：
label1
I moved the camera forward until I couldn't see the model, but the label was displayed again.
label2
What is the reason? How to avoid it?
Thanks.
CSS Renderer can't do clipping like the WebGL renderer so it relies on frustum culling to get rid of objects...
Check if any errors /warnings are showing in console?
Check you're using the latest THREE.js?
Make sure frustumCulling is not disabled on your objects?
Make sure your css objects have some kind of boundingbox or boundingsphere perhaps?
I have a model with a skeleton, all set up.
I've added the animations and Animation Helper to see the model move.
The result is odd - the bones are moving (according to animation helper rendering), but the actual model itself does not.
It's better explained with an gif:
Animation is attached to the mesh using:
animation = new THREE.Animation( mesh, geometry.animation );
Any suggestions on what might be wrong?
The solution was pretty simple actually:
for ( var k in materials ) {
materials[k].skinning = true;
}
How can I render an exported scene (with many objects, each with different colors and different properties, such as rotation aroung an axis in the scene) from Blender (with colladaLoader -->.dae) in ThreeJs?
So, the first step is to learn how to create a scene in threeJs and learn some feature with Blender. When you are ready, create your first model and before exporting keep this in mind:
you need to an object with vertices, so if you just create a text with Blender, you have to convert it to a mesh, otherwise threeJs will not render it
be sure to choose the Blender render option and not the Cycles,
otherwise the .dae you export will not be rendered in threeJs
when applying a texture, use just colors and basic materials (basic, phong and lambert) - the others will not work using the colladaLoader
to see if the object will be rendered with color in threeJs with
colladaLoader just look at object in Blender with object mode
(solid) - if it's gray and not colored of the color you choose, it
will be rendered in threeJs the same way
if you apply the 'solidify' modifier to the object and then on threeJs set it to transparent, it will be rendered as wireframed
if you append multiple objects in the scene and 'join' them, the
respective positions and rotations will be respected in threeJs,
otherwise not: for example, if you want to renderize a flower in the
bottle (and thoose objects are different blender files which are
appended/linked in the scene), the flower will not fit in the bottle
in threeJs, but would have a different position and rotation than
the bottle
grouping the objects will not solve this: to see the scene as you see it in Blender you have to 'join' the objects (with the consequences that this entails) or manually change position and rotation on threeJs
the .dae export options don't matter for the rendering of the object in threeJs
and now, the part that regards threeJs:
be sure to import the colladaLoader with:
<script src="jsLib/ColladaLoader.js"></script>
insert this code into your init() function so the loader will load your .dae model:
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'model.dae', function ( collada ) {
// with this you can get the objects of the scene; the [0] is not the first object
// you display in blender in case of many objects (which means you didn't join them)
var obj1 = collada.scene.children[0];
// you can name the object so you can use it even out of the function, if you want
// animate it for example obj1.name = "daeObj1";
// you can set here some material properties as trasparency
obj1.material.needsUpdate = true;
obj1.material.transparent = true;
obj1.material.opacity = 0.5;
obj1.hearth.material.wireframe = false;
// and now some position and rotation for good visualization
obj1.position.set(0, -5, -0.6); //x,z,y
obj1.rotation.set(0, 45, 0);
// and add the obj to the threeJs scene
scene.add(obj1);
});
and some code to the animate() function if you want to update some of your objects, with rotation for example
scene.traverse (function (object) {
if (object.name === 'daeObj1') {
object.rotation.z -= 0.01;
}
});
I hope someone will benefit from this post
When I load my model(map) with JSONLoader I have a problem with collisions.
If I load with BoxMesh it's work but the geometry collisions is like a cube, and my model is not a cube, the middle of my model is empty.
And I put an other object (cube) on the top of my map the object stop on the top of this map not inside.
After search, I have load my model with Convex, and the object ont the top , fall on the plane of my map but I think the size (40) is not load correctly because if I move the object very little he fall in the space.
I load my model like this:
var loader = new THREE.JSONLoader();
loader.load( "essai/lobby3.js", function( lobby_geometry, lobby_materials ) {
console.log(lobby_geometry);
var ground_material = Physijs.createMaterial(
new THREE.MeshFaceMaterial(lobby_materials),
.8, // high friction
0 // low restitution
);
mesh = new Physijs.Mesh ( //I try with BoxMesh / Convex / Concav
lobby_geometry,
ground_material,
0
);
mesh.scale.set(40,40,40);
scene.add(mesh);
});
I don't know if it's very easy to understand the problem.
BoxMesh: Here the object is stop.
Convex: Don't detect collisions
I upload my tests, I think maybe is better to undestand :
http://www.hebergeurfichier.com/download/a97e3ae31c36dfe98525213cde90165f.html
PS: I create my models with blender and export in three.js extension.
I want to render my scene at twice the resolution of my canvas and then downscale it before displaying it. How would I do that using threejs?
for me the best way to have a perfect AA with not too much work (see the code below)
ps :if you increase more than 2 its start to be too sharpen
renderer = new THREE.WebGLRenderer({antialiasing:true});
renderer.setPixelRatio( window.devicePixelRatio * 1.5 );
This is my solution. The source comments should explain what's going on. Setup (init):
var renderer;
var composer;
var renderModel;
var effectCopy;
renderer = new THREE.WebGLRenderer({canvas: canvas});
// Disable autoclear, we do this manually in our animation loop.
renderer.autoClear = false;
// Double resolution (twice the size of the canvas)
var sampleRatio = 2;
// This render pass will render the big result.
renderModel = new THREE.RenderPass(scene, camera);
// Shader to copy result from renderModel to the canvas
effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
// The composer will compose a result for the actual drawing canvas.
composer = new THREE.EffectComposer(renderer);
composer.setSize(canvasWidth * sampleRatio, canvasHeight * sampleRatio);
// Add passes to the composer.
composer.addPass(renderModel);
composer.addPass(effectCopy);
Change your animation loop to:
// Manually clear you canvas.
renderer.clear();
// Tell the composer to produce an image for us. It will provide our renderer with the result.
composer.render();
Note: EffectComposer, RenderPass, ShaderPass and CopyShader are not part of the default three.js file. You have to include them in addition to three.js. At the time of writing they can be found in the threejs project under the examples folder:
/examples/js/postprocessing/EffectComposer.js
/examples/js/postprocessing/RenderPass.js
/examples/js/postprocessing/ShaderPass.js
/examples/js/shaders/CopyShader.js
Here's how you might be able to work it out: In your three.js initialization code, when you create your renderer, make it double the dimensions of your primary canvas, and set it to render to a secondary, hidden canvas element that is twice as large as your primary canvas. Perform the necessary image manipulation on the secondary canvas, and then display the result on the primary canvas.