以下是一个基本的three.js三维场景，使用HTML和JavaScript编写。下面的代码创建了一个简单的立方体并呈现在窗口中：
<!DOCTYPE html>
<html>
<head>
<title>Three.js Demo</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var 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();
</script>
</body>
</html>
在这个例子中，我们创建了一个简单的场景，其中包含一个绿色立方体并通过渲染器呈现在窗口中。下面是代码中的每个组件的解释：
- `THREE.Scene()`: 用于创建场景对象。
- `THREE.PerspectiveCamera(fov, aspect, near, far)`: 用于创建透视投影相机。fov参数是相机的视角，aspect参数是视口的宽高比，near参数是相机到近平面的距离，far参数是相机到远平面的距离。
- `THREE.WebGlRenderer()`: 用于创建WebGL渲染器，它将呈现场景和相机中的三维对象。
- `THREE.BoxGeometry()`: 用于创建一个立方体几何体对象，它由6个面组成。
- `THREE.MeshBasicMaterial({ color: 0x00ff00 })`: 用于创建mesh基础材质对象，可以设置颜色或贴图等特性。
- `THREE.Mesh(geometry, material)`: 用于将几何体与材质组合成一个mesh对象。
- `scene.add(cube)`: 将mesh对象添加到场景中。
- `camera.position.z = 5`: 将相机的z轴位置设置为5，使其与立方体的距离为5个单位长度。
- `renderer.render(scene, camera)`: 这是我们常规地将场景和镜头传递给渲染器来呈现场景的方式。
- `animate()`: 创建一个递归调用函数，在渲染每一帧时可以执行额外的逻辑代码。在这个例子中，我们旋转立方体并再次渲染场景的方法。
上面这些代码将显示一个绿色的立方体，并且当您在窗口中转动时，立方体也会相应地旋转。注意，示例仅用于显示基本用例，three.js具有更广泛的工具箱，可以使用光源、纹理、动画、特效等扩展示例。
效果图截图：
专题推荐：