We Keep Coding

I want to add custom ground material on my website using Meshphongmaterial

var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xff43fee, specular: 0x360000 ,} );
groundMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), groundMaterial );
groundMesh.rotation.x = - Math.PI / 2;
scene.add( groundMesh );
I want to add grass texture down but not getting any possible solution this code is taken from https://github.com/schteppe/gpu-physics.js this following github repo.

You need to create a Texture and send it as map property in the MechPhongMaterial constructor

Three.js multi-material implementation in r85

I'm trying to migrate multi-material to r85 but can't seem to see any result.
Previously I had:
mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material1, material2 ] );
mesh.children[1].material.transparent = true;
Example Pen.
Now I do:
materials = [ material1, material2 ];
mesh = new THREE.Mesh( geometry, materials );
material2.transparent = true;
Example Pen.
But I can't see both materials. Why?

How to view Intrinsic color of an STL file using three.js?

I have a binary STL colored file. I can see the color using the online mesh viewer http://www.viewstl.com/.
I am using the below standard approach to load and visualize the stl file, and it works well. However, the intrisic colors do not appear correctly and are too sensivite to light changes.
Detector.addGetWebGLMessage();
scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var d = 100;
camera = new THREE.OrthographicCamera( - d * aspect, d, d * aspect,- d, 1, 1000 );
camera.position.set( 0, 0, 200 );
camera.lookAt( scene.position );
scene.add( camera );
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 0;
directionalLight.position.y = 0;
directionalLight.position.z = 1;
directionalLight.position.normalize();
scene.add( directionalLight );
var loader = new THREE.STLLoader();
var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 0 } );
// Colored binary STL
var stlfile = "myBinarySTLColoredFile.stl"
loader.load( stlfile, function ( geometry ) {
var meshMaterial = material;
if (geometry.hasColors) {
meshMaterial = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
mesh = new THREE.Mesh( geometry, meshMaterial );
scene.add(
mesh.position.set(-100, -100, 0);
});
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true } );
renderer.setSize(....);
var container = document.getElementById('`enter code here`flex2');
Question: How to visualize the color enclosed in the STL file ?
Thanks

I finally succeed to render correctly the colored object.
I use PLYLoader instead of STLLoader.
Apparently, three.js STL api do not manage the color.

There is no right answer. The color will depend on the light.
See the clear thread Realistic lighting (sunlight) with Three.js?

To get the original colors and no directional lighting, remove the directional light and crank the ambient light up to full brightness:
...
scene.add( camera );
var light = new THREE.AmbientLight( 0xFFFFFF ); // Full-bright white light
scene.add( light );
var loader = new THREE.STLLoader();
...
If that doesn't give you the desired result, please add screenshots of the actual and desired visual look to your question.

This is an old question, but for anyone else who comes across it, I don't think the accepted answer about using the PLYLoader instead of the STLLloader is correct, the STLLoader appears to support embedded color in binary STLs just fine in the example.
One possible cause of the OP's issue using THREE.VertexColors in THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors }) instead of true as in the docs/example.

How to merge three.js meshes into one Mesh?

Is it possible in Three.js to merge two or more meshes, with different materials?
The solutions I've found, merges geometry only, or just puts the Meshes into one Object3D or Group.

Yes: Kind-of (see the comments attached to the question and this answer post):
var blueMaterial = new THREE.MeshPhongMaterial( {color: 0x0000FF } );
var redMaterial = new THREE.MeshPhongMaterial({ color:0xFF0000 });
var meshFaceMaterial = new THREE.MeshFaceMaterial( [ blueMaterial, redMaterial ] );
var boxGeometry = new THREE.BoxGeometry( 10, 10, 10 );
for ( var face in boxGeometry.faces ) {
boxGeometry.faces[ face ].materialIndex = 0;
}
var sphereGeometry = new THREE.SphereGeometry( 5, 16, 16 );
sphereGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, 5, 0) );
var mergeGeometry = new THREE.Geometry();
mergeGeometry.merge( boxGeometry, boxGeometry.matrix );
mergeGeometry.merge( sphereGeometry, sphereGeometry.matrix, 1 );
var mesh = new THREE.Mesh( mergeGeometry, meshFaceMaterial );
scene.add( mesh );
I went with a cube and a sphere because a box for example wants to know a material id for each of its faces.
http://jsfiddle.net/v49ntxfo/

show textures - maya to three.js

i need converted maya to js for simple model with textures
work fine but show without textures
my code:
var loader = new THREE.JSONLoader();
loader.load( "models/t2.js", function(geometry) {
var part1 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
mesh =new THREE.Object3D();
mesh.add( part1 );
//var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(30,30,30);
scene.add( mesh );
});
online demo : http://mika.ir/virtual-exhibition/
download code : http://mika.ir/virtual-exhibition/virtual-exhibition.rar

You have to pass in a texture to one of the material objects. Use either MeshLambertMaterial or MeshPhongMaterial and pass in a THREE.Texture. You first have to load the texture and pass a callback. I would do something like the following if the texture you want to load is 'path/texture.png':
var modelTexture = THREE.ImageUtils.loadTexture('path/texture.png', false, loadModel);
function loadModel() {
loader.load( "models/t2.js", function(geometry) {
var part1 = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ map: modelTexture });
mesh =new THREE.Object3D();
mesh.add( part1 );
//var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(30,30,30);
scene.add( mesh );
});
}