三个带网站的 JS 显示没有错误但不起作用

Question

我正在尝试将示例 three.js 页面复制到我自己的小网站中，其中包含应添加 3d 动画的画布。但即使它没有显示错误，它也没有显示任何内容。 我尝试自己解决，但似乎没有任何效果:(

我的画布元素位于页面的一个 div 中：

var canvas = document.getElementById("background");
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.canvas = canvas;
renderer.setSize(canvas.innerWidth, canvas.innerHeight);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var animate = function() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

#background {
  height: 100%;
  width: 100%;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<canvas id='background'></canvas>

你能看看我做错了什么吗？

Answer 1

除非有理由尝试创建自己的画布，否则您可以让 three.js 使用以下代码生成自己的画布：

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

通过它创建一个新元素，设置高度和宽度以匹配窗口，然后将其添加到 html。

要进一步改变样式，您应该使用

 renderer.domElement.style.attribute = "";

然后您只需将属性替换为您要修改的任何内容。 有关更多示例，您可以访问此链接：

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information