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 cannot recognize OBJ format files exported with NURBS?

Obj files exported by rhino software，How to Convert Mesh Surface into Surface in three.js
I tried flatShading and smoothShading, but it didn't work.
The following figure is the vertex normal
The following is a reflection map added.
var objLoader = new THREE.OBJLoader();
objLoader.setPath('models/obj/');
objLoader.load('ball2.obj', function (object) {
var materials = new THREE.MeshBasicMaterial({
color: 0xF3FFE2,
specular: 0xffffff,
// shininess: 2,
// shading:THREE.SmoothShading
// flatShading: true
// smoothShading:true,
envMap: scene.background
});
object.children.forEach(function (child) {
child.material = materials;
child.geometry.computeFaceNormals();
child.geometry.computeVertexNormals();
});
object.scale.set(15, 15, 15);
scene.add(object);
});
my modul https://gist.github.com/grayFinger/308a07877d3deb10ad0694f1ffa3c383
Please answer for me.What The effect I want is
.

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.

THREE.js. Change mesh position after applying EdgesHelper

I tried to rotate or change position of a mesh after applying EdgesHelper, but it doesn't work — mesh stays on the same position. (Without EdgesHelper it works fine). What am I doing wrong?
var mesh = new THREE.Mesh( geometry, material );
var edges = new THREE.EdgesHelper( mesh, 0xcf0000 );
edges.position.z = 100;
edges.position.x = 100;
scene.add( edges );

Looking into the source of THREE.EdgesHelper it seems that the matrixAutoUpdate is set to false. This prevents the computation of the position and rotation on every update.
https://github.com/mrdoob/three.js/blob/master/src/extras/helpers/EdgesHelper.js
Setting the matrixAutoUpdate of the EdgesHelper to true should do the trick, but calling the .updateMatrix() function after setting the new position or rotation seems cleaner.

I had the same problem, as suggested I added:
egh.matrixAutoUpdate = true;
That the edge and the cube followed my coordinates I used:
var cube = new THREE.Mesh( new THREE.CubeGeometry(width,height,depth),
new THREE.MeshBasicMaterial( {color: 0x00AA00, side:THREE.DoubleSide, opacity: 0.5, transparent: true } ) );
scene.add(cube);
var egh = new THREE.EdgesHelper(cube, 0x777777);
egh.material.linewidth = 1;
egh.position.x = cube.position.x;
egh.position.y = cube.position.y;
egh.position.z = cube.position.z;
egh.matrixAutoUpdate = true; // this helped
scene.add(egh);

How can I get the createMultiMaterialObject in THREE.js to work properly in r62?

I simply cannot make createMultiMaterialObject to work like I assume it's intended to work.
I want a wireframe material being displayed on top of a solid material. All the multimaterial does is display the first material defined in the array.
Heres the code:
var geometry = new THREE.PlaneGeometry( this.model.density.width, this.model.density.height, this.model.density.x, this.model.density.y);
var mat1 = new THREE.MeshBasicMaterial( { color: 0xd02000, transparent: true } )
var blackLines = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent:true, wireframe: true, wireframeLinewidth: 1 } );
var materials = [mat1, blackLines ];
this.plane = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
In the image below, the red 'ground' is the mesh that is supposed to have the multimaterial, although only one will ever show up (in this case a red MeshBasicMaterial).