I am trying to add a plane to the scene but if I check children's scene nothing is added.
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffff00, opacity: 0.25 } ) );
plane.visible = true;
this.scene.add( plane );
try this:
var geo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8);
var mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
var plane = new THREE.Mesh(geo, mat);
scene.add(plane);
if you want to use the plane as a floor, you have to rotate it.
plane.rotateX( - Math.PI / 2);
Related
I have a basic scene in threejs that loads a .stl file, it loads normally, but it automatically changes color and I also want it to have its original color What do I have to do to fix it?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 500 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.center = new THREE.Vector3();
// var geometry = new THREE.BoxGeometry( 3, 1, 1 );
// var material = new THREE.MeshBasicMaterial( { color: 'skyblue' } );
// var cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
var loader = new THREE.STLLoader();
loader.load( 'js/novo/undefined.stl', function ( geometry ) {
console.log(geometry);
var mesh = new THREE.Mesh(geometry);
mesh.scale.set( 0.1, 0.1, 0.1 );
// mesh.rotation.set( - Math.PI / 2, Math.PI / 2, 0 );
// mesh.scale.set( 0.3, 0.3, 0.3 );
// mesh.receiveShadow = true;
scene.add( mesh );
});
camera.position.z = 300;
var animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};
animate();
How should be:
How are you doing:
You are not applying a material to your Mesh.
var mesh = new THREE.Mesh(geometry);
When a mesh is created, if you do not specify a material, a random colored BasicMaterial is applied which can be seen if you look at the THREE.Mesh source.
function Mesh( geometry, material ) {
Object3D.call( this );
this.type = 'Mesh';
this.geometry = geometry !== undefined ? geometry : new BufferGeometry();
this.material = material !== undefined ? material : new MeshBasicMaterial( { color: Math.random() * 0xffffff } );
this.drawMode = TrianglesDrawMode;
this.updateMorphTargets();
}
So, to fix your problem, create some sort of material, and send it to the Mesh constructor as the second parameter.
eg.
// create a red material.
var myMaterial = new THREE.MeshBasicMaterial({color: 0xff0000})
// create mesh with red material applied
var mesh = new THREE.Mesh(geometry, myMaterial);
you can find here how to change color or texture for your loader
var loader = new THREE.STLLoader();
loader.load('./FA-FF/FA.STL', function (geometry) {
/* different texture */
var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/wood.jpg') });
/* for different color */
var material = new THREE.MeshPhongMaterial({ color: 0xAAAAAA, specular: 0x111111, shininess: 200 });
var mesh = new THREE.Mesh(geometry, material);
mesh.name = "first";
mesh.position.set(-1, 1, 0);
mesh.rotation.set(1.5707963267948963, -8.326672684688674, -1.570796326794894);
mesh.scale.set(0.005, 0.005, 0.005);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
});
I am triyng to learn three.js I want to dra a basic triangle however my codes do not work.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.Geometry();
geometry.vertices= [new THREE.Vector3(2,1,0), new THREE.Vector3(1,3,0), new THREE.Vector3(3,4,0)];
geometry.faces = [new THREE.Face3(0,1,2)];
var mesh= new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ color: 0xffff00 }) );
scene.add(mesh);
renderer.render(scene, camera);
Where i am doing it wrong?
With Faces
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0, 0, 0);
var v2 = new THREE.Vector3(30, 0, 0);
var v3 = new THREE.Vector3(30, 30, 0);
var triangle = new THREE.Triangle(v1, v2, v3);
var normal = triangle.normal();
geom.vertices.push(triangle.a);
geom.vertices.push(triangle.b);
geom.vertices.push(triangle.c);
geom.faces.push(new THREE.Face3(0, 1, 2, normal));
var mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());
scene.add(mesh);
Just Outline
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));
geometry.vertices.push(new THREE.Vector3(2, 30, 2));
geometry.vertices.push(new THREE.Vector3(30, 2, 2));
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));
var line = new THREE.Line(
geometry,
new THREE.LineBasicMaterial({ color: 0x00ff00 })
);
scene.add(line);
It's funny how hard was to find an updated answer, since Geometry was deprecated in recent versions of Three.js the way I found to draw a plane triangle is with Shape primitive.
const shape = new THREE.Shape();
const x = 0;
const y = 0;
shape.moveTo(x - 2, y - 2);
shape.lineTo(x + 2, y - 2);
shape.lineTo(x, y + 2);
const TriangleGeometry = new THREE.ShapeGeometry(shape);
based on https://threejs.org/docs/index.html?q=ShapeGeometry#api/en/geometries/ShapeGeometry
You have to be careful with the order in which you add the vertices to the face. If the order follows a clockwise order, the normal vector of the surface will point down. And since your camera looks from above, you won't see the triangle. If the order is counterclockwise, the normal will point towards your camera.
It will work if you change:
geometry.faces = [new THREE.Face3(0,1,2)];
To:
geometry.faces = [new THREE.Face3(1,0,2)];
You can also use the argument side, which applies it to both sides of the face.new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide };
This my code:
var materialNormal = new THREE.MeshNormalMaterial();
var cubeGeometry = new THREE.CubeGeometry( 20, 500, 1000, 1, 1, 1 );
var cubeMesh = new THREE.Mesh( cubeGeometry );
cubeMesh.position.set(-50, 60, 0);
//scene.add(cubeMesh); //Meu
var cubeBSP = new ThreeBSP( cubeMesh );
var cubeGeometry = new THREE.CubeGeometry( 90, 90, 90, 1, 1, 1 );
var mat = new THREE.MeshBasicMaterial({color:0xffffff, shading: THREE.FlatShading, overdraw:0.5});
var cube3Mesh = new THREE.Mesh( cubeGeometry, mat );
cube3Mesh.position.set(-50, 60, 0);
//scene.add(cubeMesh); //Meu
var cubeOutroBSP = new ThreeBSP( cube3Mesh );
// Example #1 - Cube subtract
var newBSP = cubeBSP.subtract(cubeOutroBSP);
var newMesh = newBSP.toMesh(materialNormal);
newMesh.position.set(-180, 60, 0);
scene.add( newMesh );
How do I add texture to the object that was generated by subtraction?
The mesh returned by three.CSG is like a default three.js mesh where you can apply a material with a texture to.
In your example this would be newMesh, so do:
var texture = THREE.ImageUtils.loadTexture('yourtexture.jpg');
var material = new THREE.MeshPhongMaterial( { map: texture } );
//...
var newMesh = newBSP.toMesh( material );
newMesh.position.set(-180, 60, 0);
scene.add( newMesh );
I have a simple Three.js code that works properly in Three.js v68 but it displays 2 cubes instead of a cube and a sphere in Three.js v71. If I draw the sphere first it will draw two spheres.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var CubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var CubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( CubeGeometry, CubeMaterial );
scene.add( cube );
var spheregeometry = new THREE.SphereGeometry(1, 16, 16);
var spherematerial = new THREE.MeshBasicMaterial({ color: 0x00ff00});
var sphere = new THREE.Mesh(spheregeometry, spherematerial);
sphere.position.set(-2.0, 0, 0);
scene.add(sphere);
renderer.render(scene, camera);
PRoblem: i'm trying to create (just for fun) a simple poker card (with a card back and a card front).
I have two different images, for back and front.
I easily created a Plane geometry with a single texture for both sides, but i really don't know how to assign a texture for a side and the other texture for the other side...
i tried this (without success :( ):
var textureBack = new THREE.ImageUtils.loadTexture( 'images/cardBack.png' );
var textureFront = new THREE.ImageUtils.loadTexture( 'images/cardFront.png' );
var material1 = new THREE.MeshBasicMaterial( { map: textureBack } );
var material2 = new THREE.MeshBasicMaterial( { map: textureFront } );
var geometry = new THREE.PlaneGeometry( 90, 110, 1, 1 );
geometry.faces[ 0 ].materials.push( material1 );
geometry.faces[ 1 ].materials.push( material2 );
var card = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());
any help, please? :)
Was searching for solution without duplicating all my geometry.
Here you go ladies and gentlemen...
var materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];
var geometry = new THREE.PlaneGeometry(width, height);
for (var i = 0, len = geometry.faces.length; i < len; i++) {
var face = geometry.faces[i].clone();
face.materialIndex = 1;
geometry.faces.push(face);
geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
}
scene.add(new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)));
BOOM a Two Faced Plane for ya, the loop will also work with geometries with more faces, replicating each face and applying the BackSide texture to it.
Enjoy!
You need to place two plane geometries back-to-back.
First, create a geometry for the front.
var geometry1 = new THREE.PlaneGeometry( 90, 110, 1, 1 );
Now create another geometry for the back.
var geometry2 = new THREE.PlaneGeometry( 90, 110, 1, 1 );
Spin it 180 degrees.
geometry2.applyMatrix( new THREE.Matrix4().makeRotationY( Math.PI ) );
After you load the materials, create the meshes, and add them as children of a "card" object.
// textures
var textureFront = new THREE.ImageUtils.loadTexture('images/cardFront.png' );
var textureBack = new THREE.ImageUtils.loadTexture('images/cardBack.png' );
// material
var material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: textureFront } );
var material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: textureBack } );
// card
card = new THREE.Object3D();
scene.add( card );
// mesh
mesh1 = new THREE.Mesh( geometry1, material1 );
card.add( mesh1 );
mesh2 = new THREE.Mesh( geometry2, material2 );
card.add( mesh2 );
You'll have an easier time with this if you use WebGLRenderer.
Fiddle: http://jsfiddle.net/mdAb7/11/
Updated to three.js r.69