示例代码

创建日期:2024-06-21
更新日期:2025-01-12

效果图

1705739592761-559.png

创建场景、相机和渲染器

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#canvas')
});
renderer.setSize(window.innerWidth, window.innerHeight);
// 添加光源
const amlight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(amlight);
const dirlight = new THREE.DirectionalLight(0xffffff, 0.6);
scene.add(dirlight);

显示场景

// 添加正方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 让正方体转起来
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
};
animate();