Advertisement
elektropepi

Three.js Render Object with BufferGeometry

Jun 9th, 2021
213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function renderMesh(faces, vertices, normals) {
  2.     let camera, scene, renderer;
  3.  
  4.     let mesh;
  5.  
  6.     init();
  7.     render();
  8.  
  9.     function init() {
  10.         camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
  11.         camera.position.z = 400;
  12.  
  13.         scene = new THREE.Scene();
  14.         scene.background = new THREE.Color( 0x050505 );
  15.  
  16.         const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
  17.         scene.add( light );
  18.  
  19.         const geometry = new THREE.BufferGeometry();
  20.         geometry.setIndex( new THREE.Uint32BufferAttribute(faces, 3) );
  21.         geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
  22.         geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
  23.  
  24.         const axesHelper = new THREE.AxesHelper( 100 );
  25.         scene.add( axesHelper );
  26.  
  27.         const material = new THREE.MeshPhongMaterial({
  28.             color: 0xAAAAAA,
  29.             flatShading: true,
  30.             side: THREE.DoubleSide
  31.         });
  32.  
  33.         mesh = new THREE.Mesh( geometry, material );
  34.  
  35.         // Center object
  36.         // See further down at https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
  37.         geometry.computeBoundingBox();
  38.         geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1);
  39.         const parent = new THREE.Object3D();
  40.         parent.add(mesh);
  41.         scene.add(parent);
  42.         // Rotate object so the face faces the user
  43.         parent.rotateZ(Math.PI / 2) // Math.PI / 2 = 90° in radian
  44.         parent.rotateX(-Math.PI / 2)
  45.  
  46.         const box = new THREE.BoxHelper( parent, 0xffff00 );
  47.         scene.add( box );
  48.  
  49.         renderer = new THREE.WebGLRenderer( { antialias: true } );
  50.         renderer.setPixelRatio( window.devicePixelRatio );
  51.         renderer.setSize( window.innerWidth, window.innerHeight );
  52.         document.body.appendChild( renderer.domElement );
  53.  
  54.  
  55.         const controls = new OrbitControls( camera, renderer.domElement );
  56.         controls.addEventListener( 'change', render );
  57.         controls.update();
  58.  
  59.         window.addEventListener( 'resize', onWindowResize );
  60.     }
  61.  
  62.     function onWindowResize() {
  63.  
  64.         camera.aspect = window.innerWidth / window.innerHeight;
  65.         camera.updateProjectionMatrix();
  66.  
  67.         renderer.setSize( window.innerWidth, window.innerHeight );
  68.  
  69.     }
  70.  
  71.     function render() {
  72.         renderer.render( scene, camera );
  73.  
  74.     }
  75. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement