I am new to three.js. I have created multiple mesh and grouped by using JSONLoader. Now my problem is apply animation to that group or muliple mesh. Is it Possible to apply animation to that group in JSONLoader.
Thanks in Advance.
To group files in threejs you'll want to create a Object3D():
var group = new THREE.Object3D();
Then you'll want to add your meshes to this variable:
group.add(mesh1); group.add(mesh2); group.add(mesh3);
Then lastly - you can animate this group in an animation loop:
group.rotation.x+=.02;
It sounds like you just want to add your objects into a group var in your JSONLoader.load function. If you can't figure it out feel free to share a jsfiddle of your code and I can point you to the right syntax.
Related
I'm trying to get access to inner THREE components to be able to change camera positions, add items to the scene, etc. How can I get access to these internal mechanics of THREE from this module? web-ifc-viewer: https://github.com/IFCjs/web-ifc-viewer
You can use ifcViewer.context to get the scene objects from Three.js.
Some other useful properties/ methods
ifcViewer.context.getScene()
ifcViewer.context.items
Hope this is what you're looking for.
Before changing your camera position, you need to disable cameraControls
viewer.context.ifcCamera.cameraControls.enabled = false;
I know of the traditional picking and raycasting models to select a mesh inside of a THREE scene, but I'd like to pick a mesh given an ID for testing purposes.
For example:
Uer select mesh 1 (or some other ID like 'exampleName', etc.)
Any ideas on how to select/click a mesh programmatically?
I have made a small scene in blender (6 objects, each using 1 to 4 materials).
When exporting this (using the materials, and the scene option) with the dev exporter and loading it via:
var loader = new THREE.ObjectLoader();
loader.load( 'assets/scene.json', function ( scene ) { ...
And then checking the scene, I can see it has 6 children (good) and that each of the five children only has one MeshLambertMaterial (instead of the material mix from blender) bad.
Any hints on what I am doing wrong?
Those are btw basic materials (just a color basically) no textures or anything.
The scene renders correctly (minus the material mix).
Here is a link to the 113kb scene file (zipped): http://jppresents.net/static/blender/exportBug/scene.zip
Looking at the file I think all materials are there - so the problem must be the way I load it?
Not a solution, but a work around:
Since the only difference between all my materials was just the color, I have now applied exactly one material with a multi colored texture per object.
Then I uv-mapped the faces of the object to the colors corresponding to the previously set material color.
This was easy using the hotkey "shift + G" which lets you select all faces with the same material. (Then just assign them to the texture material, move/scale those in the uv-view to the part of the texture that matches the old color.)
We are studying on product designer project. Designer is ready.
I want to do 3d preview result with three.js.
How can we texture one side of phone case? or can we border texture mapping?
OBJLoader version:
http://www.shopilife.com/baskiburada/viewer/viewer_4.html
And some obj files cannot be textured. Error is "GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2"
http://www.shopilife.com/baskiburada/viewer/viewer2.html
First, regarding re-texturing the back vs. front of the phone case. The approach here is to seperate the UV coordinates on the model itself. This way you have two sets of materials/textures/UVs. Then during runtime you load them both using a MeshFaceMaterial to load the two materials in an array like so:
materialArray.push(THREE.BasicMeshMaterial({color: 0xff0000})); //use whatever Material type you'd like of course
materialArray.push(THREE.BasicMeshMaterial({color: 0x0000ff}));
var multipleMaterial = new THREE.MeshFaceMaterial(materialArray);
phoneCaseMesh= new THREE.Mesh( geometry, multipleMaterial );
Then when you want to switch one out you would grab the mesh and change the mapping to the desired side something like:
phoneCaseMesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'newtexture.jpg' );
Second, regarding the Error on you second sample, WestLangley is correct the OBJ file has no UV coordinates to map to, so the index is out of bounds when you apply a texture. If you look at both OBJ files your iphone4.obj has vt entities while the untitled.obj is just v and f. Hope that helps
If you take a look at my fiddle:
http://jsfiddle.net/jmg157/Y35cQ/1/
You'll see I have grid labels on the cube axes. What I'd like to do is whenever the user rotates around the cube, have the text rotate as well so that the numbers are always facing the user.
I tried things like xMarks.rotation = camera.rotation, where xMarksare the text objects, but no success. Any suggestions would be greatly appreciated.
three.js is now quaternion-based.
To make the text created with THREE.PlaneGeometry face the camera, do this:
mesh.quaternion = camera.quaternion; // EDIT - see note below
Updated fiddle: http://jsfiddle.net/Y35cQ/2/
An alternative is to use THREE.Sprite, which always faces the camera.
three.js r.63
EDIT - mesh.quaternion = camera.quaternion; no longer works. You must use this pattern instead:
mesh.quaternion.copy( camera.quaternion );
three.js r.67