I need to create CubeGeometry with wireframe but without diagonals, I used BoxHelper but I cannot color cube. Can any one suggest me how to color cube using BoxHelper.
You have several options. Here are the patterns to follow:
var mesh = new THREE.Mesh( new THREE.BoxGeometry( 10, 10, 10 ), new THREE.MeshNormalMaterial() );
//scene.add( mesh ); // optional
var helper = new THREE.BoxHelper( mesh );
helper.material.color.set( 0x00ffff );
scene.add( helper );
// alternate method
var helper = new THREE.EdgesHelper( mesh, 0xff0000 );
scene.add( helper );
Here is a fiddle to help you: http://jsfiddle.net/Lv2jseLb/
note: CubeGeometry has been renamed to BoxGeometry.
three.js r.84
Related
I'm trying to use three.js to convert existing stls to gltf for use with the Android scene viewer (model-viewer component). However, the gltf I export fails to work with https://arvr.google.com/scene-viewer-preview with the error message "The glTF contains a vertex color, which is not supported by the Scene Viewer specification." It also fails when I load on an android phone using the model-viewer component, when I hit the AR button.
If I export a simple cube BoxBufferGeometry as gltf, that works in scene-viewer. However if I export a BoxGeometry (not Buffered) that also gives the vertex color error.
How do I tell three.js to not include vertex colors in the exported gltf?
The below code is what I'm using - the exportGLTF function is copied from the three.js examples. The stl file is just somthing simple I created from fusion 360.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.STLLoader();
loader.load( 'table.stl', function ( geometry ) {
var material = new THREE.MeshStandardMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
exportGLTF(mesh);
}, undefined, function ( error ) {
console.error( error );
} );
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshStandardMaterial();
cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 0, 0 );
cube.name = "Cube";
scene.add( cube );
exportGLTF(cube);
If you don't care about the vertex colors, you can just delete that attribute from the BufferGeometry that STLLoader produces. I found that Scene Viewer also doesn't like that the geometry is non-indexed. You can work around that with the mergeVertices function in BufferGeometryUtils.
Here's a working example: https://glitch.com/edit/#!/chartreuse-steed
var loader = new THREE.STLLoader();
loader.load(
stlUrl,
function(geometry) {
// Delete vertex colors, since Scene Viewer doesn't support them.
geometry.deleteAttribute("color");
// Apparently Scene Viewer also doesn't support non-indexed geometry,
// so we do this mergeVertices operation just to get an indexed geometry
geometry = THREE.BufferGeometryUtils.mergeVertices(geometry);
var material = new THREE.MeshStandardMaterial();
material.vertexColors = THREE.VertexColors;
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
exportGLTF(mesh);
},
undefined,
function(error) {
console.error(error);
}
);
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 Working with Threejs in which I'm Facing Problems with Textures, so I would like to ask A question that is, how to load the textures without starting the animation, it shows blank image without starting the animation. Can anyone tell me how to do that..
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var te = new THREE.ImageUtils.loadTexture("b4.jpg") ;
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
Did you try having a callback function to trigger after the texture is successfully loaded? Like how it is done in the documentation: TextureLoader
So something like:
var geometry = new THREE.PlaneGeometry( 15, 5.3, 2 );
var loader = new THREE.TextureLoader();
// load a resource
loader.load(
// resource URL
'b4.jpg',
// Function when resource is loaded
function ( texture ) {
// do something with the texture
var material = new THREE.MeshBasicMaterial( {color: "",map:te} );
plane = new THREE.Mesh( geometry, material);
plane.position.set(-12.89,-7.2,19);
plane.visible=false;
scene.add( plane );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
It's possible add an image to a cube face without change the base color of this?
I've trying this way but the base color turns black.
var loader = new THREE.TextureLoader();
loader.load( './img/arona.png', function ( texture ) {
var geometry = new THREE.BoxGeometry( 8 , 8 , 8 );
var material = new THREE.MeshBasicMaterial( { map: texture, color: 0xBC997A } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
And this is the result:
Thanks in advance.
Three.js is up to v66 and the Gizmo transform controls seemed to have stopped working.
See a demo here:
This is the basic code
var geometry = new THREE.CubeGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
var control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.attach( mesh );
scene.add( control.gizmo );
http://jsfiddle.net/Hq2Dx/5/
There is no apparent error but they do not appear. I've tried debugging but cannot isolate the issue. Anyone else managed to get it working?
Cheers
change your code.. it will do the trick.. check this fiddle... http://jsfiddle.net/Hq2Dx/7/
var control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.attach( mesh );
scene.add( control);