I’m implementing OutlinePass in my project, and have followed exactly as in the example. Yet I received this error said “this.getPrepareMaskMaterial is not a function”. I don’t know what is wrong with or missing in my code. Could you take a look and see what’s wrong with it? Thanks a lot.
Full error message:
Uncaught TypeError: this.getPrepareMaskMaterial is not a function
at new THREE.OutlinePass (OutlinePass.js:45)
at init (script.js:88)
at script.js:218
Here is the code (outline related part only):
var OUTLINE;
var COMPOSER;
var FXAA;
// scene, camera, renderer were all defined
// FXAAShader, CopyShader, ShaderPass, OutlinePass, EffectComposer .js files were all imported
function init() {
COMPOSER = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
COMPOSER.addPass(renderPass);
FXAA = new THREE.ShaderPass(THREE.FXAAShader);
FXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
FXAA.renderToScreen = true;
COMPOSER.addPass(FXAA);
// the error emits from this below line
OUTLINE = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
OUTLINE.edgeStrength = 6;
OUTLINE.edgeGlow = 1;
OUTLINE.edgeThickness = 4;
OUTLINE.pulsePeriod = 2;
OUTLINE.visibleEdgeColor = 0xffff00;
OUTLINE.hiddenEdgeColor = 0xffffff;
COMPOSER.addPass(OUTLINE);
}
function animate() {
requestAnimationFrame(animate);
COMPOSER.render();
}
Sry, without providing a live example it’s not possible for me to help you further. I can’t find an obvious problem with your code so debugging might help.
Can you find what’s wrong with my outline pass implementation in the fiddle, except the order of the passes? When I run the code in my fiddle above, the scene was completely black, and the console show “not a function” error as in the question. I tried using the code from the OutlinePass example and inserted my pointer lock controls (which is the same control in the fiddle), and every objects in the scene was rendered perfectly, but my pointer lock control was not functional at all, and the console showed no error.
Sorry for the late reply, I just had the same problem today.
It turned out that I was loading OutlinePass.js before EffectComposer.js.
OutlinePass extends Pass, which is created inside EffectComposer.
I solved it by loading OutlinePass (and any other *Pass.js file) after EffectComposer.js.