为什么 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.