Merge buffer geomtery
by orion_prime
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src=" https://threejs.org/examples/js/loaders/RGBELoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/utils/BufferGeometryUtils.js"></script>
<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
JavaScript
let camera, scene, renderer,stats
let gui = new dat.GUI();
const count = 10;
let y=0
const allMeshes =[]
init();
animate();
setupGui()
const gltfExporter = new THREE.GLTFExporter();
function init() {
stats= new Stats()
document.body.appendChild(stats.dom)
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.outputEncoding=THREE.sRGBEncoding
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( count, 5, count );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set(count,1,0)
controls.update()
//
scene.background=new THREE.Color('#0f0f00')
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
//
scene.add( new THREE.AxesHelper( 1 ) );
//
const geo = new THREE.BoxGeometry( 1, 1, 1 );
geo.translate(0,0.5,0)
for ( let i = 0; i < count; i ++ ) {
const mat = new THREE.MeshPhysicalMaterial( {
color: new THREE.Color().setHSL(Math.random(),0.5,0.5),
transmission:1,
roughness:0.1,
thickness:1,
attenuationTint:new THREE.Color().setHSL(Math.random(),0.5,0.5),
attenuationDistance:0.4
} )
const mesh = new THREE.Mesh(geo, mat)
mesh.position.set(i * 2, 0, 0)
// console.log(mesh)
scene.add(mesh)
allMeshes.push(mesh)
}
randomScale()
let hdri = new THREE.RGBELoader()
.setDataType(THREE.HalfFloatType)
.load(
"https://threejs.org/examples/textures/equirectangular/quarry_01_1k.hdr",
// "https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr",
function (texture) {
texture.mapping =...