I am learning Three.js. I can't find a proper answer about the difference between CubeGeometry vs BoxGeometry. I am getting the same output for both. Please help.
CubeGeometry:
var geomatry = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshLambertMaterial({color:0XF3FFE2});
var mesh = new THREE.Mesh(geomatry,material);
mesh.position.set(0,0,-1000);
scene.add(mesh);
BoxGeometry:
var geomatry = new THREE.BoxGeometry(100,100,100);
var material = new THREE.MeshLambertMaterial({color:0XF3FFE2});
var mesh = new THREE.Mesh(geomatry,material);
mesh.position.set(0,0,-1000);
scene.add(mesh);
CubeGeometry is just an alias for BoxGeometry. Keep in mind that CubeGeometry is actually deprecated.
https://github.com/mrdoob/three.js/blob/4888a99ca0161f2b5fea0e9ae9ce845891c50999/src/Three.Legacy.js#L80
Related
SEE THE SOLUTION BELOW
I am really confused. The target i am trying to achieve is;
Use multiple textures on a loaded mesh.
I have searched multiple times and still i can see the similar questions but nothing helped me.
What i'v tried is (yet);
Created a new mesh with the target mesh's geometry and pushed to target object3d element. (Like a photoshop layer.)
var texture = new THREE.Texture(mapCanvas);
texture.minFilter = THREE.LinearFilter;
texture.needsUpdate = true;
var material = new THREE.MeshPhongMaterial({map: texture, transparent: true});
var targetMesh = book.children[0].children[1],
newMesh = new THREE.Mesh(targetMesh.geometry, material);
book.children[0].children.push(newMesh);
Result, wrong geometry attributes, or am i missing something?.
But i think it could be a easier solution like using multiple textures at the same time with a correct order.
Full code:
sampleImage.onload = function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = sampleImage.width;
mapCanvas.height = sampleImage.height;
var ctx = mapCanvas.getContext('2d');
ctx.translate(sampleImage.width / 2, sampleImage.height / 2);
ctx.rotate(Math.PI);
ctx.translate(-sampleImage.width / 2, -sampleImage.height / 2);
ctx.drawImage(sampleImage, 0, 0, sampleImage.width, sampleImage.height);
var texture = new THREE.Texture(mapCanvas);
texture.minFilter = THREE.LinearFilter;
texture.needsUpdate = true;
var material = new THREE.MeshPhongMaterial({map: texture, transparent: true});
var targetMesh = book.children[0].children[1],
newMesh = new THREE.Mesh(targetMesh.geometry, material);
book.children[0].children.push(newMesh);
};
I found a solution with cloning.
Do not push directly to the mesh group using javascript array push.
use .add method.
book.children[0].add(newMesh);
I want to use multiple materials and multiple textures on meshes. I use 3 materials and a geometry.faceVertexUvs with two arrays of Uvs. One arrayof UVs for the first texture and one array of UVs for the second texture. However that doesn't quite work. Three.js always uses the uvs of the first array and geometry.faceVertexUvs[1] is never used. Do I have to put all the uvs in geometry.faceVertexUvs[0] for both textures or does it work differently? And if I have to put all uvs in geometry.faceVertexUvs[0] then I wonder why geometry.faceVertexUvs is an array at all. Explanation would be great. The Three.js documentation is not very detailed there.
here my sample code and tanks guys! Tom
var geometry = new THREE.BoxGeometry(60, 60, 60);
var texture1 = new THREE.TextureLoader().load( "../sons.png" );
var texture2 = new THREE.TextureLoader().load( "../Richard-branson.jpg" );
var material0 = new THREE.MeshBasicMaterial( {color:0xffff00});
var material1 = new THREE.MeshPhongMaterial({map:texture1, shininess:100});
var material2 = new THREE.MeshPhongMaterial({map:texture2, shininess:100});
for(var i=0; i< geometry.faces.length;i++){
geometry.faces[i].materialIndex = i%3;
geometry.faceVertexUvs[0][i][0] = new THREE.Vector2(0,0);
geometry.faceVertexUvs[0][i][1] = new THREE.Vector2(1,0);
geometry.faceVertexUvs[0][i][2] = new THREE.Vector2(0,1);
geometry.faceVertexUvs[1]= [];
geometry.faceVertexUvs[1][i] = [];
geometry.faceVertexUvs[1][i][0] = new THREE.Vector2(1,1);
geometry.faceVertexUvs[1][i][1] = new THREE.Vector2(1,0);
geometry.faceVertexUvs[1][i][2] = new THREE.Vector2(0,1);
}
var mesh = new THREE.Mesh(geometry, [material0, material1, material2]);
view.scene.add(mesh);
view.render();
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!
I'm trying to apply a texture to a planeGeometry using the three.js engine.
I should be seeing a football field, I'm actually seeing black.
If I replace the map:texture argument with color:0x80ff80, I get a field of solid green, demonstrating that the geometry is in the correct place.
The page contains an which appears in the files before any scripts. I can display that image, demonstrating that there isn't a problem with the image.
The files are being served locally by an http server.
The code I'm using to build the material and PlaneGeometry is below. Any ideas appreciated. Thank you.
function buildField( fieldLength, fieldWidth, scene) {
var image = document.getElementById("fieldTexture");
var texture = new THREE.Texture(image);
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.PlaneGeometry(fieldLength, fieldWidth, 5, 5);
var material = new THREE.MeshBasicMaterial( {map:texture, side:THREE.DoubleSide});
var field = new THREE.Mesh(geometry, material);
field.rotation.x = -Math.PI/2;
scene.add(field);
}
THREE.ImageUtils is already deprecated. (source)
Use THREE.TextureLoader().load('field.png') instead
Try this, own THREE.js methods usually work better...:
texture = THREE.ImageUtils.loadTexture('field.png');
material = new THREE.MeshBasicMaterial({map: texture});
var field = new THREE.Mesh(geometry, material);
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.