I've been attempting to make a THREE.js example designed for version 58 compatible with the latest version of THREE.js. You can find the original example here.
While I was able to resolve a few errors by simply commenting out certain code, one error has proven to be more challenging:
THREE.ShaderMaterial: attributes should now be defined in THREE.BufferGeometry instead. THREE.ShaderMaterial: 'attributes' is not a property of this material.
The problematic code section is as follows:
var shaderMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
attributes: attributes,
vertexShader: document.getElementById( 'vertexshader_lines' ).textContent,
fragmentShader: document.getElementById( 'fragmentshader_lines' ).textContent,
});
The variable `attributes` is previously defined like this:
var attributes = {
draw: { type: 'f', value: [] },
seed: { type: 'f', value: [] },
seed2: { type: 'f', value: [] },
customColor: { type: 'c', value: [] },
index2: { type: 'f', value: [] },
norm: { type: 'v3', value: [] },
};
In my attempt to address this issue, I commented out the `attributes` parameter passed to the `THREE.ShaderMaterial` constructor. Instead, I converted the `THREE.Geometry` from the original version (named `lineGeo`) into a `THREE.BufferedGeometry` and then added the attributes using its `addAttribute` method, like so:
// Code snippet for adding buffer attributes
This solution did not work as expected, leaving me stuck without any output on the screen and no error messages in the console.
To exemplify the issue with current versions of THREE.js, below is a minimal, complete example that does not function properly:
<!doctype html>
<html lang="en">
<head>
<title>Long hair</title>
<!-- Styles and scripts -->
</head>
<body>
<!-- Main script content -->
</body>
</html>
A working version of similar code that runs successfully on version 58 of THREE.js:
<!doctype html>
<html lang="en">
<head>
<title>Long hair</title>
<!-- Styles and scripts -->
</head>
<body>
<!-- Main script content -->
</body>
</html>
If needed, you can download a copy of three.min.js for version 58 here.
You can also obtain the current version of three.min.js by downloading it from this link.