three.js零基础入门超全超细的教程整理

在这个系列中，我们将从零开始，逐步教你如何使用three.js创建一个3D场景。首先，我们需要在HTML文件中引入three.js库。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 入门示例</title>
    <style>
        body { margin: 0; overflow: hidden; } 
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script>
        // 这里是我们的Three.js代码
    </script>
</body>
</html>

接下来，我们将创建一个简单的3D场景，包括一个立方体和一个平面。




// 创建场景
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);
 
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
 
// 将立方体置于平面上方
cube.position.set(5, 5, 0);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转立方体和平面
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    plane.rotation.z += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这个简单的例子中，我们创建了一个场景，一个摄像机，一个渲染器，一个立方体和一个平面。然后，我们将立方体和平面添加到场景中，并设置了它们的渲染位置。最后，我们进入了一个渲染循环，使得所有的物体可以不断旋转，从而形成一个动态的3D场景。

three.js零基础入门超全超细的教程整理

评论已关闭

推荐阅读