当我尝试在 Three.js 中旋转立方体时出现黑屏
我正在尝试围绕所有 3 个轴（x，y，z）旋转一个立方体，我使用下面所示的代码：
`
<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));
}
}
</script>
</body>
</html>
`
我认为问题在于我无法使用轮换功能。有没有办法可以使用矩阵或其他东西以数学方式构建这个函数？如果解决方案非常明显，我很抱歉，我对这种编程语言真的很陌生。
HUWWW1回答
-
慕村9548890
您必须cube在可以在动画循环中访问它的范围内定义变量。使用更新后的代码尝试一下：var camera, scene, renderer, cube;// 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 }); cube = new THREE.Mesh(geometry, material); scene.add(cube); 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). }}body { margin: 0;}<script src="https://cdn.jsdelivr.net/npm/three@0.123/build/three.js"></script>
随时随地看视频慕课网APP
相关分类
JavaScript