### 回答1：
好的，我可以给你提供一个简单的室内场景，并添加一些灯光效果。
首先，我们需要使用 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 cubeGeometry = new THREE.BoxGeometry(4, 3, 4);
var cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xCCCCCC });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
// 创建地板
var floorGeometry = new THREE.PlaneGeometry(10, 10);
var floorMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -1.5;
scene.add(floor);
// 添加家具
var chairLoader = new THREE.GLTFLoader();
chairLoader.load('chair.glb', function (gltf) {
var chair = gltf.scene;
chair.scale.set(0.2, 0.2, 0.2);
chair.position.set(-1, -1.3, 1);
scene.add(chair);
});
var tableLoader = new THREE.GLTFLoader();
tableLoader.load('table.glb', function (gltf) {
var table = gltf.scene;
table.scale.set(0.08, 0.08, 0.08);
table.position.set(1, -1.3, -1);
scene.add(table);
});
```
接下来，我们需要添加灯光效果。这里我添加了两个点光源和一个环境光。
```javascript
// 创建点光源
var pointLight1 = new THREE.PointLight(0xffffff, 1, 100);
pointLight1.position.set(2, 2, 2);
scene.add(pointLight1);
var pointLight2 = new THREE.PointLight(0xffffff, 1, 100);
pointLight2.position.set(-2, 2, -2);
scene.add(pointLight2);
// 创建环境光
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
```
最后，我们需要渲染场景并实现动画效果。
```javascript
// 添加动画效果
function animate() {
requestAnimationFrame(animate);
// 使立方体旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
完整的代码如下：
```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 cubeGeometry = new THREE.BoxGeometry(4, 3, 4);
var cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xCCCCCC });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
// 创建地板
var floorGeometry = new THREE.PlaneGeometry(10, 10);
var floorMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -1.5;
scene.add(floor);
// 添加家具
var chairLoader = new THREE.GLTFLoader();
chairLoader.load('chair.glb', function (gltf) {
var chair = gltf.scene;
chair.scale.set(0.2, 0.2, 0.2);
chair.position.set(-1, -1.3, 1);
scene.add(chair);
});
var tableLoader = new THREE.GLTFLoader();
tableLoader.load('table.glb', function (gltf) {
var table = gltf.scene;
table.scale.set(0.08, 0.08, 0.08);
table.position.set(1, -1.3, -1);
scene.add(table);
});
// 创建点光源
var pointLight1 = new THREE.PointLight(0xffffff, 1, 100);
pointLight1.position.set(2, 2, 2);
scene.add(pointLight1);
var pointLight2 = new THREE.PointLight(0xffffff, 1, 100);
pointLight2.position.set(-2, 2, -2);
scene.add(pointLight2);
// 创建环境光
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// 添加动画效果
function animate() {
requestAnimationFrame(animate);
// 使立方体旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
你可以根据自己的需求更改场景中的家具模型和灯光位置、颜色等参数，以实现更加细致的灯光效果。
### 回答2：
three.js 是一个基于 WebGL 的 JavaScript 库，用于创建和展示 3D 场景。要在室内场景中添加灯光效果，可以通过 three.js 提供的灯光对象来实现。
首先，需要创建一个场景并添加一个相机。然后，可以使用如下代码创建一个立方体并将其添加到场景中：
```javascript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
```
接下来，可以创建一个平行光源并将其添加到场景中。平行光可以模拟太阳光，给整个室内场景提供光亮：
```javascript
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);
```
另外，可以添加一个环境光源来提供整体的光照效果：
```javascript
var ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);
```
最后，使用动画循环函数来实时渲染场景：
```javascript
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
通过以上代码，我们创建了一个带有灯光效果的室内场景。可以根据需要调整灯光的位置、强度和颜色等参数来实现不同的效果。
该博客展示了如何使用ThreeJS实现3D模型上的室内灯光效果，包括多角度光影效果的创建，通过添加聚光灯和阴影平面来增强视觉体验。
最低0.47元/天 解锁文章
扫一扫
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
