buffergeometry.setAttribute is not a function error

Questions
,
1

When I want to import a obj file using the obj-loader I keep getting this error saying “buffergeometry.setAttribute is not a function”

help
help1295×661 13.3 KB

Does anyone know how to fix it? Here’s the source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <script type="text/javascript" src="dat.gui.min.js"></script>

    <title>Project</title>
  
</head>


<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js'></script>


<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js'></script>


<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>


<script src='OBJLoader.js'></script>
<script src='MTLLoader.js' ></script>

<style>
body{
  margin: 0;
 height: 100vh;
}

canvas{
  display: block;
}

#c{
height: 0.1px;
}

</style>


<canvas id="c"></canvas>

  
<script>
const geometry = new THREE.BufferGeometry();

var mltLoader = new THREE.MTLLoader();
mltLoader.load('glass.mtl',function(materials){
 materials.preload();


 var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load('glass.obj', function(object){
	  scene.add(object);
   object.position.z =0;
   object.rotation.x = 2500; 

  });
});
  

//scene
var scene = new THREE.Scene();
//camrea
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 2);
//renderer
var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 renderer.setClearColor("#e5e5e5");



  




var render = function(){
   requestAnimationFrame(render);
 
   renderer.render(scene,camera);
  }
 
 render();
 
 
  //create light
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff));
//resize window
window.addEventListener('resize',()=> {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth /window.innerHeight
  
  camera.updateProjectionMatrix();
})


var materialmodel = new THREE.MeshPhongMaterial({
  color: 0xFF0000,
  specular: 0x222222,
  shininess: 75
});
var geometrymodel = new THREE.BoxBufferGeometry(3, 1, 1);

var model = new THREE.Mesh(geometrymodel, materialmodel);
scene.add(model);

var params = {
  modelcolor: "#ff0000"
};

var gui = new dat.GUI();
var folder = gui.addFolder('Wall Color');
folder.addColor(params, 'modelcolor')
  .name('Change Color')
  .onChange(function() {
    materialmodel.color.set(params.modelcolor);
  });
folder.open();


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
</script>


</body>
</html>
2

This error indicates that the version of three.min.js and OBJLoader are out of sync. Please use all library files from the same release. Mixing versions is not supported and can cause fundamental errors.

2 Likes
3

Oh, ok it worked for me now. Thanks!