如何渲染一个 Three.js 项目？
我遵循 这个 Three.js 初学者教程，我被困在第 2 部分，因为我的网页上没有呈现任何内容。我阅读/观看了其他教程，但每次都遇到同样的问题。
我使用 npm install 三 --save 命令安装了 Three.js，代码如下。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First three.js Project</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script type="module" src="./js/app.js"></script>
</body>
</html>
import * as THREE from '../node_modules/three/build/three.module.js';
import { TrackballControls } from '../node_modules/three/examples/jsm/controls/TrackballControls.js';
// Scene
const scene = new THREE.Scene();
// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.6, 1200);
camera.position.z = 5;
// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor("#233143");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Make Canvas Responsive
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
// Create Box
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
const boxMesh = new THREE.Mesh(boxGeometry,
boxMaterial);
boxMesh.rotation.set(40, 0, 40);
scene.add(boxMesh);
const rendering = function () {
requestAnimationFrame(rendering);
// Constantly rotate box
scene.rotation.z -= 0.005;
scene.rotation.x -= 0.01;
renderer.render(scene, camera);
}
rendering();
body {
margin: 0px;
height: 100vh;
}
canvas {
display: block;
}
肯定有什么地方不对劲，但是什么地方不对劲呢？
I follow this three.js beginners tutorial and I'm stuck at part 2 because nothing is rendering on my web page. I read / watched other tutorials but I'm facing the same problem everytime.
I installed three.js with the npm install three --save command and the code is below.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First three.js Project</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script type="module" src="./js/app.js"></script>
</body>
</html>
import * as THREE from '../node_modules/three/build/three.module.js';
import { TrackballControls } from '../node_modules/three/examples/jsm/controls/TrackballControls.js';
// Scene
const scene = new THREE.Scene();
// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.6, 1200);
camera.position.z = 5;
// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor("#233143");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Make Canvas Responsive
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
// Create Box
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
const boxMesh = new THREE.Mesh(boxGeometry,
boxMaterial);
boxMesh.rotation.set(40, 0, 40);
scene.add(boxMesh);
const rendering = function () {
requestAnimationFrame(rendering);
// Constantly rotate box
scene.rotation.z -= 0.005;
scene.rotation.x -= 0.01;
renderer.render(scene, camera);
}
rendering();
body {
margin: 0px;
height: 100vh;
}
canvas {
display: block;
}
Something is definitely wrong, but what?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，始终在实时服务器中运行 Three.js 项目，而不仅仅是单击 index.html；其次，保持文件结构与图像中所示相同。
First always run three.js project in a live server not just by clicking index.html second keep file structure same as shown in image.