Question

我正在尝试将示例Three.js页面复制到我自己的带有画布的3d动画网站中。但是，即使没有显示错误，它也什么也没显示。我试图自己搞清楚，但似乎没有任何效果：（

我在页面的一个div中有我的canvas元素：

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

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

1 个答案: