使用Three.js + Blender构建在浏览器端显示的3D模型（1）

要在浏览器中显示3D模型，可以使用Three.js作为渲染引擎，Blender作为3D建模软件，以下是实现的基本流程：

1. 使用Blender建立3D模型并导出为glTF或者OBJ格式的文件。

2. 在Web页面中引入Three.js库。

3. 创建场景、相机和渲染器。

4. 加载模型文件并添加到场景中。

5. 渲染场景。

下面我们来详细讲解：

1. 使用Blender建立3D模型并导出为glTF或者OBJ格式的文件。

Blender是一款免费的开源3D建模软件，可以通过官网下载最新版本并安装。建立好3D模型后，可以通过导出功能将文件保存为glTF或者OBJ格式，这是目前Web端3D展示的主流格式。

2. 在Web页面中引入Three.js库。

可以通过CDN或者本地引入Three.js库，以下是CDN地址：

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>

3. 创建场景、相机和渲染器。

var scene = new THREE.Scene(); //创建场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //创建相机
camera.position.z = 5; //设置相机位置
var renderer = new THREE.WebGLRenderer(); //创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //设置渲染器大小
document.body.appendChild(renderer.domElement); //将渲染器添加到页面中

4. 加载模型文件并添加到场景中。

//加载模型文件
var loader = new THREE.GLTFLoader(); //glTF格式的模型文件加载器
loader.load('model.gltf', function(gltf) {
    scene.add(gltf.scene); //将模型文件添加到场景中
});

//或者加载OBJ格式的模型文件
var loader = new THREE.OBJLoader(); //OBJ格式的模型文件加载器
loader.load('model.obj', function(obj) {
    scene.add(obj); //将模型文件添加到场景中
});

5. 渲染场景。

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera); //渲染场景
}
animate();

以上就是使用Three.js + Blender构建在浏览器端显示的3D模型的基本流程。当然，还可以使用更多的Three.js功能来实现更加复杂的3D展示效果。