【threejs教程7】threejs聚光灯、摄影机灯和汽车运动效果

ops/2024/9/25 23:28:10/

【图片完整效果代码位于文章末】

        在上一篇文章中我们实现了汽车模型的加载，这篇文章主要讲如何让汽车看起来像在运动。同时列出聚光灯和摄像机灯光的加载方法。

        查看上一篇👉【threejs教程6】threejs加载glb模型文件（小米su7）👈

         往期文章：

         threejs基础开发应用示例

        【threejs教程2】threejs物体点击交互事件

        【threejs教程3】threejs物体轮廓发光

        【threejs教程4】threejs添加跳动标注

        【threejs教程5】threejs添加文字标注，且始终面向屏幕

实现原理

        汽车实际还是在原地，只有底部的地面纹理在不断地偏移，使汽车看起来像在运动。

实现步骤

1. 添加地板

        纹理图如下，水印好像去不了，需要无水印纹理的话可以跟我要。也可以自己截取一下把水印裁掉，或者自己找个别的纹理也行。

javascript">// 加载地面
function loadGround() {// 加载纹理const textureLoader = new THREE.TextureLoader();const floorTexture = textureLoader.load('./img/shuini.jpg'); // 替换为你的jpg文件路径// 设置纹理重复以覆盖整个地板floorTexture.wrapS = THREE.RepeatWrapping;floorTexture.wrapT = THREE.RepeatWrapping;floorTexture.repeat.set(1, 10);// 创建地板的材质const floorMaterial = new THREE.MeshStandardMaterial({ map: floorTexture });// 创建地板的几何体const floorGeometry = new THREE.PlaneGeometry(10, 60); // 参数为宽度和长度// 结合几何体和材质创建网格const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);// 将地板沿Y轴旋转-90度使其与相机视角垂直floorMesh.rotation.x = -Math.PI / 2;// 添加地板到场景scene.add(floorMesh);
}

2.让地板的纹理运动

        不断更新地板在y轴方向的偏移量，即可达到不断重复运动的效果。

javascript">  function animate() {requestAnimationFrame(animate);// 更新纹理偏移量，这里只在V轴（纵向）上移动floorTexture.offset.y += 0.004; // 每帧偏移0.004，根据需要调整速度if (floorTexture.offset.y > 1) {floorTexture.offset.y -= 1; // 当偏移到下一个重复时重置}}animate(); // 开始动画循环

3.添加光源

我们添加了一个聚光灯和一个摄像机灯光效果，可以根据需求自己调整参数。如果觉得显示不佳也可以添加辅助灯光PointLight点光源和DirectionalLight平行光源等。

javascript">function addspotLight() {// 创建聚光灯const spotLight = new THREE.SpotLight(0xffffff, 1); // 光的颜色和强度spotLight.position.set(0, 5, 0); // 调整光源位置，这里假设汽车位于原点附近spotLight.castShadow = true; // 开启阴影投射spotLight.angle = Math.PI / 4; // 灯光锥角，控制光照的圆形范围大小spotLight.penumbra = 0.1; // 半影软边宽度，增加真实感spotLight.decay = 1; // 光照随着距离增加的衰减系数，影响光照范围// 设置目标为汽车的位置，假设carMesh是您的汽车模型spotLight.target = carMesh;// 将聚光灯添加到场景中scene.add(spotLight);scene.add(spotLight.target);
}
function addCameraLight() {// 创建光源const cameraLight = new THREE.PointLight(0xffffff, 0.8); // 白色点光，强度1cameraLight.castShadow = true; // 允许投射阴影（如果需要）scene.add(cameraLight);function updateCameraLight() {// 更新光源的位置cameraLight.position.copy(camera.position);// 更新光源的方向（对于DirectionalLight，确保它指向相机的前方）cameraLight.target.position.copy(camera.position);cameraLight.target.position.add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(-1));cameraLight.lookAt(cameraLight.target.position);}function animate() {requestAnimationFrame(animate);// 保持光源与相机同步updateCameraLight();renderer.render(scene, camera);}animate();
}

4.完整效果代码如下所示

