以下是一个简单的threejs三维模型立方体示例，创建了一个立方体并将其渲染到屏幕上：
<!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 renderer = new THREE.WebGLRenderer();
//设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
//将渲染器添加到页面上
document.body.appendChild(renderer.domElement);
//创建一个新的场景
var scene = new THREE.Scene();
//创建一个新的立方体网格
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//将立方体网格添加到场景
scene.add(cube);
//设置照相机的位置和方向
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
//创建一个运动循环来不断更新场景和渲染器
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>解释代码元素：
1. 渲染器：首先我们需要一个渲染器，也就是THREE.WebGLRenderer对象。它可以将3D场景渲染到HTML5的canvas元素中。
2. 场景：然后我们需要一个场景，也就是THREE.Scene对象。它是包含着所有3D模型、灯光和其他对象的容器。
3. 网格：我们要在场景中添加一个3D对象，这里我们使用THREE.Mesh对象。一个网格是由几何体和一个材质组成的。我们首先使用THREE.BoxGeometry创建一个立方体几何体，然后使用THREE.MeshBasicMaterial创建一个材质，并在创建一个具有几何体和材质的网格。最后将网格添加到场景中。
4. 照相机：我们还需要一个照相机，也就是THREE.PerspectiveCamera对象。它定义了我们将要看到的3D场景的视口。
5. 运动循环：最后，我们需要一个循环来不停地更新场景和渲染器。我们使用requestAnimationFrame函数来请求浏览器在下次重绘帧之前调用animate函数。在animate函数中，我们更新网格的旋转角度并使用renderer.render函数将场景渲染到屏幕上。
效果图截图：
专题推荐：