I am relatively new to the world of three.js and I'm attempting to modify some scripts I stumbled upon online to address my own issue. Initially, I had a functional 3D view with one of my components but I required some additional features that are only available in newer releases. Starting from r66, I aimed to upgrade to r71, but I encountered some glDrawArray errors along the way. I suspect there might be an issue with my BufferGeometry within the create_component function. Here are snippets of the relevant code:
//main file
init();
animate();
function init()
{
if ( !Detector.webgl ) Detector.addGetWebGLMessage();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1);
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 2843.14990, 12217.65039);
camera.position.x = 0.00000;
camera.position.y = 0.00000;
camera.position.z = 5897.56250;
camera.up = new THREE.Vector3(0, 1, 0);
var target = new THREE.Vector3(0.00000, 0.00000, 0.00000);
camera.lookAt(target);
controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
scene = new THREE.Scene();
var light_ambient = new THREE.AmbientLight(0x000000);
scene.add(light_ambient);
light = new THREE.PointLight(0x999999);
light.position.set(2843.14941, -3790.86621, 5686.29980);
scene.add(light);
light = new THREE.PointLight(0x4C4C4C);
light.position.set(-3790.86621, -3790.86621, 2843.14990);
scene.add(light);
light = new THREE.PointLight(0x4C4C4C);
light.position.set(0.00000, 3790.86646, 3790.86621);
scene.add(light);
create_component(scene);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
controls.handleResize();
render();
}
function animate()
{
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
function render()
{
renderer.render(scene, camera);
}
//second file
function create_component(scene)
{
var mesh;
var material;
var geometry;
geometry = new THREE.BufferGeometry();
geometry.attributes = {
position: {
itemSize: 3,
array: new Float32Array([
// Insert your float32array values here
])
},
normal: {
itemSize: 3,
array: new Float32Array([
// Insert your float32array values here
])
}
};
material = new THREE.MeshPhongMaterial({
color: 0x505050,
shininess: 2.00000,
ambient: 0x505050,
side: THREE.DoubleSide,
specular: 0x000000
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
Excluding the file containing the float32arrays resolves the issues I'm facing. Any guidance on how to overcome this challenge would be greatly appreciated as I lack expertise in webGL programming.
Thank you!