如何用three.js添加光照效果
时间: 2023-11-07 16:40:21 浏览: 57
要在Three.js中添加光照效果,需要使用光源对象和材质属性。下面是一个简单的示例代码,演示如何在场景中添加点光源和平行光源的光照效果:
```javascript
// 创建场景
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);
// 创建几何体
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // 使用Phong材质
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建点光源
var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(2, 2, 2);
scene.add(pointLight);
// 创建平行光源
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);
// 渲染场景
function animate() {
requestAnimationFrame(animate);
// 物体旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
在上述代码中,我们使用了`MeshPhongMaterial`作为几何体的材质,这是一种能够产生光照效果的材质。然后,我们创建了一个点光源和一个平行光源,分别使用`PointLight`和`DirectionalLight`。最后,通过调用`render`方法渲染场景。
这只是一个简单的例子,Three.js还支持其他类型的光源和更多高级的光照特性。你可以根据自己的需求进一步探索和调整光照效果。