Блог

Проект редактора, который я создаю, должен позволить мне импортировать библиотеку cdn и использовать ее для написания кода . Поэтому , чтобы показать мою проблему, введите https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js в поле импорт cdn введите и нажмите кнопку Импорт . Затем введите это в раздел кода :

 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();
 

Нажмите кнопку «Выполнить» вверху . У вас должно появиться крошечное окошко с тремя js внизу. Мой первый вопрос: почему текст не определен выше рендеринга ? И второе , если вы измените код во входных данных на :

 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();
 

Это добавляет еще один рендеринг к div . Почему? особенно когда я использовал метод .html для замены содержимого div . Мой полный код виден здесь

При проверке консоли Javascript становится ясно, что средство визуализации добавляется не в #body2, а в document.body.

Эта строка:

 document.body.appendChild( renderer.domElement );
 

добавляет средство визуализации к элементу тела.

Неопределенное связано с String( eval( $("#editor #editor-textarea").val() ));

Текстовое содержимое в eval должно что-то возвращать. https://www.w3schools.com/jsref/jsref_eval.asp

В этом случае возвращаемое значение $("#editor #editor-textarea").val() не определено. Следовательно eval(undefined) , есть undefined и String(undefined) есть "undefined"