Three.js第1篇,Three.js新手教学,如何使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
// 引入Three.js库
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建物体
const cube = new THREE.Mesh(geometry, material);
// 将物体添加到场景
scene.add(cube);
// 设置摄像机位置
camera.position.z = 5;
// 渲染循环
function animate() {
requestAnimationFrame(animate);
// 旋转物体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate();
这段代码展示了如何使用Three.js创建一个简单的3D场景,包括创建场景、摄像机、渲染器,以及一个旋转的立方体。这是学习Three.js的一个基础入门示例。
评论已关闭