javascript"><template></template>
<script setup>
import * as THREE from 'three';
import { onMounted, ref } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';
const scene = new THREE.Scene();
let carMesh;
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
const controls = new OrbitControls(camera, renderer.domElement);onMounted(() => {init();
});
function init() {camera.position.set(-5, 3, -3);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);controls.update();function animate() {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);}animate();// addLight();loadGround();
}
// 添加汽车模型
const loader = new GLTFLoader();
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath('./draco/gltf/');
loader.setDRACOLoader(dracoloader);
loader.load('./model/xiaomisu7.glb', (gltf) => {carMesh = gltf.scene;scene.add(carMesh);carMesh.position.y = 0.1;console.log(carMesh);carMesh.traverse((child) => {if (child.isMesh && child.name.includes('车轮')) {function animate() {requestAnimationFrame(animate);child.rotation.x -= 0.05;}animate();}});addspotLight();addCameraLight()
});
// 加载地面
function loadGround() {// 加载纹理const textureLoader = new THREE.TextureLoader();const floorTexture = textureLoader.load('./img/shuini.jpg'); // 替换为你的jpg文件路径// 设置纹理重复以覆盖整个地板floorTexture.wrapS = THREE.RepeatWrapping;floorTexture.wrapT = THREE.RepeatWrapping;floorTexture.repeat.set(1, 10);// 创建地板的材质const floorMaterial = new THREE.MeshStandardMaterial({ map: floorTexture });// 创建地板的几何体const floorGeometry = new THREE.PlaneGeometry(10, 60); // 参数为宽度和长度// 结合几何体和材质创建网格const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);// 将地板沿Y轴旋转-90度使其与相机视角垂直floorMesh.rotation.x = -Math.PI / 2;// 添加地板到场景scene.add(floorMesh);function animate() {requestAnimationFrame(animate);// 更新纹理偏移量，这里只在U轴（横向）上移动floorTexture.offset.y += 0.004; // 每帧偏移0.01，根据需要调整速度if (floorTexture.offset.y > 1) {floorTexture.offset.y -= 1; // 当偏移到下一个重复时重置}}animate(); // 开始动画循环
}
function addspotLight() {// 创建聚光灯const spotLight = new THREE.SpotLight(0xffffff, 1); // 光的颜色和强度spotLight.position.set(0, 5, 0); // 调整光源位置，这里假设汽车位于原点附近spotLight.castShadow = true; // 开启阴影投射spotLight.angle = Math.PI / 4; // 灯光锥角，控制光照的圆形范围大小spotLight.penumbra = 0.1; // 半影软边宽度，增加真实感spotLight.decay = 1; // 光照随着距离增加的衰减系数，影响光照范围// 设置目标为汽车的位置，假设carMesh是您的汽车模型spotLight.target = carMesh;// 将聚光灯添加到场景中scene.add(spotLight);scene.add(spotLight.target);
}function addCameraLight() {// 创建光源const cameraLight = new THREE.PointLight(0xffffff, 0.8); // 白色定向光，强度1cameraLight.castShadow = true; // 允许投射阴影（如果需要）scene.add(cameraLight);function updateCameraLight() {// 更新光源的位置cameraLight.position.copy(camera.position);// 更新光源的方向（对于DirectionalLight，确保它指向相机的前方）cameraLight.target.position.copy(camera.position);cameraLight.target.position.add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(-1));cameraLight.lookAt(cameraLight.target.position);}function animate() {requestAnimationFrame(animate);// 保持光源与相机同步updateCameraLight();renderer.render(scene, camera);}animate();
}
</script>

 文章如有技术相关错误请各位批评指正


http://www.ppmy.cn/ops/16444.html

相关文章

51-45 Diffuser，生成柔性行为的扩散轨迹规划

51-45 Diffuser，生成柔性行为的扩散轨迹规划

22年11月&#xff0c;Berkeley 和MIT联合发布Planning with Diffusion for Flexible Behavior Synthesis&#xff0c;作者在文中把轨迹扩散概率模型称为Diffuser。 Diffusion Model 具有更强的建模复杂分布的能力&#xff0c;能够更好地建模表征数据的各种特性&#xff0c;但是…
阅读更多...
关于DevOps理解和总结

关于DevOps理解和总结

DevOps是研发领域最近几年最热的一个概念。参加过一些讲座&#xff0c;也看过不少的书籍&#xff0c;经常听到以下说法&#xff1a; DevOps是没有明确定义的&#xff0c;一千个研发心中就有一千个Devops&#xff1b;DevOps是一种文化&#xff0c;每个团队的DevOps实践都不一样…
阅读更多...
【ZYNQ】zynq启动模式及程序固化

【ZYNQ】zynq启动模式及程序固化

一、前言 由于zynq含有arm cpu ,其启动模式由ps主导&#xff0c;与纯逻辑的fpga不相同&#xff0c;此处做一个记录。 二、zynq启动模式 关于zynq的启动模式详细内容可以参考官方文档&#xff1a;ug585-Zynq 7000 SoC Technical Reference Manual&#xff0c;第六章。 2.1 启…
阅读更多...
AWS制作WordPress在国内外的利弊？

AWS制作WordPress在国内外的利弊？

AWS作为全球领先的云计算服务供应商&#xff0c;为WordPress提供了强大且灵活的托管环境&#xff0c;使用AWS来搭建和运行WordPress无疑是个不错的选择。即便如此使用AWS制作还是会有些许利弊&#xff0c;九河云作为AWS的合作伙伴来为读者们仔细探讨AWS在WordPress的利弊。 利&…
阅读更多...
python_django农产品物流信息服务系统6m344

python_django农产品物流信息服务系统6m344

Python 中存在众多的 Web 开发框架&#xff1a;Flask、Django、Tornado、Webpy、Web2py、Bottle、Pyramid、Zope2 等。近几年较为流行的&#xff0c;大概也就是 Flask 和 Django 了 Flask 是一个轻量级的 Web 框架&#xff0c;使用 Python 语言编写&#xff0c;较其他同类型框…
阅读更多...
深度探讨容器化技术在网络安全中的应用与挑战

深度探讨容器化技术在网络安全中的应用与挑战

随着容器化技术的快速发展&#xff0c;尤其是Docker与Kubernetes&#xff08;K8s&#xff09;的广泛应用&#xff0c;企业IT架构正经历着从传统虚拟机向轻量级容器的深刻变革。容器化技术为提升资源利用率、加速应用部署及维护提供了强大支持&#xff0c;但同时也给网络安全带来…
阅读更多...
【后端】python数组去重和过滤的使用方法

【后端】python数组去重和过滤的使用方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数组介绍二、python数组去重和过滤1.数组去重2.数组过滤 三、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人会主动学习使用一…
阅读更多...
WordPress安装报错常见问题

WordPress安装报错常见问题

WordPress安装过程很简单&#xff0c;不过还是有些朋友会碰到安装WordPress出错的情况。前不久我们遇到Hostease的客户在安装wordpress的时候遇到安装wordpress出错。显示数据连接错误。 数据库连接失败 数据库连接失败是最常见的错误情况。 添加图片注释&#xff0c;不超过 …
阅读更多...
最新文章

Copyright @ 2022~2023