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
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>
I'm trying to create 3d dice with texture maps on a cube. If I just load a single texture it displays fine (although, of course, I can't specify different images for each side). I tried using CubeTextureLoader but I get a totally garbled texture (Here's what I see). Any suggestions?
// This doesn't work
THREE.CubeTextureLoader().load(['/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png',
'/public/images/dice6-red.png'], function(texture) {
var geometry = new THREE.BoxGeometry( 2,2,2 );
var material = new THREE.MeshPhongMaterial({color: 0xffffff,
map: texture});
var cube = new THREE.Mesh( geometry, material );
cube.position.x = 10;
cube.position.y = -20;
self._scene.add(cube);
self.update();
});
// This works fine
new THREE.TextureLoader().load('/public/images/dice6-red.png', function(texture) {
var geometry = new THREE.BoxGeometry( 2,2,2 );
var material = new THREE.MeshBasicMaterial({color: 0xffffff,
map: texture});
var cube = new THREE.Mesh( geometry, material );
cube.position.y = -20;
self._scene.add(cube);
self.update();
});
To place different images on the sides of a cube in the current version of Three.js (v93), use an array of materials in the mesh constructor. For example:
let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );
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?
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