Jquery .html 方法似乎不起作用

Question

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 在 import cdn 输入并点击 import 。然后在代码部分输入：

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 window。我的第一个问题是，为什么文本 undefined 出现在呈现上方？第二，如果您将输入中的代码更改为：

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 的内容时。我的完整代码可见here

Answer 1

通过检查 Javascript 控制台，很明显渲染器没有添加到 #body2，而是添加到 document.body。

这一行：

document.body.appendChild( renderer.domElement );

将渲染器附加到正文元素。

未定义是因为String( eval( $("#editor #editor-textarea").val() ));

eval 中的文本内容必须 return 东西。 https://www.w3schools.com/jsref/jsref_eval.asp

在这种情况下，$("#editor #editor-textarea").val() 的 return 值未定义。因此 eval(undefined) 是 undefined 而 String(undefined) 是 "undefined"

Jquery .html 方法似乎不起作用

Jquery .html method does not seem to work

javascript

jquery

three.js

editor

sweetalert