Is there something equivalent to CSS's overflow: hidden in aframe? For example, can I constrain an entire to be within a bounding and have everything that is bigger than the box geometry to be hidden/invisible?
There is clipping planes: https://threejs.org/examples/webgl_clipping.html
https://github.com/mrdoob/three.js/blob/master/examples/webgl_clipping.html
// ***** Clipping planes: *****
var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
// Geometry
var material = new THREE.MeshPhongMaterial( {
color: 0x80ee10,
shininess: 100,
side: THREE.DoubleSide,
// ***** Clipping setup (material): *****
clippingPlanes: [ localPlane ],
clipShadows: true
} );
var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
object = new THREE.Mesh( geometry, material );
Related
I followed a example to create a planet ring with the following code.
createRing(){
const TEXTURE_PATH = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123879/';
let loader = new THREE.TextureLoader();
loader.setCrossOrigin( 'https://s.codepen.io' );
var ringTexture = loader.load( TEXTURE_PATH + 'saturnrings.png' );
let saturnRadius = 0.98;
var ringGeometry = new THREE.RingGeometry(1.4 * saturnRadius, 2.5 * saturnRadius, 2 * 32, 5, 0, Math.PI * 2);
var ringMaterial = new THREE.MeshBasicMaterial({
map: ringTexture,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.7,
});
var ring = new THREE.Mesh( ringGeometry, ringMaterial );
scene.add(ring);
}
the code works to show a planet and planet ring as shown in the image below.
then I tried to rotate the ring with the code,
ring.rotation.set(new THREE.Vector3( Math.PI / 2, 0, 0 ));
however the ring just disappear with only the planet left.
what goes wrong with it
I would like to draw a plane in ThreeJS with a point (e. g. 0, 10, 20) and a normal vector for the plane orientation. I simply just do no get the position or the orientation right. Please help me out. Regards
Here are two ways I've tried (with PlaneHelper):
const plane = new THREE.Plane(new THREE.Vector3(10, 10, 10), 3)
// does not work: planeObj.translate(new THREE.Vector3(100, 100, 100))
const helper = new THREE.PlaneHelper(plane, 50, 0x00ffff);
this.scene.add( helper )
Or without the PlaneHelper:
const geometry = new THREE.PlaneGeometry( 50, 50, 32 );
geometry.translate(100, 0, 0)
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
// normal orientation missing
I tried to export the bent text geometry in the example of https://threejs.org/examples/webgl_modifier_curve.html by OBJExporter.js. But the result text geometry exported was not bent as seen in the scene.
The code of "new OBJExporter..." was added after the code line "scene.add( flow.object3D );"
Please advise where I should put the exporter code and what steps I missed to get the text geometry with modified vertices? Great thanks for help!
const loader = new THREE.FontLoader();
loader.load( "fonts/Microsoft_YaHei_Regular.json", function (
font
) {
const geometry = new THREE.TextGeometry( "1 234567890", {
font: font,
size:0.25,
height: 0.02, //0.05 thickness
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.02,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 5,
} );
geometry.rotateX( Math.PI );
geometry.rotateY( Math.PI );
const material = new THREE.MeshStandardMaterial( {
color: 0x99ffff
} );
const objectToCurve = new THREE.Mesh( geometry, material );
flow = new Flow( objectToCurve );
flow.updateCurve( 0, curve );
scene.add( flow.object3D );
const exporter = new OBJExporter();
const result = exporter.parse(flow.object3D);
The vertex displacement of the modifier happens on the GPU (in the vertex shader). So you can't use any of the exporters to export the bent/modified geometry.
I'm attempting to create a sphere in three.js with a base material and a transparent png material over the top. I found this answer helpful in understanding how to load multiple materials. However when I try to apply this to SphereGeometry rather than BoxGeometry as in the example, only the second material is visible, with no transparency.
http://jsfiddle.net/oyamg8n3/1/
// geometry
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
geometry.clearGroups();
geometry.addGroup( 0, Infinity, 0 );
geometry.addGroup( 0, Infinity, 1 );
geometry.addGroup( 0, Infinity, 2 );
geometry.addGroup( 0, Infinity, 3 );
// textures
var loader = new THREE.TextureLoader();
var splodge = loader.load( 'https://threejs.org/examples/textures/decal/decal-diffuse.png', render );
var cat = loader.load('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80.jpeg', render)
// materials
var catMat = new THREE.MeshPhongMaterial( {
map: cat,
} );
var splodgeMat = new THREE.MeshPhongMaterial( {
map: splodge,
alphaTest: 0.5,
} );
var materials = [ catMat, splodgeMat ];
// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
Can I use these same principles for
var geometry = new THREE.SphereGeometry( 5, 20, 20 );
It does work if you use SphereBufferGeometry and not SphereGeometry. Notice that both classes have a different super class. You want to work with the BufferGeometry version.
Demo: http://jsfiddle.net/r6j8otz9/
three R105
I'm creating a cube and I apply 6 different textures to each of it's faces. Each texture is a .png file and contains transparent parts. I'm also applying a color to the cube - I want to see that color trough png transparency.
Problem: Transparency renders as white color so I cannot see the base color of the cube (which renders ok if I remove the png texture)
How can I make the png transparency work? I tried playing with some material settings but none make it transparent.
Code for creating the cube and materials:
var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];
// create textures array for all cube sides
for (var i = 1; i < 7; i++) {
var img = new Image();
img.src = 'img/s' + i + '.png';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function () {
this.tex.needsUpdate = true;
};
var mat = new THREE.MeshBasicMaterial({color: 0x00ff00, map: tex, transparent: true, overdraw: true });
materials.push(mat);
}
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);
EDIT:
Picture below shows the problem - with senthanal solution the left texture now renders ok - it is a png image without transparency - I set the transparency in code with
materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 }));
The right texture is also a png image - only that it has a transparent area (all that renders white should be pure red since it is transparent and should take the color from the cube?). How can I make that white part transparent?
the opacity attribute of material does the trick for you. Follows, example code snippet:
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
MovingCube.position.set(0, 25.1, 0);
scene.add( MovingCube );
http://threejs.org/docs/#Reference/Materials/Material The key is to set transparent attribute true and set opacity to 0.5(for example).
Add the second the cube which fits inside exactly with no transparency, idea from #WestLangley ( Three.js canvas render and transparency )
backCube = new THREE.Mesh( MovingCubeGeom, new THREE.MeshBasicMaterial( { color: 0xFF0000 }) );
backCube.position.set(0, 25.1, 0);
backCube.scale.set( 0.99, 0.99, 0.99 );
scene.add( backCube );
for those looking for a simple transparent png import helper:
import { MeshBasicMaterial, TextureLoader } from 'three'
export const importTexture = async(url, material) => {
const loader = new TextureLoader()
const texture = await loader.loadAsync(url)
material.map = texture
material.transparent = true
material.needsUpdate = true
return texture
}
//usage
const geo = new PlaneGeometry(1, 1)
const mat = new MeshBasicMaterial()
const mesh = new Mesh(geo, mat)
scene.add(mesh)
//this is asynchronous
importTexture('path/to/texture.png', mat)