您的位置:首页 > 游戏 > 手游 > 开发公司项目部人员配置_沈阳企业网站排名优化_福州关键词排名软件_网站关键词查询

开发公司项目部人员配置_沈阳企业网站排名优化_福州关键词排名软件_网站关键词查询

2024/11/18 10:40:38 来源:https://blog.csdn.net/qq_44973159/article/details/142208937  浏览:    关键词:开发公司项目部人员配置_沈阳企业网站排名优化_福州关键词排名软件_网站关键词查询
开发公司项目部人员配置_沈阳企业网站排名优化_福州关键词排名软件_网站关键词查询

Three.js 实战【3】—— 城市模型渲染

初始化场景

初始化场景这一块就跳过了,可以参考上一篇文章:Three.js 实战【2】—— 船模型海上场景渲染,效果是一样的。

加载模型

这里我们找一个城市的模型下来,可以上这个网站下载个模型,这里以上海市模型下载地址为例。

先加载我们下载的模型到场景当中。

const addCity = () => {const gltfLoader = new GLTFLoader();gltfLoader.load('./src/assets/glb/shanghai_city.glb', (gltf: any) => {model = gltf.scene.children[0];scene.add(model);});
};

在加载了第三方的模型发现模型并没有和坐标系的(0,0,0)保持重合,反而有偏移,这个时候我们可以利用Box3去拿到模型的包围盒,获取到模型的中心点坐标信息,再取反,就会得到模型中心点在3d世界的位置信息。(在上面scene.add(model))前调用这个toCenter方法进行居中。

  • Box3:表示三维空间中的一个轴对齐包围盒
  • expandByObject(model):扩展此包围盒的边界,使得对象及其子对象在包围盒内,包括对象和子对象的世界坐标的变换。
  • Vector3:三维向量表示的是一个有顺序的、三个为一组的数字组合(x,y,z)
  • negate:向量取反,即: x = -x, y = -y , z = -z。
const toCenter = () => {const box = new THREE.Box3();box.expandByObject(model);console.log('box =====', box);const size = new THREE.Vector3();const center = new THREE.Vector3();console.log('size,center =====', size, center);// 获取包围盒的中心点和尺寸box.getCenter(center);box.getSize(size);// 将Y轴置为0model.position.copy(center.negate().setY(0));
};

添加材质

这里先抽离个创建材质的方法出来,这里就简单创建一个颜色的材质。

const colorMaterial = (color: string) => {return new THREE.MeshPhongMaterial({color});
};

在前面加载的model模型部分,可以通过traverse方法去拿到模型里面所有的对象,可以这么理解。然后这里面的item.name和导入的模型是有关系的,可以打印出来看一下模型里面的name都是一些什么,再去进行匹配添加材质。

const addCity = () => {const gltfLoader = new GLTFLoader();gltfLoader.load('./src/assets/glb/shanghai_city.glb', (gltf: any) => {model = gltf.scene.children[0];toCenter();model.traverse((item: { name: string, material: any }) => {console.log(' =====', item.name);if (item.name.includes('dongfangmingzhu')) {item.material = colorMaterial('#f40');} else if (item.name.includes('shanghaizhongxin')) {item.material = colorMaterial('#aa21ee');} else if (item.name.includes('huanqiujinrongzhongxin')) {item.material = colorMaterial('#008000');} else if (item.name.includes('jinmaodasha')) {item.material = colorMaterial('#0000ff');} else if (item.name.includes('Floor')) {item.material = colorMaterial('#ffffff');} else if (item.name.includes('city')) {item.material = colorMaterial('#867e76');}});scene.add(model);});
};

效果:

在这里插入图片描述

纹理

创建一个纹理:

  • wrapS:这个值定义了纹理贴图在水平方向上将如何包裹
  • wrapT:这个值定义了纹理贴图在垂直方向上将如何包裹
  • .repeat:决定纹理在表面的重复次数,两个方向分别表示U和V
const ImageLoader = new THREE.ImageLoader();
let texture: { needsUpdate: boolean; };
ImageLoader.load(TextureImage, function (img: any) {texture = new THREE.Texture(img, {wraps: THREE.RepeatWrapping,repeat: new THREE.Vector2(10, 10),wrapT: THREE.RepeatWrapping});texture.needsUpdate = true;
});

