I am facing some difficulties while using three.js to render a model completely white with wireframe. Instead of rendering the model as desired, it appears solid black. I have tried assigning a white material to the model but it had no effect. Additionally, when attempting to combine the model's geometry and material into a mesh for rendering in the scene, I encountered an error marked as f.makeGroups within the minified three.js file. The complete error message is displayed below:
TypeError: f.makeGroups is not a function
The code snippet I am currently using to achieve this rendering is as follows:
var SCREEN_WIDTH = 800;
var SCREEN_HEIGHT = 600;
var blue = 0x03106D;
var white = 0xFFFFFF;
var black = 0x000000;
var orange = 0xFF6600;
// execute this function on each animation frame
function animate(){
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function(){
animate();
});
}
// setting up the renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setClearColor(0xFFFFFF, 1);
document.body.appendChild(renderer.domElement);
// define camera properties
var camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000);
camera.position.z = 700;
var facemat = new THREE.MeshBasicMaterial({ color: white, opacity: 1.0, shading: THREE.FlatShading });
var wiremat = new THREE.MeshBasicMaterial({ color: blue, opacity: 1.0, wireframe: true, wireframeLinewidth: 1.0 });
var Material = [facemat,wiremat];
// create the scene
var scene = new THREE.Scene();
// load and add the cube model
var vrmlLoader = new THREE.VRMLLoader();
vrmlLoader.addEventListener('load', function (event) {
var object = event.content;
var mesh = new THREE.Mesh(object, Material);
scene.add(mesh);
});
vrmlLoader.load("ship.wrl");
// begin the animation
animate();
To ensure the correctness of my model, I have validated its functionality using the three.js editor tool