The editor project I am making should allow me to Import a cdn library and use it to write code . So to show my problem , enter https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js in the import cdn input and click import . Then enter this in the code section :
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
Click the run button at the top . You should get a tiny three js window at the bottom. My first question is , why is the text undefined coming above the render ? And two , if you change the code in the input to :
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
It adds another render to the div . Why ? especially when I have used the .html method to replace the contents of the div . My complete code is visible here
By inspecting the Javascript console, it's clear that the renderer is not added to #body2 but rather to the document.body.
This line:
document.body.appendChild( renderer.domElement );
appends the renderer to the body element.
The undefined is because of String( eval( $("#editor #editor-textarea").val() ));
The text content in eval must return something. https://www.w3schools.com/jsref/jsref_eval.asp
In this case, the return value of $("#editor #editor-textarea").val() is undefined. Hence eval(undefined) is undefined and String(undefined) is "undefined"