I want to use Physi.js to make a car , but there has some error, I view my demo at Chrome, and I don't know the error is caused by the file named ammo.js or physi.js ,and following are my codes:
var phymaterial = Physijs.createMaterial(new THREE.MeshStandardMaterial({color:0xff0000,wireframe:true}),0,1);
//create a wall
var wall1 = new Physijs.BoxMesh(new THREE.CubeGeometry(50,10,2),meshGray);
wall1.position.set(0,5,35);
scene.add(wall1);
var cubegeo = new THREE.CubeGeometry(31.6,6,13.6);
//create a cube as car's body
var carPhy = new Physijs.BoxMesh(cubegeo,phymaterial,0);
carPhy.position.set(0,5,0)
car.position.set(0.6,-3,0)
scene.add(carPhy);
//create four wheels use Physijs
var wheelfl = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelfl.rotation.x = Math.PI/2;
wheelfl.position.set(10,4,-8)
scene.add(wheelfl);
var wheelfr = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelfr.rotation.x = Math.PI/2;
wheelfr.position.set(10,4,8)
scene.add(wheelfr);
var wheelbl = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelbl.rotation.x = Math.PI/2;
wheelbl.position.set(-10,4,-8)
scene.add(wheelbl);
var wheelbr = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelbr.rotation.x = Math.PI/2;
wheelbr.position.set(-10,4,8)
scene.add(wheelbr);
//create constraint with Physijs.DOFConstraint
var fl = new Physijs.DOFConstraint(wheelfl,carPhy,new THREE.Vector3(10,4,-10));
scene.addConstraint(fl);
var fr = new Physijs.DOFConstraint(wheelfr,carPhy,new THREE.Vector3(10,4,10));
scene.addConstraint(fr);
var bl = new Physijs.DOFConstraint(wheelbl,carPhy,new THREE.Vector3(-10,4,-10));
scene.addConstraint(bl);
var br = new Physijs.DOFConstraint(wheelbr,carPhy,new THREE.Vector3(-10,4,10));
scene.addConstraint(br);
And the error information like following:
Uncaught ReferenceError: _emscripten_bind_btGeneric6DofConstraint_btGeneric6DofConstraint_4 is not defined
at new btGeneric6DofConstraint (ammo.js:22)
at Object.public_functions.addConstraint (physijs_worker.js:873)
at self.onmessage (physijs_worker.js:1412)
I wanna know how can I resolve it?
Related
i have created wall using path in three js. I want change the color option buttion automatically need to change the color onclick event.
Below my color any one help me.
// wall 1 inside
item_count = 1;
var wall_x1 = 69;
var wall_y1 = 55;
var wall_x2 = 366;
var wall_y2 = 52;
var wall_z = 0;
var wall_width = 5;
var wall_height = default_height;
var wall_wall_width = 5;
if(!wall_wall_width) { wall_wall_width = 5; }
var wall_wall_elevation = planner_default_height;
if(!wall_wall_elevation) { wall_wall_elevation = default_height; }
var wall_top_filltype = 'texture';
var wall_top_fill = 'default_wall.jpg';
var wall_side_filltype = 'texture';
var wall_side_fill = 'wall5.jpg';
if ( item_count == 0 )
{
starting_x_value = wall_x1;
starting_y_value = wall_y1;
}
path = generate_path_byline(wall_x1,wall_y1,wall_x2,wall_y2,default_depth);
path_type ="wall";
x=starting_x_value-wall_x1; y=starting_y_value-wall_y1;
// z=default_height/2;
path_transform = transformSVGPath(path);
create_surface(1,1,path_type,path_transform,starting_x_value,starting_y_value,x,y,z,default_height,wall_wall_elevation,wall_top_filltype,wall_top_fill,wall_side_filltype,wall_side_fill);
I see no clear way of defining the material at your sample code, or at least the way three.js does it:
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
If you use as a material a texture with an image, you have many ways to change its color... one easy trick could be to change the light color that lightens the scene or this object.
I am typing with very green fingers, so, please excuse the question. Learning from examples, I have been trying to load and display an image in ActionScript. This is from the original example that I am working on:
...
...
var bmd2:BitmapData = bmd.clone();
var infoBM:Bitmap = new Bitmap(bmd2);
var back:MovieClip = new MovieClip();
back.name = "back";
back.rotationX = -90;
var bSurface:MovieClip = new MovieClip();
bSurface.y = int(...
bSurface.z = int(...
bSurface.addChild(infoBM);
var overlay:Sprite = new Sprite();
overlay.graphics.beginFill(...);
overlay.graphics.drawRect(0, 0, bSurface.width, bSurface.height);
overlay.graphics.endFill();
bSurface.addChild(overlay);
back.addChild(bSurface);
var tf:TextField = new TextField();
tf...
tf...
tf...
bSurface.addChild(tf);
...
...
I am trying to place an image onto the bSurface instead of the text block, as above. So far, I've come up with:
var iSprite:Sprite = new Sprite();
var iMatrix:Matrix = new Matrix();
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
function onComplete (event:Event):void
{
bmData = Bitmap(LoaderInfo(event.target).content).bitmapData;
}
iMatrix.tx = 0;
iMatrix.ty = 0;
iSprite.graphics.beginBitmapFill(bmData, iMatrix, false, true);
iSprite.graphics.drawRect(0, 0, surface.width, surface.height);
iSprite.graphics.endFill();
surface.addChild(iSprite);
...and:
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
var location:URLRequest = new URLRequest("c:\pixlr.png");
loader.load(location);
bmData = Bitmap(loader.content).bitmapData;
surface.addChild(bmData);
but to no success. I've been failing miserably for days now, and would greatly appreciate some help.
Thanking you in advance,
Sofia
You're making this more complicated than it needs to be. A Loader is a DisplayObject. So when you want to load an image you can simply do this:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
addChild(loader);
You can use the onComplete event to handle any sizing or positioning, or fading in you might want to do.
I have a requirement where i need to show 4 contents of video playing parallely i achieved it through parallel element but here the main challange is that i want to show all the 4 videos in different panels and a common controlbar to play/pause the video.
When i am trying to add the mediaplayer as Uicomponent to hbox/vbox its throwing runtime exception.
Please help me.
protected function initPlayer():void
{
// Create a mediafactory instance
var leftcontainer:Panel = new Panel();
leftcontainer.percentHeight=50;
leftcontainer.percentWidth=50;
mediaFactory = new DefaultMediaFactory();
//Marker 1: Create a LayoutMetaData object stup up to even out the 2 parellel streams initially
var layoutData:LayoutMetadata = new LayoutMetadata();
layoutData.percentWidth = 50;
layoutData.percentHeight = 50;
layoutData.scaleMode = ScaleMode.LETTERBOX;
//Marker 2: Create the left side Media Element to play the LOGO_VID and apply the meta-data
var leftElement:MediaElement = mediaFactory.createMediaElement( new URLResource( LOGO_VID ) );
leftElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );
//Marker 3: Create the right side Media Element to play the STREAMING_PATH and apply the meta-data
var rightElement:MediaElement = mediaFactory.createMediaElement( new URLResource( STREAMING_PATH ) );
rightElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );
//Marker 4: Create the ParallelElement and add the left and right elements to it
var parallelElement:ParallelElement = new ParallelElement();
parallelElement.addChild( leftElement );
parallelElement.addChild( rightElement );
//Marker 5: Reinstantiate the layoutData to clear it out and set the layout data for the parallel element
layoutData = new LayoutMetadata();
layoutData.layoutMode = LayoutMode.HORIZONTAL;
layoutData.horizontalAlign = HorizontalAlign.CENTER;
layoutData.verticalAlign = VerticalAlign.MIDDLE;
layoutData.width = 800;
layoutData.height = 600;
parallelElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );
//the simplified api controller for media
player = new MediaPlayer( parallelElement );
//the container (sprite) for managing display and layout
container = new MediaContainer();
container.addMediaElement( parallelElement );
//Adds the container to the stage
var ui:UIComponent = new UIComponent();
ui.addChild(container as DisplayObject);
leftcontainer.addElement(ui);
this.addChild(container);
}
You can download the OSMF trunk and there are samples folder in
which a project ExamplePlayer is there in which many different
way to playing video. The following code is extracted from there
var parallelElement:SynchronizedParallelElement = new SynchronizedParallelElement();
var layout:LayoutMetadata = new LayoutMetadata();
layout.horizontalAlign = HorizontalAlign.CENTER;
layout.verticalAlign = VerticalAlign.MIDDLE;
parallelElement.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
var mediaElement1:MediaElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE));
layout = new LayoutMetadata();
layout.left = 0;
layout.top = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement1.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement1);
var mediaElement2:MediaElement = new VideoElement(new URLResource(REMOTE_STREAM));
layout = new LayoutMetadata();
layout.left = 0;
layout.bottom = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement2.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement2);
var mediaElement3:MediaElement = new VideoElement(new URLResource(REMOTE_STREAM));
layout = new LayoutMetadata();
layout.right = 0;
layout.top = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement3.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement3);
var mediaElement4:MediaElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE2));
layout = new LayoutMetadata();
layout.right = 0;
layout.bottom = 0;
layout.percentWidth = 50;
layout.percentHeight = 50;
mediaElement4.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
parallelElement.addChild(mediaElement4);
return parallelElement;
Try this you will get the 4 video playing or download the sample and use the FlashBuilder to run the project.
How can I make a similar script for custom marker with Google Maps 3? Just like this with v.2 :
var iconBlue = new GIcon();
iconBlue.image = 'images/cell1.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(32, 32);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(3, 16);
iconBlue.infoWindowAnchor = new GPoint(15, 15);
var iconRed = new GIcon();
iconRed.image = 'images/cell3.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(32, 32);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(15, 2);
iconRed.infoWindowAnchor = new GPoint(15, 15);
var iconGreen = new GIcon();
iconGreen.image = 'images/cell2.png';
iconGreen.shadow = '';
iconGreen.iconSize = new GSize(32, 32);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(-9, 2);
iconGreen.infoWindowAnchor = new GPoint(20, 15);
var customIcons = [];
customIcons["60"] = iconBlue;
customIcons["240"] = iconRed;
customIcons["350"] = iconGreen;
I wrote the following in Version 3 and the marker is not shown.
var cellone = new google.maps.MarkerImage("images/cell1.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(3, 16));
var celltwo = new google.maps.MarkerImage("images/cell2.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(-9, 2));
var cellthree = new google.maps.MarkerImage("images/cell3.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(15, 2));
var customIcons = [];
customIcons["60"] = cellone;
customIcons["240"] = celltwo;
customIcons["350"] = cellthree;
I've recently just did this icon stuff myself. And I initially used the same type of code you used, but that didn't work. Apparently new GIcon() was not functioning properly.
There is a very simple way to change icon though and it doesn't use variables.
This is what I did.
Declare markerVariable as a global variable.
When you create new markers, one of the lines should say icon : ...
Here is a sample of my code. Of course, you will have to change certain lines to have it working for your program (and you can't use marker with labels unless you change certain functions).
Lastly, icon : ... can be a link or location on your computer.
var iconArray = [
["http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/ltblue-dot.png"]
];
function getMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i] = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
map: map,
icon: new google.maps.MarkerImage(iconArray[i]),
//icon: new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"),
//labelContent: locations[i][3],
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
}
function initialize() {
getMarkers();
}
Translated version of Mike Williams' v2 "category" example
I would like to load multiple JSON files and control the visibility of their meshes. To achieve this, I associated them with their JSON file names. I got it working, but the solutions doesn't please me.
I modified the THREE.JSONLoader and passed a new parameter to the callback function. So with every new release of three.js, I would have to patch the three.js file again.
Here is my working solution (client side). See the new third parameter of loader.load(filename, callback, meshname).
Is there a better solution, which doesn't need a patched three.js library?
Thanks
// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
var loader = new THREE.JSONLoader();
var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
loader.load(jsonFileNames[i], function(geometry, meshName){
mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors}));
mesh.scale.set(0.2, 0.2, 0.2);
mesh.doubleSided = true;
scene.add(mesh);
meshes[meshName] = mesh;
}, meshName);
}
// ....
// Access their meshes
meshes[meshName].visible = true;
You could create a callback factory like below. It will work around the problem with closures when created inside loops.
function makeHandler(meshName) {
return function(geometry) {
mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors}));
mesh.scale.set(0.2, 0.2, 0.2);
mesh.doubleSided = true;
scene.add(mesh);
meshes[meshName] = mesh;
};
}
// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
var loader = new THREE.JSONLoader();
var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
loader.load(jsonFileNames[i], makeHandler(meshName));
}
// ....
// Access their meshes
meshes[meshName].visible = true;
A variant of Tapio's great answer. This variant avoids the need to create and manage the meshes object. It does this by creating each new mesh object with the desired object name directly in the made handler function. As before the desired name meshName for each mesh is defined by the user and passed to the handler. But then the new mesh is created with the desired name by using the javascript eval function.
function makeHandler(meshName) {
return function(geometry) {
material = new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors})
eval (meshName + "= new THREE.Mesh(geometry, material);" ); //***NEW ***
eval ( "var mesh = " + meshName +";" ); //*** NEW ***
mesh.scale.set(0.2, 0.2, 0.2);
mesh.doubleSided = true;
scene.add(mesh);
//*** NOT REQUIRED *** meshes[meshName] = mesh;
};
}
// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
var loader = new THREE.JSONLoader();
var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
loader.load(jsonFileNames[i], makeHandler(meshName));
}
// ....
The various meshes can subsequently (when loading is completed) be referenced by their object names:-
// Access the meshes
//*** OLD *** meshes["part1"].visible = true;
//*** OLD *** meshes["part2"].visible = true;
//*** OLD *** meshes["part3"].visible = true;
part1.visible = true;//*** NEW ***
part2.visible = true;//*** NEW ***
part3.visible = true;//*** NEW ***