我正在尝试围绕所有 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>`我认为问题在于我无法使用轮换功能。有没有办法可以使用矩阵或其他东西以数学方式构建这个函数？如果解决方案非常明显，我很抱歉，我对这种编程语言真的很陌生。
1 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
您必须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>
添加回答
举报
0/150
提交
取消