Looking for advice on successfully implementing createMultiMaterialObject in THREE.js version r62?

Question

Looking for advice on successfully implementing createMultiMaterialObject in THREE.js version r62?

I am having trouble getting createMultiMaterialObject to work as expected. My goal is to have a wireframe material displayed on top of a solid material. However, the multimaterial function only seems to display the first material in the array.

Here is the code snippet:

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 provided, the red 'ground' represents the mesh that should have the multimaterial applied to it. However, only one material (in this case, a red MeshBasicMaterial) is showing up.

javascript three.js

Answer 1

Answer №1

Stumbled upon this awesome Codepen that demonstrates how to achieve this:

Take a look at the code below:

var renderer, scene, camera, cube;

var ww = window.innerWidth,
  wh = window.innerHeight;

function init() {

  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('scene')
  });
  renderer.setSize(ww, wh);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
  camera.position.set(0, 0, 500);
  scene.add(camera);

  //Generate cube on the scene
  createCube();
}


var createCube = function() {

  //Simple box geometry
  var geometry = new THREE.BoxGeometry(150, 150, 150);

  //Create a basic material with green color
  var basicMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });

  //Create a material just for the wireframe
  var wireframeMaterial = new THREE.MeshBasicMaterial({
    wireframe: true
  });

  //createMultiMaterialObject will create a Mesh for each material in the array
  //We will get 2 cubes in a 3D object
  //You can check with the console that the scene has 2 children, the camera and a 3D object
  //The 3D object contains 2 Mesh with respective material (color for the 1st and wireframe for the 2nd)
  cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [basicMaterial, wireframeMaterial]);

  //Add my cube on the scene
  if (scene) {
    scene.add(cube);
  }

  //Launch animation of the scene
  render();
};

var render = function() {
  requestAnimationFrame(render);

  if (cube) {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }


  renderer.render(scene, camera);
};

init();

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

<canvas id="scene"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

Answer 2

Stumbled upon this awesome Codepen that demonstrates how to achieve this:

Take a look at the code below:

var renderer, scene, camera, cube;

var ww = window.innerWidth,
  wh = window.innerHeight;

function init() {

  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('scene')
  });
  renderer.setSize(ww, wh);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
  camera.position.set(0, 0, 500);
  scene.add(camera);

  //Generate cube on the scene
  createCube();
}


var createCube = function() {

  //Simple box geometry
  var geometry = new THREE.BoxGeometry(150, 150, 150);

  //Create a basic material with green color
  var basicMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });

  //Create a material just for the wireframe
  var wireframeMaterial = new THREE.MeshBasicMaterial({
    wireframe: true
  });

  //createMultiMaterialObject will create a Mesh for each material in the array
  //We will get 2 cubes in a 3D object
  //You can check with the console that the scene has 2 children, the camera and a 3D object
  //The 3D object contains 2 Mesh with respective material (color for the 1st and wireframe for the 2nd)
  cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [basicMaterial, wireframeMaterial]);

  //Add my cube on the scene
  if (scene) {
    scene.add(cube);
  }

  //Launch animation of the scene
  render();
};

var render = function() {
  requestAnimationFrame(render);

  if (cube) {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }


  renderer.render(scene, camera);
};

init();

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

<canvas id="scene"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

Looking for advice on successfully implementing createMultiMaterialObject in THREE.js version r62?

Answer №1

Similar questions

Problem: Values are not being posted with AJAX when using $(form).serialize()

JavaScript code can be enhanced with HTML comments to improve readability

Utilizing HTML and Javascript for streaming audio and recording voice

Utilizing PHP, Javascript, and jQuery in mobile technology gadgets

for each and every object, execute the asynchronous function

The caption below the image is not functioning correctly when hovering over it

How to use RegExp to locate the final return statement within a JavaScript code string

Tips for creating a responsive iframe without relying on aspect ratio assumptions

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Choosing multiple items using ng-checked and ng-model in AngularJS

Lack of animation on the button

The JavaScript file specified in the script tag's src attribute was successfully downloaded, but it did not execute as expected after being fetched

Using jQuery and JavaScript to swap images depending on the option chosen in a dropdown menu

Incorporating CKEditor with ASP.NET: A Seamless Integration

Incorporated React component from Rails-assets.org into a Rails application

Utilize Vue.js and express.js to distribute HTML files securely

Using AngularJS, generate a JSON array with a specified key

What is the best way to make a canvas element fit the entire browser window without causing scroll bars to appear?

When it comes to MongoDB aggregation, the order of indexes is not taken into consideration

My Node/Express service seems to be generating a span in the logs, but I am unable to locate my service in the Ja