将纹理添加到材质上,那么这个时候改一下前面那个创建材质的方法

  • map:纹理贴图
  • alphaMap:一张灰度纹理,用于控制整个表面的不透明度
  • aoMapIntensity:环境遮挡效果的强度。默认值为1。零是不遮挡效果
  • bumpMap:用于创建凹凸贴图的纹理
  • bumpScale:凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1
const colorMaterial = (color: string, texture: any) => {let options = {};if (texture) {options = {map: texture,alphaMap: texture,aoMapIntensity: 0,bumpMap: texture,bumpScale: 0};} else {options = {color,shininess: 100,flatShading: true};}return new THREE.MeshPhongMaterial(options);
};

效果示意:

在这里插入图片描述

视角限制

这个在上一个船的就解释过了,直接复制过来使用就好了,去掉了最大最小距离的配置(minDistance、maxDistance)

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.45;
// controls.minDistance = 5.0;
// controls.maxDistance = 15.0;
controls.update();

完整代码

<!-- 组件 -->
<script lang="ts" setup>
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import TextureImage from '@/assets/image/4.jpg';const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 2000);
camera.position.set(2, 2, 2);
scene.add(camera);// 环境光
const ambientLight = new THREE.AmbientLight('white', 0.5);
ambientLight.position.set(1, 1, 1);
scene.add(ambientLight);const light = new THREE.DirectionalLight('#fff', 1);
light.position.set(1, 10, 1);
camera.add(light);const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;const axesHelper = new THREE.AxesHelper(1);
scene.add(axesHelper);// 加载模型
let model: {scale: { set: (arg0: number, arg1: number, arg2: number) => void; };rotation: { z: number; };position: { z: number; };material: any;
};const addCity = () => {const gltfLoader = new GLTFLoader();gltfLoader.load('./src/assets/glb/shanghai_city.glb', (gltf: any) => {model = gltf.scene.children[0];toCenter();model.traverse((item: { name: string, material: any }) => {console.log(' =====', item.name);if (item.name.includes('dongfangmingzhu')) {item.material = colorMaterial('#f40', null);} else if (item.name.includes('shanghaizhongxin')) {item.material = colorMaterial('#d90000', null);} else if (item.name.includes('huanqiujinrongzhongxin')) {item.material = colorMaterial('#008000', null);} else if (item.name.includes('jinmaodasha')) {item.material = colorMaterial('#0000ff', null);} else if (item.name.includes('Floor')) {item.material = colorMaterial('#ffffff', texture);} else if (item.name.includes('city')) {item.material = colorMaterial('#ffffff', texture);}});scene.add(model);});
};const toCenter = () => {const box = new THREE.Box3();box.expandByObject(model);console.log('box =====', box);const size = new THREE.Vector3();const center = new THREE.Vector3();console.log('size,center =====', size, center);// 获取包围盒的中心点和尺寸box.getCenter(center);box.getSize(size);// 将Y轴置为0model.position.copy(center.negate().setY(0));
};// 图片加载器
const ImageLoader = new THREE.ImageLoader();
let texture: { needsUpdate: boolean; };
ImageLoader.load(TextureImage, function (img: any) {texture = new THREE.Texture(img, {wraps: THREE.RepeatWrapping,repeat: new THREE.Vector2(10, 10),wrapT: THREE.RepeatWrapping});texture.needsUpdate = true;
});const colorMaterial = (color: string, texture: any) => {let options = {};if (texture) {options = {map: texture,alphaMap: texture,aoMapIntensity: 0,bumpMap: texture,bumpScale: 0};} else {options = {color,shininess: 100,flatShading: true};}return new THREE.MeshPhongMaterial(options);
};// 渲染
const render = () => {renderer.render(scene, camera);requestAnimationFrame(render);
};onMounted(() => {document.getElementById('home')?.appendChild(renderer.domElement);addCity();render();
});
</script><template><div id="home" class="w-full h-full"></div>
</template>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com