為什么 three.js 不渲染這個旋轉的立方體？
[英]Why is three.js not rendering this spinning cube?
問題描述
我沒有收到任何讓我感到困惑的錯誤，它呈現黑屏。 並且因為 HTML 和 CSS 片段太小了，我相信我的錯誤隱藏在 JS 的某個地方。
// The three.js scene: the 3D world where you put objects const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xaaaaaa, 1); document.body.appendChild(renderer.domElement); const cube = { geometry: new THREE.BoxGeometry(1, 1, 1), material: new THREE.MeshBasicMaterial({ color: 0x00ff00 }) }; cube.mesh = new THREE.Mesh(cube.geometry, cube.material); scene.add(cube.mesh); camera.position.z = 5; function render() { renderer.render(scene, camera); cube.mesh.rotation.x += 0.08; cube.mesh.rotation.y -= 0.05; requestAnimationFrame(render); }
html, body { overflow: hidden; user-select: none; padding: 0; margin: 0; } canvas { width: 100%; height: 100%; padding: 0; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Three.js app</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <script src="https.//cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2022-03-28 18:08:06
通過調用render function 啟動 animation：
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xaaaaaa, 1); document.body.appendChild(renderer.domElement); const cube = { geometry: new THREE.BoxGeometry(1, 1, 1), material: new THREE.MeshBasicMaterial({ color: 0x00ff00 }) }; cube.mesh = new THREE.Mesh(cube.geometry, cube.material); scene.add(cube.mesh); camera.position.z = 5; function render() { renderer.render(scene, camera); cube.mesh.rotation.x += 0.08; cube.mesh.rotation.y -= 0.05; requestAnimationFrame(render); } render(); // <---
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
Three.js-在立方體上而不是在導入的JSON網格對象上渲染陰影
[英]Three.js - shadows rendering on cube but not on imported json mesh object
"Three.js 多維數據集打包后不渲染 – Webpack、Wordpress"
[英]Three.js cube is not rendering after bundling – Webpack, Wordpress
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.