Room Customizations →

Custom JavaScript

Beta Feature

This field allows you to write JavaScript that runs in your room. This is useful for adding custom interactivity to your room, and for accessing hidden features that are not shown in the editor. This page lists some of the hidden features, as well as user scripts that people have submitted. Please submit any scripts you find useful to contact@newart.city

JavaScript Hooks

Sometimes it's important to run your JS before or after a room loads, or maybe on every frame of the animation. JavaScript hooks are specific functions that run at certain times, allowing you to target when your code runs. Only define these functions once.

JS Hook: Before Room Initialized

This runs before the Three JS Scene is created. If custom JS code is not inside any function it will run at this time by default, but this function exists to help you keep things organized.

room.beforeInit = function(){
  // your code here
}

---

JS Hook: After Room Initialized

This runs after the Three JS Scene is created.

room.afterInit = function(){
  // your code here
}

---

JS Hook: On Animation Frame

This runs on every frame of the animation. Be careful- putting too much code here can slow down your room.

room.onFrame = function(){
  // your animation code here
}

---

Room Configurations

The following code snippets will change aspects of your room.

Room Spawn Point

Allows you to define a point where visitors enter the room.

room.spawnPointX = 100;
room.spawnPointY = 10;
room.spawnPointZ = 100;

---

Fly

Allows you to jump as much as you want before landing.

room.canFly = true;

---

Special Effects

The following snippets are used to add additional elements that are not possible in the editor.

Mist

Creates a mist effect on the floor.

room.afterInit = function(){

  window.mistParticles = [];

  var numberOfMistParticles = 150;
  var mistHeight = -30;

  const map = new THREE.TextureLoader().load('https://newart.city/img/special/mist-element.png'); 

  for (counter = 0; counter < numberOfMistParticles; counter++) {   
    var mistMaterial = new THREE.SpriteMaterial( { map: map } ); 
    var particle = new THREE.Sprite( mistMaterial ); 
    particle.material.rotation = Math.random() * 360;
    particle.scale.set(100,100,100);
    particle.position.set(Math.random()*600-300, mistHeight, Math.random()*600-300);
    window.scene.add(particle);
    mistParticles.push(particle);
  }

}

room.onFrame = function(){
  var sp = mistParticles.length;
  while(sp--) {
    mistParticles[sp].material.rotation += 0.001;
  }
}