I am currently creating a plane like this:
var planeGeo = new THREE.PlaneGeometry(50, 50);
var planeMat = new THREE.MeshBasicMaterial({color: 0x87CEEB});
var plane = new THREE.Mesh(planeGeo, planeMat);
scene.add(plane);
That just creates a blue plane, as expected. Here, on the other hand, is the design/pattern I'm looking for:
This is from a game called Crash Of Cars. Notice the white polygons along the plane, that is what I am going for.
Any help is appreciated. Thanks!
Related
I'm working on a solar system project that involves planets and a rocketship orbiting around a sun. There is currently a main light source with the code being as follows
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
scene.add(spotLight);
I have created a sun object and tried giving it an emissive property so that it can shine light at other planets too. Although it seems to make the planet glow in a sense, it's more of just the object lighting up and not having shading rather than actually becoming a light source. The code for the sun object is as follows
function createSunMesh(geom) {
var loader = new THREE.TextureLoader();
var planetSunTexture = loader.load("../assets/textures/planets/sun.jpg");
//var normalSunTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetSunMaterial = new THREE.MeshLambertMaterial({map: planetSunTexture, emissive: 0xac3d25});
//bumpMap: normalMoonTexture
// create a multimaterial
var planetSunMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetSunMaterial]);
planetSunMesh.visible = false;
return planetSunMesh;
}
So my question is, is there a way to make the emissive property of the light stronger / strong enough to impact the other objects? I have tried using both Lambert / Phong materials but they seem to have the same effect as one another.
I ended up repositioning the main spotlight so it was within my sun object, which gave it the same effect that I was looking for. Also, I increased the intensity and reduced the decay to give the light a more realistic effect
I am trying to get collision detection from meshes i lay out on my Three.js scene. I am confused on how the Raycaster reallu works and if i get it right.
Here is a fiddle to descripe what i have problem with
//Add cuba at 40/40
geometry = new THREE.CubeGeometry(20, 20, 20);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.position.setY(40)
scene.add(mesh);
//Add Ray
var origin = new THREE.Vector3(50, 0, 0),
direction = new THREE.Vector3(-1,0,0),
ray = new THREE.Raycaster(origin, direction),
collisionResults = ray.intersectObjects([mesh]);
if(collisionResults.length!==0){
alert('Ray collides with mesh. Distance :' + collisionResults[0].distance)
}
//Add Arrow to show ray
scene.add( new THREE.ArrowHelper(direction, origin, 50, 0x000000));
Not working:
http://jsfiddle.net/FredricBerling/LwfPL/1/
Working:
http://jsfiddle.net/FredricBerling/LwfPL/3/
Basically the fiddle lays out a cube and the 50 points form that i shoot a ray in a "direction". Problem seems to be that it states a "hit" even if it shouldnt.
I lay out a Arrowhelper to show where i suspect the Raycaster shoots its ray.
From other tests it seems like the direction in Raycaster is different from the one in Arrowhelper. Raycaster seems to shoot the ray into the 0,0,0 of the scene. I am confused
EDIT!. Rob gave the answer. I needed to make sure the meshes was rendered so that worl matrixes was applied. Fiddle is updated with the correct code that works for testing Raycaster as expected.
The apparent false positive you're seeing is due to the fact that even though you have set the box's position, it hasn't yet had its world transformation matrix updated. This normally only happens just before rendering.
If you move the raycast test to after the first render (or call updateWorld() manually), you won't get a hit.
Possibly dumb question but here goes. Three.js geometries have 'parameter' feilds associated with them, see the box geometry here...
box Geometry parameters
I am trying to update these parameters like this...
var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));
scene.add(mesh);
mesh.geometry.parameters.depth=20;
But of course, the geometry remains unchanged. Is there a way of updating the geometry by editing these parameters?
fiddle here https://jsfiddle.net/kn3owveg/2/
Any help appreciated!
parameters.depth is only used at geometry construction time. it has no effect when modifying it. you can think of it as read only.
Use the example at BoxGeometry and the gui on the right to see how to achieve what you want.
Gaitat is totally right, you can't change geometry with changing of parameters.
And there can be another solution. With scaling of your cube.
function setSize( myMesh, xSize, ySize, zSize){
scaleFactorX = xSize / myMesh.geometry.parameters.width;
scaleFactorY = ySize / myMesh.geometry.parameters.height;
scaleFactorZ = zSize / myMesh.geometry.parameters.depth;
myMesh.scale.set( scaleFactorX, scaleFactorY, scaleFactorZ );
}
...
setSize(mesh, 10, 10, 20);
jsfiddle example
Technically, scaling only creates the illusion of an updated geometry. I would say a better approach would be to reassign the geometry value of your mesh to a new geometry.
mesh.geometry = new THREE.CubeGeometry(newSize, newSize, newSize)
With this approach you can update any aspect of the geometry including depth segments for example. This is especially useful when working with non cube geometries like cylinders or spheres.
Here is a full rework of your original code using this approach, really only the last line has changed:
var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));
scene.add(mesh);
mesh.geometry = new THREE.CubeGeometry(nodeSize, nodeSize, 20);
I have created a sphere object and used world .jpg to create earth using webgl.
below is the code:
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshPhongMaterial()
var earthMesh = new THREE.Mesh(geometry, material)
scene.add(earthMesh)
material.map = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg')
I want to create a line geometry and add to the globe between latitudes and longitudes. I also want the animation of the lines on the globe.
I have tried to create line geometry and add it to the scene but it does not overlaying properly on the globe
I'm looking for an efficient method of overlaying a texture to cover a mesh. I'm not an expert, more a novice, when it comes to 3 dimensional mapping/objects. Below shows how I would like the end product to look.
When attempting to apply texture with the following code, the end result looks similar to below. I have not done any UV mapping, I believe my answer may be lay here. As you can see from the below image it roughly takes the general shade of the picture but I get the impression that the texture is being drawn between each vertice of the model rather than across the entirity.
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('resource/images/materials/Mahogany.jpg');
var STLLoader = new THREE.STLLoader();
STLLoader.load( 'test.stl', function ( geometry1 ) {
var meshMaterial = new THREE.MeshBasicMaterial({map:texture});
var mesh = new THREE.Mesh( geometry1, meshMaterial );
mesh.scale.set(1, 1, 1);
mesh.position.set(5, 20, 80);
scene.add(mesh);
});
The cube has the correct texturing, whereas my STL loaded mesh does not.
Please ignore the rotation of the object in the above picture, I will move to unioning my objects together once I have fixed my texturing issues.
Fairly new at asking questions on here so please do comment to help me expand my question if it's too general or not percise enough. Thank you.
You may use
THREE.MeshPhongMaterial()
instead of
THREE.MeshBasicMaterial()
THREE.MeshPhongMaterial() will wrap the material outside the object and we can get curved material as per the object.