How do i create several instanced meshes with the same geometry but with different textures?

Tadz · March 31, 2023, 6:54am

Ive been trying to create a minecraft like terrain generation and in order to be able to render more of the scene im trying out InstancedMeshes, im am completelty new to three.js and all that it offers so it would be nice if someone coul give me some pointers on what to do and how to do it!

prisoner849 · March 31, 2023, 7:58am

Hi!
Maybe this topic will be helpful: How to apply offsets for texture atlas in InstancedMesh?

Chaser_Code · March 31, 2023, 11:46am

If need textures array instead texture atlas:

ZekeNaulty · March 31, 2023, 5:22pm

You may find this useful. I’m tinkering with a similar idea, but I have no goal of generating worlds like in mine craft,; I’m more focused on procedural dungeons etc like Diablo II.

My world “space” it provides info I need to create meshes.

github.com

zekenaulty/maze-quest/blob/2adb7f0f755ddc9228840c80d60cfc0a51303a3f/wwwroot/world/space.js

import * as THREE from 'three';

export class Space extends EventTarget {

    #data;

    #width;
    #height;
    #depth;

    #x;
    #y;
    #z;

    #positions = {};
    #rotations = {};

    constructor(
        w = 17,
        h = 128,

This file has been truncated. show original

Simple test

github.com

zekenaulty/maze-quest/blob/2adb7f0f755ddc9228840c80d60cfc0a51303a3f/wwwroot/experiments/instanced/instancedMesh.js

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

let camera, scene, renderer, stats;

let mesh;
const amount = 75;
const count = Math.pow(amount, 3);
const dummy = new THREE.Object3D();

const init = () => {

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.set(amount * 0.9, amount * 0.9, amount * 0.9);
  camera.lookAt(0, 0, 0);

  scene = new THREE.Scene();

This file has been truncated. show original

My block builder is the backbone and very much alpha version: https://zekenaulty.github.io/maze-quest/wwwroot/experiments/block_builder/

And here is a more complex example:
https://zekenaulty.github.io/maze-quest/wwwroot/experiments/basic_room/

github.com

zekenaulty/maze-quest/blob/2adb7f0f755ddc9228840c80d60cfc0a51303a3f/wwwroot/experiments/basic_room/script.js

import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { Space } from '../../world/space.js';
import { BasicRoom } from '../../world/rooms/basicRoom.js';
import { Library } from '../../world/rooms/library.js';
import { Passage } from '../../world/rooms/passage.js';
import { RoomBounds } from '../../world/rooms/roomBounds.js';
import { BlockBuilder } from '../../assets/blockBuilder.js';
import { Capsule } from 'three/addons/math/Capsule.js';
import { Joystick } from '../../res/joysticks/joystick.js';
import { Maze } from '../../maze/maze.js';
import { RecursiveBacktracker } from '../../maze/generators/recursiveBacktracker.js';
import { MazeToText } from '../../maze/renderers/mazeToText.js';
import { CanvasRectangle } from '../../maze/renderers/canvasRectangle.js';
import { CanvasRectangleScaler } from '../../maze/renderers/canvasRectangleScaler.js';
import '../../core/array.js';
import '../../core/isMobile.js';

const compass = document.querySelector('.compass');
const location = document.querySelector('.location');

This file has been truncated. show original

The above has turned into my testing of lots of things. Far beyond “basic room”
I find new problems constantly, and none of this is a best practice. The clipping for example needs work as you can clip through walls.

btw, neat use of perlin noise

Topic		Replies	Views
How to set different textures on each InstancedMesh? Questions textures , geometry , mesh , instanced-mesh	3	4804	September 1, 2021
Setting different texture offsets for different parts of an InstancedMesh Questions textures , instancing	6	3102	May 29, 2020
Problem with multiple materials for InstancedMesh Questions instanced-mesh	5	1632	December 11, 2020
Does threejs's instancedMesh work when a lot are rendered? Questions materials , geometry , game-dev , shaders , instanced-mesh	4	1288	October 22, 2020
How to apply offsets for texture atlas in InstancedMesh? Questions instanced-mesh	16	3042	January 10, 2022

How do i create several instanced meshes with the same geometry but with different textures?

Related topics