I have a question about JavaScript and Threejs.
I made an object title_and_coord
that stores sentences and their Vector3 coordinates (for wherever each sentence appears in my scene). I am trying to access this outside of my init()
function in iterateObject()
. But on debugging, I saw that the line for (let key in title_and_coord) {
in iterateObject doesn’t run and skips to line word_and_coord[word] = shared_coords;
If I run console.log(title_and_coord);
globally, I indeed get an object in my console with the titles and their respective Vector3 values. Where am I going wrong? This is my first time with three.js so I apologise for the messy code! Thank you 🙂
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';
import { FontLoader } from 'FontLoader';
import Stats from 'https://unpkg.com/[email protected]/examples/jsm/libs/stats.module.js';
import * as GeometryUtils from 'https://unpkg.com/[email protected]/examples/jsm/utils/GeometryUtils.js';
const sentences = [
"AI: Its nature and future", "Nature and scope of AI techniques", "Advancing mathematics by guiding human intuition with AI", "Cooperative AI: machines must learn to find common ground", "Inhibition of early atherogenesis in transgenic mice by human apolipoprotein AI", ......"Cross species quorum quenching using a native AI-2 processing enzyme", "Forecasting artificial intelligence on online customer assistance: Evidence from chatbot patents analysis", "A comprehensive survey of ai-generated content (aigc): A history of generative ai from gan to chatgpt"
];
//dict
const uniq_words = {
"ai": 218,
"its": 11,
"nature": 16,
"and": 247,
"future": 12,
"scope": 2,
......
"interpretation": 2,
"translational": 2,
"making": 2,
"ultrafiltration": 2
};
const word_and_coord = {};
//3 basic needs to display aanything in three js
let camera, scene, renderer;
//stores each title
let message;
const title_and_coord = {};
init();
render();
function init() {
//adding a camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1500);
//adding a scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
//creating a font and using it as the geometry
const loader = new FontLoader();
loader.load('./fonts/Montserrat_Regular.json', function (font) {
const color = 0x000000;
const matLite = new THREE.MeshBasicMaterial({
color: color,
opacity: 1.0,
side: THREE.DoubleSide
});
for (let i = 0; i < sentences.length - 400; i++) {
var title_coord = new THREE.Vector3();
message = sentences[i];
const shapes = font.generateShapes(message, 100);
const geometry = new THREE.ShapeGeometry(shapes);
//generate a 1 or -1
var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
var plusOrMinus2 = Math.round(Math.random()) * 2 - 1;
var title = new THREE.Mesh(geometry, matLite);
title.position.x = i*100*plusOrMinus*Math.random();
title.position.y = plusOrMinus2 * (300 + ((Math.random()*100) + 0) + (Math.random()*1000));
title.position.z = i*100;
//plusOrMinus * ( 900 + ((Math.random()*10) + 0) + (Math.random()*100) + (Math.random()*1000) );
//title.position.z = plusOrMinus2 * (900 + ((Math.random()*10) + 0) + (Math.random()*100) + (Math.random()*1000));
//title.position.y = plusOrMinus2 * ( 900 + ((Math.random()*10) + 0) + (Math.random()*100) + (Math.random()*1000) );
//title.rotateY(Math.random() * 1.1 * 3.14 * plusOrMinus2);
title.scale.setScalar(0.9)
scene.add(title);
title_and_coord[message] = title.getWorldPosition(title_coord);
//printing each title's coord
//console.log(title.getWorldPosition(title_coord));
//scene.add( line );
//title loop finishes here
}
renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
controls.addEventListener('change', render);
window.addEventListener('resize', onWindowResize);
} // end init
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
//render the entire scene
function render() {
renderer.render( scene, camera );
}
function iterateObject() {
for (let word in uniq_words) {
var shared_coords = [];
//THIS LINE BELOW WORKS!! TITLEANDCOORD EXISTS INSIDE THIS SCOPE!
//console.log(title_and_coord);
for (const key in title_and_coord) {
const lwrcase = key.toLowerCase();
if (lwrcase.includes[word]){
//append the coord of title to list/array initialized before the loop
shared_coords.push(title_and_coord[key]);
}
}
word_and_coord[word] = shared_coords;
}
console.log(JSON.stringify(word_and_coord));
}
iterateObject();
I ran console.log(title_and_coord)
within iterateObject
right after var shared_coords = [];
. Then ran it another time, globally, both before and after iterateObject() is defined. It is not empty this is what I get both times:
console output