I am able to read successfully stl file by three.js but problem is that is not showing exact color which is defined in the stl file. My code looks like:
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
if (geometry.hasColors) {
material = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, specular: 0x111111, ambient: 0x555555, opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = x - w/2;
mesh.position.y = y;
mesh.position.z = - h + h/2 + z/2;
//mesh.rotation.set( 0.5, 0, 0 );
mesh.castShadow = true;
mesh.receiveShadow = true;
board.add(mesh);
} );
loader.load( fileName );
But its showing only black color after applying vertex color.
Any suggestion?
Related
I've tried to add Bounding Box to my object but it seems to work only for the testObj, he does not work for my others objects with texture.
var testObj = new THREE.Mesh(
new THREE.CylinderGeometry( 1 , 1 , 4 , 8 ),
new THREE.MeshLambertMaterial({ color: 0xff00ff })
);
scene.add(testObj );
staticCollideMesh.push(testObj );
// PADDLE1
loaderTexture.load('http://localhost:8000/WoodTexture.jpg', function (texture ) {
var material = new THREE.MeshLambertMaterial( {
map: texture
});
var geometry = new THREE.BoxGeometry(PADDLE_WIDTH, PADDLE_HEIGHT, PADDLE_DEPTH );
paddle1 = new THREE.Mesh( geometry, material);
paddle1.castShadow = true;
paddle1.receiveShadow = true;
paddle1.name = "paddle1";
scene.add( paddle1 );
staticCollideMesh.push(paddle1);
}, undefined, function ( err ) {
console.error( 'WoodTexture1.jpg : An error happened.' );
}
);
This is how I add BBox and BoxHelper :
let constructCollisionBoxes = function() {
staticCollideMesh.forEach( function( mesh ){
mesh.BBox = new THREE.Box3().setFromObject( mesh );
mesh.BBoxHelper = new THREE.BoxHelper( mesh , 0xff0000 );
scene.add( mesh.BBoxHelper );
});
}
I don't know why the loop just apply for my cylinder ... I need help to understand why this is not working.
EDIT: thanks to #prisoner849 I just added the function in the loader
scene.add(paddle1);
staticCollideMesh.push(paddle1);
constructionCollisionMesh();
In case of using loaders, keep in mind, that loading is asynchronous, so when you call constructCollisionBoxes(), your box, whose creation relies on the moment of finishing of loading of the texture, is not in the staticCollideMesh array yet.
To fix it, you can do it this way:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));
var staticCollideMesh = [];
var PADDLE_WIDTH = 3,
PADDLE_HEIGHT = 3,
PADDLE_DEPTH = 2;
var testObj = new THREE.Mesh(
new THREE.CylinderGeometry(1, 1, 4, 8),
new THREE.MeshLambertMaterial({
color: 0xff00ff
})
);
scene.add(testObj);
staticCollideMesh.push(testObj);
var texture = new THREE.TextureLoader().load(`https://threejs.org/examples/textures/uv_grid_opengl.jpg`);
// PADDLE1
var material = new THREE.MeshLambertMaterial({
map: texture
});
var geometry = new THREE.BoxGeometry(PADDLE_WIDTH, PADDLE_HEIGHT, PADDLE_DEPTH);
paddle1 = new THREE.Mesh(geometry, material);
paddle1.castShadow = true;
paddle1.receiveShadow = true;
paddle1.name = "paddle1";
scene.add(paddle1);
staticCollideMesh.push(paddle1);
let constructCollisionBoxes = function() {
staticCollideMesh.forEach(function(mesh) {
mesh.BBox = new THREE.Box3().setFromObject(mesh);
mesh.BBoxHelper = new THREE.BoxHelper(mesh, 0xff0000);
scene.add(mesh.BBoxHelper);
});
}
constructCollisionBoxes();
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
body {
overflow: hidden;
margin: 0;
}
<script src="https://unpkg.com/three#0.115.0/build/three.min.js"></script>
<script src="https://unpkg.com/three#0.115.0/examples/js/controls/OrbitControls.js"></script>
How remove of hide loaded.load three.js according to the condition for example id the door condition = 0, if will load the flame.stl and reverse
function checkDoorStatus(isDoorOpen, prevIsDoorOpen){
if ( isDoorOpen == 1)
{
var loader = new THREE.STLLoader();
loader.load( 'model/panic.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xa80306, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0.145, -0.3, -0.29);
mesh.rotation.set( 0 , 0, Math.PI / 2 );
mesh.scale.set( 0.05, 0.05, 0.05);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
//console.log("Panic 1");
}
else if (isDoorOpen == 0)
{
var loader = new THREE.STLLoader();
loader.load( 'model/flame.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xa80306, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0.145, -0.3, -0.29);
mesh.rotation.set( 0 , 0, Math.PI / 2 );
mesh.scale.set( 0.05, 0.05, 0.05);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
//console.log("Panic 0");
}
}
According to my understanding, you want to show only one mesh at a time based on some condition. If that is the case, one possible solution is give a name to your mesh before adding to the scene and remove the old door based on its name before adding the new one. For example
mesh.name = "openDoor";
scene.remove(scene.getObjectByName("closedDoor"));
scene.add( mesh )
Hope it helps.
taken from AlteredQualia demo:
map = THREE3.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" );
map.wrapS = map.wrapT = THREE3.RepeatWrapping;
map.repeat.set( 16, 16 );
var planeGeo = new THREE3.PlaneGeometry( 200, 200 );
ground = new THREE3.Mesh( planeGeo, new THREE3.MeshPhongMaterial( { color: 0xffffff, ambient: 0xffffff, specular: 0x111111, shininess: 50, map: map, perPixel: true, metal: true } ) );
I have extracted png data from an HTML canvas with ExtJS Ext.getDom('cnvs_img').src; into a var and the var string starts " data:image/png;base64, ..." so think it is valid. I want to use this data instead of loading from disk with loadTexture. Would appreciate some pointers, thanks.
THREE3.ImageUtils.loadTexture( imgVar ) does not work of course :-)
To load a texture from a dataURL, you can follow this pattern:
var image = document.createElement( 'img' );
image.src = dataURL;
image.onload = function() {
var texture = new THREE.Texture( image );
texture.needsUpdate = true; // important!
var material = new THREE.MeshLambertMaterial( {
color: 0xffffff,
map: texture
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
};
three.js r.67
Demo Can be seen here
I'm using a rather small image to make the skybox and for some reason it's being stretched instead of tiled. I found this tutorial on how to pattern a texture. I noted these lines
var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
crateTexture.wrapS = crateTexture.wrapT = THREE.RepeatWrapping;
crateTexture.repeat.set( 5, 5 );
var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
var crate = new THREE.Mesh( cubeGeometry.clone(), crateMaterial );
crate.position.set(60, 50, -100);
scene.add( crate );
So I tried using this method for the skybox and it didn't produce any change
var path = "/images/";
var urls = [
path + 'startile.png', path + 'startile.png',
path + 'startile.png', path + 'startile.png',
path + 'startile.png', path + 'startile.png'
];
var textureCube = THREE.ImageUtils.loadTextureCube( urls , new THREE.CubeRefractionMapping() );
textureCube.wrapS = textureCube.wrapT = THREE.RepeatWrapping;
textureCube.repeat.set( 10, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
// Skybox
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 1200, 1200, 1200 ), material );
//mesh.overdraw = false;
// mesh.rotation.x = Math.PI * 0.1;
scene.add( mesh );
Any ideas?
Tiling is not supported for texture cubes. However, in your case, since all faces of your cube are identical, you can do something like this:
var geometry = new THREE.CubeGeometry( 1000, 1000, 1000 );
var texture = THREE.ImageUtils.loadTexture( "startile.png" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
var material = new THREE.MeshBasicMaterial( {
color: 0xffffff,
map: texture,
side: THREE.BackSide
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
three.js r.59
I search to repeat texture on the model. On all examples or questions I found only this like as:
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 3, 3 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );
I understand this, but when the material is written like this:
Wood: new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0xffffff,
shininess: 10,
map: new THREE.ImageUtils.loadTexture ( "models/macabann/chataigner.jpg"),
// not sure as right
WrapS : THREE.RepeatWrapping,
WrapT : THREE.RepeatWrapping,
maprepeat : [2,2],
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.05
} )
I search how to write exactly this in this format if is possible.
Thanks for any answers.
You want a texture to repeat on you model. To do so, follow this pattern:
var loader = new THREE.TextureLoader();
var texture = loader.load( 'myTexture.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 2, 2 );
} );
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0x111111,
shininess: 10,
map: texture,
. . .
} );
EDIT: Updated to three.js r.84