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;
Related
// Make a cube with Lambert material
// ---------------------------------
// Lower fragments can increase performance
var cubeWidth = cubeSize,
cubeHeight = cubeSize,
cubeDepth = 10,
cubeQuality = 1;
// create the cube's material
var cubeMaterial = new THREE.MeshLambertMaterial(
{
color: 0xb22222
}
);
// create a cube with sphere geometry and the meterial
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,
cubeHeight,
cubeDepth,
cubeQuality,
cubeQuality,
cubeQuality
),
cubeMaterial);
lift the cube to half of the playing space height
cube.position.z = fieldDepth/2;
set the cube x position in the left of the play field
cube.position.x = -fieldWidth/3;
----------add the cube to the scene-------------------------
scene.add(cube);
I have tried ;
var texture = new THREE.TextureLoader();
var texture1 = texture.load('scripts/kan.png');
cube = new THREE.Mesh(
new THREE.BoxGeometry(
cubeWidth,
cubeHeight,
cubeDepth,
cubeQuality,
cubeQuality,
cubeQuality
));
var cubeMaterial = new THREE.MeshBasicMaterial(
{
map: texture1
//color: 0xb22222
}
);
// create a cube with sphere geometry and the meterial
mesh = new THREE.Mesh( cube, cubeMaterial );
And this, but it didn't work
const texture = new THREE.TextureLoader().load( 'kan.png' );
var cubeMaterial = new THREE.MeshLambertMaterial(
{
//color: 0xb22222
map: texture
}
);
I am also getting the following error : THREE.Material: 'map' parameter is undefined
I am struggling to do something which should be quite easy to do, but I have been unable to find any example which addresses this scenario. Essentially all I want to do is extrude a simple profile along a rectangular path:
(As I am new here I cannot post images, but these can be viewed on the forum to explain what I should be getting and what I am actually generating.
Original Question on ThreeJS Forum)
I would appreciate it if someone could look at the code below and tell me what I am doing wrong:
'----------------------------------------------------------------------------------------------------------------
<script>
var container;
var camera, scene, renderer, controls;
init();
animate();
function init() {
//SCENE SETUP
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x222222 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( -250, 150, 200 );
camera.lookAt(new THREE.Vector3(0, -50, 0))
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.minDistance = 200;
controls.maxDistance = 500;
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.PointLight( 0xffffff );
light.position.copy( camera.position );
scene.add( light );
//PROFILE SHAPE
var spts = [];
spts.push(new THREE.Vector2(0, 0));
spts.push(new THREE.Vector2(10, 0));
spts.push(new THREE.Vector2(10, 25));
spts.push(new THREE.Vector2(-5, 25));
spts.push(new THREE.Vector2(-5, 20));
spts.push(new THREE.Vector2(0, 20));
//PATH POINTS
var ppth = []
ppth.push(new THREE.Vector3(0,0,10));
ppth.push(new THREE.Vector3(100, 0,10));
ppth.push(new THREE.Vector3(100, 200,10));
ppth.push(new THREE.Vector3(0, 200,10));
//-----------------------------------------------EXTRUSION PATH AS A CURVEPATH
var cpth = new THREE.CurvePath()
//THE FOLLOWING STATEMENT APEARS TO CREATE NO NEW CURVES
//cpth.createGeometry(ppth)
//ADD CURVES EXPLICITELY
var v1 = new THREE.LineCurve(new THREE.Vector3(0,0,0), new THREE.Vector3(100,0,0));
var v2 = new THREE.LineCurve(new THREE.Vector3(100,0,0), new THREE.Vector3(100,200,0));
var v3 = new THREE.LineCurve(new THREE.Vector3(100, 200, 0), new THREE.Vector3(0, 200, 0));
var v4 = new THREE.LineCurve(new THREE.Vector3(0, 200, 0), new THREE.Vector3(0, 0, 0));
cpth.add(v1);
cpth.add(v2);
cpth.add(v3);
cpth.add(v4);
cpth.autoClose = true;
//cpth.update;
//SET EXTRUSION PATH TO CURVEPATH
expth = cpth
//EXTRUSION SETTINGS
var extrudeSettings = {
steps: 200,
bevelEnabled: false,
extrudePath: expth
};
// GENERATE SCENE GEOMETRY
var shape = new THREE.Shape( spts );
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
var mesh = new THREE.Mesh( geometry, material2 );
mesh.position.x = -50;
mesh.position.y = -100;
scene.add( mesh );
}
</script>
Although at a high level, the concept may look simple, code wise, it may not be so.
I did peak at your link regarding the original question posted on the threejs forum and seems like someone did provid somewhat the solution, if not something close.
But at a high level, I believe the solution can be done in high level steps.
1 - find the new points extruded outward staying on the same plane. This can be done with the solution to a recent post of mine offset 2d polygon points
2 - Once you have those new points, you should be able to create the 2D shape with ShapeGeometry in conjunction with the original profile points using ShapteUtils.triangulateShape() to define a hole in the shape when building the triangles.
3 - Once you have your new defined 2D shape, use ExtrudeGeometry to give it depth.
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 having an issue where it looks like the cube and sphere are clipping with the plane. It seems to happen when I move the cube (using the keyboard) toward the back of the scene. It also happens when I use the trackball controls to move around the scene. Sometimes the cube and sphere are visible even when I turn the camera so I am looking at the bottom of the plane.
Some code that might be of use, contains camera variables, creation of plane, sphere, and cube. I have images too: http://imgur.com/0VlZLmP
//CAMERA
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;
//Renderer
ShapeShifter.renderer = new THREE.CanvasRenderer();
//Sphere
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0x8888FF, overdraw: true } );
ShapeShifter.sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
ShapeShifter.sphere.position.set( 100, 50, -10 );
ShapeShifter.scene.add( ShapeShifter.sphere );
//Cube
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xFF4422 } );
ShapeShifter.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
ShapeShifter.scene.add( ShapeShifter.cube );
ShapeShifter.cube.position.set( -40, 50, 200 );
//Floor
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( { color: 0x4DBD33, overdraw: true } );
ShapeShifter.floor = new THREE.Mesh( floorGeometry, floorMaterial );
ShapeShifter.floor.material.side = THREE.DoubleSide;
ShapeShifter.floor.position.y = 0;
ShapeShifter.floor.rotation.x = Math.PI / 2;
ShapeShifter.scene.add( ShapeShifter.floor );
This is a known limitation of CanvasRenderer.
You can reduce these artifacts by increasing the tessellation of your geometry -- particularly the plane.
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 ); // will help
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50, 2, 2, 2 ); // may help
I have a cube geometry and a mesh, and i don't know how to change the width (or height... i can change x, y and z though).
Here's a snippet of what i have right now:
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
// WebGL renderer here
function render(){
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
function changeStuff(){
mesh.geometry.width = 500; //Doesn't work.
mesh.width = 500; // Doesn't work.
geometry.width = 500; //Doesn't work.
mesh.position.x = 500// Works!!
render();
}
Thanks!
EDIT
Found a solution:
mesh.scale.x = 500;
Just to complete comment and solution from question (and have an answer present with example code):
// create a cube, 1 unit for width, height, depth
var geometry = new THREE.CubeGeometry(1,1,1);
// each cube side gets another color
var cubeMaterials = [
new THREE.MeshBasicMaterial({color:0x33AA55, transparent:true, opacity:0.8}),
new THREE.MeshBasicMaterial({color:0x55CC00, transparent:true, opacity:0.8}),
new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.8}),
new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.8}),
new THREE.MeshBasicMaterial({color:0x0000FF, transparent:true, opacity:0.8}),
new THREE.MeshBasicMaterial({color:0x5555AA, transparent:true, opacity:0.8}),
];
// create a MeshFaceMaterial, allows cube to have different materials on each face
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
var cube = new THREE.Mesh(geometry, cubeMaterial);
cube.position.set(0,0,0);
scene.add( cube );
cube.scale.x = 2.5; // SCALE
cube.scale.y = 2.5; // SCALE
cube.scale.z = 2.5; // SCALE
A slightly advanced, dynamic example (still the same scaling) implemented here:
You can dispose the geometry of cube and affect the new one like this :
let new_geometry = new THREE.CubeGeometry(500,200,200);
geometry.dispose();
cube.geometry = new_geometry;
Scale properties can be used to for changing width, height and and depth of cube.
//creating a cube
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color:"white"});
var cube = new THREE.Mesh(geometry, material);
//changing size of cube which is created.
cube.scale.x = 30;
cube.scale.y = 30;
cube.scale.z = 30;