three.js中如何创建一个简单的3D场景?

360 阅读1分钟

three.js中如何创建一个简单的3D场景?

创建一个简单的3D场景在Three.js中涉及到许多步骤,下面是一个简单的例子,演示如何创建一个包含一个立方体和一个平面的3D场景。

// 创建一个场景对象  
let scene = new THREE.Scene();  
  
// 创建一个相机对象  
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);  
camera.position.z = 5;  
  
// 创建一个渲染器对象  
let renderer = new THREE.WebGLRenderer();  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);  
  
// 创建立方体几何体和平面几何体  
let geometryCube = new THREE.BoxGeometry(1, 1, 1); // 立方体几何体  
let geometryPlane = new THREE.PlaneGeometry(10, 10); // 平面几何体  
  
// 创建材质对象,并分别应用于立方体和平面  
let materialCube = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 绿色  
let materialPlane = new THREE.MeshBasicMaterial({color: 0xff0000}); // 红色  
  
// 创建网格对象,将几何体和材质相结合  
let cube = new THREE.Mesh(geometryCube, materialCube);  
let plane = new THREE.Mesh(geometryPlane, materialPlane);  
  
// 将立方体和平面添加到场景中  
scene.add(cube);  
scene.add(plane);  
  
// 设置渲染循环  
function animate() {  
  requestAnimationFrame(animate);  
  cube.rotation.x += 0.01; // 让立方体绕自身X轴旋转  
  cube.rotation.y += 0.01; // 让立方体绕自身Y轴旋转  
  renderer.render(scene, camera); // 渲染场景和相机  
}  
animate(); // 开始渲染循环

这个例子创建了一个简单的3D场景,包括一个绿色的立方体和一个红色的平面。你可以通过改变立方体和平面的位置、大小、旋转等属性,或者添加更多的物体来丰富你的场景。