El proyecto de editor que estoy creando debería permitirme importar una biblioteca cdn y usarla para escribir código. Entonces, para mostrar mi problema, ingrese https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js en la entrada de importación de cdn y haga clic en importar. Luego ingrese esto en la sección de código:
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();Haga clic en el botón ejecutar en la parte superior. Debería obtener una pequeña ventana de tres js en la parte inferior. Mi primera pregunta es, ¿por qué el texto indefinido aparece encima del renderizado? Y dos, si cambia el código en la entrada a:
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();Agrega otro render al div . Por qué ? especialmente cuando he usado el método .html para reemplazar el contenido del div. Mi código completo es visible aquí
Al inspeccionar la consola de Javascript, está claro que el renderizador no se agrega a #body2 sino a document.body.
Esta línea:
document.body.appendChild( renderer.domElement );añade el renderizador al elemento del cuerpo.
Lo indefinido se debe a String( eval( $("#editor #editor-textarea").val() ));
El contenido del texto en eval debe devolver algo. https://www.w3schools.com/jsref/jsref_eval.asp
En este caso, el valor de retorno de $("#editor #editor-textarea").val() no está definido. Por lo tanto eval(undefined) está undefined y String(undefined) es "undefined"