Javascript 当我尝试在three.js中旋转立方体时，会出现黑屏
我正在尝试围绕所有3个轴（x、y、z）旋转立方体，我使用的代码如下所示： `Javascript 当我尝试在three.js中旋转立方体时，会出现黑屏,javascript,html,three.js,Javascript,Html,Three.js,我正在尝试围绕所有3个轴（x、y、z）旋转立方体，我使用的代码如下所示： ` CM20219–课程作业2–WebGL 正文{边距：0；溢出：隐藏；} 画布{宽度：100%；高度：100%；} “严格使用”；//https://stackoverflow.com/q/1335851/72470 //所有函数中可用的全局变量。 //注意：您可以在此处添加自己的，例如存储渲染模式。 摄像机、场景、渲染器、网格； //初始化场景，并首次绘制。 init（）； 制作动画（）； //监听键盘事件，以对其作
CM20219–课程作业2–WebGL
正文{边距：0；溢出：隐藏；}
画布{宽度：100%；高度：100%；}
“严格使用”；//https://stackoverflow.com/q/1335851/72470
//所有函数中可用的全局变量。
//注意：您可以在此处添加自己的，例如存储渲染模式。
摄像机、场景、渲染器、网格；
//初始化场景，并首次绘制。
init（）；
制作动画（）；
//监听键盘事件，以对其作出反应。
//注意：还有其他事件侦听器，例如鼠标事件。
文件。添加的监听器（'keydown'，handleKeyDown）；
//场景初始化。此函数在一开始仅运行一次。
函数init（）
{
场景=新的三个。场景（）；
//设置相机，将其移动到（3、4、5）并查看原点（0、0、0）。
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
摄像机。位置。设置（3、4、5）；
摄影机。注视（新的三个向量3（0，0，0））；
//在x-z平面中绘制辅助栅格（注意：y向上）。
添加（新的三个.GridHelper（10,20,0xffffff））；
//要做的事情：画一个立方体（要求1）。
const geometry=new THREE.BoxGeometry（）；
const material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
常量立方体=新的三个网格（几何体、材质）；
常数顶点=立方体顶点
常量线框=立方体。线框
场景.添加（线框）；
场景.添加（立方体）；
添加（顶点）；
摄像机位置z=5；
//操作：可视化全局坐标系的轴（要求2）。
const axeshelper=新的三个axeshelper（5）
场景.添加（AxeHelper）
//基本环境照明。
添加（新的3.AmbientLight（0xffffff））；
//要做的事情：为“面”渲染模式添加更复杂的照明（要求4）。
恒定光=新的三个环境光（0x404040）；
场景。添加（灯光）；
//设置Web GL渲染器。
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；//HiDPI/retina渲染
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//处理浏览器窗口的大小调整。
addEventListener（'resize'，handleResize，false）；
}
//处理浏览器窗口的大小调整。
函数handleResize（）
{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//动画循环功能。只要需要更新，就会调用此函数。
函数animate（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
立方体旋转z+=0.01；
渲染器。渲染（场景、摄影机）；
}
//处理键盘按键。
函数handleKeyDown（事件）
{
开关（event.keyCode）
{
//渲染模式。
案例70://f=face
警报（“待办事项：添加面部渲染模式代码（要求4）”；
打破
案例69://e=edge
警报（'待办事项：为边缘渲染模式添加代码（要求4）。'；
打破
案例86://v=vertex
警报（'要做：为顶点渲染模式添加代码（要求4）。'；
打破
//要做的事情：添加启动/停止旋转的代码（要求3）。
}
}
谢谢 必须在动画循环中可以访问的范围内定义
cubevar摄像机、场景、渲染器、立方体；
//初始化场景，并首次绘制。
init（）；
制作动画（）；
//监听键盘事件，以对其作出反应。
//注意：还有其他事件侦听器，例如鼠标事件。
文件。添加的监听器（'keydown'，handleKeyDown）；
//场景初始化。此函数在一开始仅运行一次。
函数init（）{
场景=新的三个。场景（）；
//设置相机，将其移动到（3、4、5）并查看原点（0、0、0）。
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
摄像机。位置。设置（3、4、5）；
摄影机。注视（新的三个向量3（0，0，0））；
//在x-z平面中绘制辅助栅格（注意：y向上）。
添加（新的三个.GridHelper（10,20,0xffffff））；
//要做的事情：画一个立方体（要求1）。
const geometry=new THREE.BoxGeometry（）；
const material=新的3.0网格基本
<html>
<head>
<title>CM20219 – Coursework 2 – WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
"use strict"; // https://stackoverflow.com/q/1335851/72470
// Global variables that are available in all functions.
// Note: You can add your own here, e.g. to store the rendering mode.
var camera, scene, renderer, mesh;
// Initialise the scene, and draw it for the first time.
init();
animate();
// Listen for keyboard events, to react to them.
// Note: there are also other event listeners, e.g. for mouse events.
document.addEventListener('keydown', handleKeyDown);
// Scene initialisation. This function is only run once, at the very beginning.
function init()
{
scene = new THREE.Scene();
// Set up the camera, move it to (3, 4, 5) and look at the origin (0, 0, 0).
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(3, 4, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// Draw a helper grid in the x-z plane (note: y is up).
scene.add(new THREE.GridHelper(10, 20, 0xffffff));
// TO DO: Draw a cube (requirement 1).
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
const vertices = cube.vertices
const wireframe = cube.wireframe
scene.add( wireframe);
scene.add( cube );
scene.add( vertices );
camera.position.z = 5;
// TO DO: Visualise the axes of the global coordinate system (requirment 2).
const axeshelper = new THREE.AxesHelper(5)
scene.add(axeshelper)
// Basic ambient lighting.
scene.add(new THREE.AmbientLight(0xffffff));
// TO DO: add more complex lighting for 'face' rendering mode (requirement 4).
const light = new THREE.AmbientLight(0x404040);
scene.add( light );
// Set up the Web GL renderer.
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); // HiDPI/retina rendering
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Handle resizing of the browser window.
window.addEventListener('resize', handleResize, false);
}
// Handle resizing of the browser window.
function handleResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Animation loop function. This function is called whenever an update is required.
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube.rotation.z += 0.01;
renderer.render(scene, camera);
}
// Handle keyboard presses.
function handleKeyDown(event)
{
switch (event.keyCode)
{
// Render modes.
case 70: // f = face
alert('TO DO: add code for face render mode (requirement 4).');
break;
case 69: // e = edge
alert('TO DO: add code for edge render mode (requirement 4).');
break;
case 86: // v = vertex
alert('TO DO: add code for vertex render mode (requirement 4).');
break;
// TO DO: add code for starting/stopping rotations (requirement 3).
}
}
</script>
</body>
</html>