I am struggling with texture..
see http://jsfiddle.net/henros/e6zs9mcj/3/
Can someone tell me why the color for the cube is not added..
See line 105 - 109
var geometry2 = new THREE.BoxGeometry(50,50,50);
var material2 = new THREE.MeshBasicMaterial({color: 0x000000});
var cube2 = new THREE.Mesh(geometry2, material2);
cube2.position.set(-300,0,25)
scene.add(cube2);
The code defines a fog that seems to interact with the geometry. Disabling the fog or setting the I-don't-care-about-fog flag resolves the issue.
var material2 = new THREE.MeshBasicMaterial({color: 0x000000, fog: false});
Check your scene setup.
Related
If you take a look here which is done with r71 the shadows work:
var shadowlight = new THREE.DirectionalLight( 0xffffff, 1.8 );
shadowlight.position.set( 0, 100, 0 );
shadowlight.castShadow = true;
shadowlight.shadowDarkness = 0.1;
this.scene.add(shadowlight);
this.renderer.setClearColor( 0xf1c140, 1 );
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapType = THREE.PCFSoftShadowMap;
https://codepen.io/nicolasdnl/pen/VYRXWr
However, if I change the version to 104, and make the necessary changes that it suggests:
.shadowMapEnabled is now .shadowMap.enabled.
.shadowMapType is now .shadowMap.type.
THREE.Light: .shadowDarkness has been removed.
The shadow doesn't work any more: https://codepen.io/bertug48/pen/YMowKx
How to enable the shadows like r71 on v104?
MeshBasicMaterial is not able to receive shadows for over three years now. You have to use a lit material for your ground or add an additional ground mesh with an instance of THREE.ShadowMaterial.
Demo: https://jsfiddle.net/38weog40/
var planeGeometry = new THREE.PlaneGeometry( 200, 200 );
planeGeometry.rotateX( - Math.PI / 2 );
var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 0.2;
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = -200;
plane.receiveShadow = true;
scene.add( plane );
BTW: Here is the reason why MeshBasicMaterial does not receive shadows anymore: https://github.com/mrdoob/three.js/issues/8116#issuecomment-183540170
three.js R104
I created a PlaneGeometry in Three.js and placed an object on top of it.
If I move the camera so that I can see the PlaneGeometry from below I can still see parts from the object on top. How can I define that the object is only seen from above the PlaneGeometry?
Image from above
Image from below
// Creating PlaneGeometry
var floorGeometry = new THREE.PlaneGeometry( 100, 100 );
floorGeometry.rotateX( - Math.PI / 2 );
var floorTexture = new THREE.TextureLoader().load( '../img/wood-texture.jpg' );
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(20, 20);
var floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side: THREE.DoubleSide});
var floor = new THREE.Mesh( floorGeometry, floorMaterial );
scene.add( floor );
// Creating object on top
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x444444,wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0.5, 0);
scene.add(cube);
As workaround I set the floor lower. If I zoom in I can still see the gap but it seems to be the best / only solution.
floor.position.y = -0.5;
Three.js is awesome! I'm having trouble adding a static background scene to earth.html demo. I've tried using CSS, this code
var texture = new THREE.ImageUtils.loadTexture( 'rainier.jpg' );
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({ map: texture
}));
backgroundMesh .material.depthTest - false;
backgroundMesh .material.depthWrite - false;
//Background Scene
var backgroundScene - new THREE.Scene();
var backgroundCamera - new THREE.Camera();
backgroundScene .add(backgroundCamera );
backgroundScene .add(backgroundMesh );
to no avail! So far I've changed the texture of the sphere successfully. When I add the code above it displays the background and no sphere? This is my first experience with THREE.js. I started with modifying a demo to get the feel for the syntax and operations. Any help would be greatly appreciated!
UPDATE:
I made jsfiddle example - jsfiddle.net/NEXny/1/
[ignore this - just including a code block so stackoverflow will
let me post the above JSFiddle link. Yeah, seriously.]
I'm having trouble with applying texture to RingGeometry and CylinderGeometry, hope this image will explain my issue.
It is possible to apply texture by one of this ways ?
Currently i'm getting very unexpected results...
You have to modify the geometry vertex UVs to your liking.
Instead, why not just use CircleGeometry for your cylinder end-caps. That is, construct the end-caps yourself?
// cylinder
geometry = new THREE.CylinderGeometry( 192, 192, 40, 64, 1, true ); // open-ended
geometry1 = new THREE.CircleGeometry(192, 64);
// end-cap material
material1 = new THREE.MeshBasicMaterial({
map: textures.circle,
overdraw: 0.5 // for canvas renderer only
});
// cylinder material
material = new THREE.MeshBasicMaterial({
map: textures.line,
overdraw: 0.5 // for canvas renderer only
});
object = new THREE.Object3D();
scene.add(object);
// end-caps
var mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.rotation.x = - Math.PI / 2;
mesh1.position.y = 20
object.add(mesh1);
var mesh2 = new THREE.Mesh(geometry1, material1);
mesh2.rotation.x = Math.PI / 2;
mesh2.position.y = -20
object.add(mesh2);
// cylinder
var mesh = new THREE.Mesh(geometry, material);
object.add(mesh);
fiddle: http://jsfiddle.net/NEXny/2/
three.js r.61
I'm trying to apply different material on front and back sides of extruded shape, but cannot figure out where to put side: THREE.FrontSide and side: THREE.BackSide. Where they should be putted?
My relevant code part is:
var materialFront = new THREE.MeshPhongMaterial({ ambient: 0xffffff, map: frontTexture });
var materialSide = new THREE.MeshPhongMaterial({color: 0xE68A00, ambient: 0xffffff});
var extrusionSettings = {
amount: 10,
bevelEnabled: false,
bevelThickness: 0.2,
bevelSize: 0.2,
bevelSegments: 8,
material: 0,
extrudeMaterial: 1
};
var geometry = new THREE.ExtrudeGeometry(shapes, extrusionSettings);
var materials = [materialFront, materialSide];
var material = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh(geometry, material);
UPDATE:
According to WestLangley's comment I succeeded in adding the different texture to backfaces:
// ...
var materials = [materialFront, materialSide, materialBack];
// ...
for ( var face in mesh.geometry.faces ) {
if (mesh.geometry.faces[ face ].normal.z == 1) mesh.geometry.faces[ face ].materialIndex = 2;
}
After you create your mesh geometry, and before the first call to render(), you have to change the materialIndex to 2 for the back faces. Then, add a third material in your material array.
You can identify the back faces by their face normals. Face normals for faces on the back of the geometry should all point in the same direction.
three.js r.58
Try using:
var materialFront = new THREE.MeshPhongMaterial({ ambient: 0xffffff, map: frontTexture, side: THREE.FrontSide });
var materialSide = new THREE.MeshPhongMaterial({ color: 0xE68A00, ambient: 0xffffff, side: THREE.BackSide });
even though you should probably lower your ambient contribution and give a color to the FrontSide material.
Then:
var materials = [materialFront, materialSide];
scene.add( THREE.SceneUtils.createMultiMaterialObject( geometry, materials ));