用threejs实现一个3d可视化校园，可以漫游

三维校园场景的实现可以分为以下几个步骤：

1. 准备场景和相机

首先需要创建一个场景对象和一个相机对象，场景对象用于管理场景中的所有物体，相机对象用于控制场景的视角。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 100); // 设置相机位置

2. 添加光源和地面

光源是场景中的重要元素，可以让物体产生阴影和光影效果。在这里我们添加一个点光源和一个半球光源。

var pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 50, 0);
scene.add(pointLight);

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.position.set(0, 50, 0);
scene.add(hemiLight);

地面可以使用平面几何体来实现，同时使用纹理贴图来给地面添加纹理。

var texture = new THREE.TextureLoader().load('textures/grass.png');
var material = new THREE.MeshLambertMaterial({ map: texture });
var geometry = new THREE.PlaneGeometry(200, 200, 10, 10);
var ground = new THREE.Mesh(geometry, material);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

3. 添加建筑和其他物体

校园场景中最重要的元素就是建筑了，可以使用箱形几何体或其他几何体来创建建筑的形状，然后使用纹理贴图来添加细节。

var texture = new THREE.TextureLoader().load('textures/building.png');
var material = new THREE.MeshLambertMaterial({ map: texture });
var geometry = new THREE.BoxGeometry(10, 20, 10);
var building = new THREE.Mesh(geometry, material);
building.position.set(0, 10, 0);
scene.add(building);

其他物体可以根据需要添加，例如树木、花坛等等。

var texture = new THREE.TextureLoader().load('textures/tree.png');
var material = new THREE.MeshLambertMaterial({ map: texture });
var geometry = new THREE.BoxGeometry(5, 10, 5);
var tree = new THREE.Mesh(geometry, material);
tree.position.set(20, 5, 0);
scene.add(tree);

4. 渲染场景

最后需要将场景和相机传入渲染器中进行渲染，同时需要在动画循环中更新场景中的元素状态。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
    requestAnimationFrame(animate);

    // 更新场景中的元素状态
    building.rotation.y += 0.01;
    tree.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

完整的代码可以参考以下示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 100);

var pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 50, 0);
scene.add(pointLight);

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.position.set(0, 50, 0);
scene.add(hemiLight);

var texture = new THREE.TextureLoader().load('textures/grass.png');
var material = new THREE.MeshLambertMaterial({ map: texture });
var geometry = new THREE.PlaneGeometry(200, 200, 10, 10);
var ground = new THREE.Mesh(geometry, material);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

var texture = new THREE.TextureLoader().load('textures/building.png');
var material = new THREE.MeshLambertMaterial({ map: texture });
var geometry = new THREE.BoxGeometry(10, 20, 10);
var building = new THREE.Mesh(geometry, material);
building.position.set(0, 10, 0);
scene.add(building);

var texture = new THREE.TextureLoader().load('textures/tree.png');
var material = new THREE.MeshLambertMaterial({ map: texture });
var geometry = new THREE.BoxGeometry(5, 10, 5);
var tree = new THREE.Mesh(geometry, material);
tree.position.set(20, 5, 0);
scene.add(tree);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
    requestAnimationFrame(animate);

    building.rotation.y += 0.01;
    tree.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();