1. 简介
随着WebGL技术的快速发展，越来越多的网站开始使用JavaScript实现3D模型和视觉效果的制作和展示。本文将介绍如何使用JavaScript和Three.js库实现3D模型和视觉效果的制作和展示。
2. Three.js库
2.1 Three.js是什么
Three.js是基于WebGL的JavaScript 3D库，它可以让开发者轻松地创建和展示3D场景，同时支持多种材质和纹理。
Three.js库的官方网站：https://threejs.org/
2.2 Three.js的安装和使用
安装Three.js很简单，只需在HTML文件的head部分引入Three.js库即可：
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
使用Three.js创建3D场景的基本步骤如下：
创建场景
创建相机
创建渲染器
创建光源
创建物体
将物体添加到场景中，开始渲染
下面以一个简单的例子说明如何使用Three.js创建3D场景。首先创建一个HTML文件，并在head部分引入Three.js库：
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
</head>
然后在body部分添加canvas元素：
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
接着在JavaScript文件中创建场景、相机、渲染器、光源和物体，并将物体添加到场景中：
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById("myCanvas")});
// 创建光源
var light = new THREE.PointLight(0xffffff, 1, 100);
// 创建物体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial({color: 0xffffff});
var cube = new THREE.Mesh(geometry, material);
// 设置物体的位置
cube.position.z = -5;
// 将光源添加到场景中
light.position.set(-10, 10, 10);
scene.add(light);
// 将物体添加到场景中
scene.add(cube);
// 渲染场景
renderer.render(scene, camera);
运行上述代码，即可在浏览器中看到一个白色的立方体。
3. Three.js的常用功能
3.1 创建不同材质的物体
Three.js支持多种材质，包括基本的颜色材质、纹理材质、光线追踪材质等。下面以创建颜色材质和纹理材质的物体为例：
// 创建颜色材质的物体
var geometry1 = new THREE.BoxGeometry(1, 1, 1);
var material1 = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube1 = new THREE.Mesh(geometry1, material1);
scene.add(cube1);
// 创建纹理材质的物体
var texture = new THREE.TextureLoader().load("texture.jpg");
var geometry2 = new THREE.BoxGeometry(1, 1, 1);
var material2 = new THREE.MeshLambertMaterial({map: texture});
var cube2 = new THREE.Mesh(geometry2, material2);
scene.add(cube2);
其中，创建纹理材质的物体需要使用TextureLoader类加载纹理图片。
3.2 使用OBJ文件创建物体
Three.js支持使用OBJ文件创建物体。可以使用OBJLoader类加载OBJ文件，并使用Mesh类将OBJ模型变成可渲染的物体：
// 加载OBJ文件
var loader = new THREE.OBJLoader();
loader.load("model.obj", function(object){
// 将OBJ模型变成可渲染的物体
var material = new THREE.MeshLambertMaterial({color: 0xffffff});
var mesh = new THREE.Mesh(object.children[0].geometry, material);
scene.add(mesh);
});
其中，model.obj是要加载的OBJ文件。
3.3 添加动画
Three.js支持添加动画。可以使用Tween.js库来实现动画效果。以下是添加旋转动画的示例：
var animate = function(){
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
上述代码将物体cube做了一个旋转动画。
4. 结论
使用JavaScript和Three.js库可以轻松地创建和展示3D模型和视觉效果。本文介绍了使用Three.js库创建3D场景的基本步骤、创建不同材质的物体、使用OBJ文件创建物体以及添加动画的常用功能。在实际应用中，可以根据实际需要使用更多的功能来实现更复杂的3D效果。