首頁猿問當我嘗試在 Three.js...

當我嘗試在 Three.js 中旋轉立方體時出現黑屏

JavaScript

HUWWW 2023-12-14 15:20:06

我正在嘗試圍繞所有 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;

}

反對回復 2023-12-14

1 回答
0 關注
205 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

當我嘗試在 Three.js 中旋轉立方體時出現黑屏

當我嘗試在 Three.js 中旋轉立方體時出現黑屏

1 回答

添加回答