Three.js搭建小米SU7三维汽车实战（4）场景搭建

news2025/6/1 12:43:05

场地搭建

```javascript // 导入threejs import * as THREE from "three"; // 导入轨道控制器 import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);

camera.position.z = 50;

// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

// 6. 显示坐标轴(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 7. 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 4. 动态渲染
function animation() {
controls.update();
renderer.render(scene, camera);

requestAnimationFrame(animation);
}
animation();
// 监听window的resize事件, 在回调中重绘canvas
window.addEventListener(“resize”, () => {
// 设置相机宽高比
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

// 设置渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
});


![](https://cdn.nlark.com/yuque/0/2025/png/8435413/1746754347219-0af5675d-ed2e-4896-85f1-f9dbe2683e48.png?x-oss-process=image%2Fformat%2Cwebp)

<h1 id="Tnwb7"><font style="color:rgb(38, 38, 38);">汽车模型获取</font></h1>
[SU7 - Download Free 3D model by s1657270997](https://sketchfab.com/3d-models/su7-7296a91633d74c6eb113010e2ed75eda)

<h1 id="B3RKC"><font style="color:rgb(38, 38, 38);">设置展厅</font></h1>
<h2 id="uzbYV"><font style="color:rgb(38, 38, 38);">添加地板</font></h2>
<font style="color:rgb(38, 38, 38);">我们可以将立方体删掉，换成一个圆形的面，这个面就是我们的展厅地板</font>

```javascript
const geom = new THREE.CircleGeometry(20, 29);
const material = new THREE.MeshBasicMaterial({
    color:new THREE.Color(0xffffff)
});
const mesh = new THREE.Mesh(geom, material);
scene.add(mesh)

现在我们发现这个面是立着的，我们需要给它旋转一下

mesh.rotation.x -= (90 * Math.PI) / 180;

修改一下材质为双面渲染

const material = new THREE.MeshBasicMaterial({
    color:new THREE.Color(0xffffff),
    side:THREE.DoubleSide
});

设置背景

我们将当前的背景修改一下，懂车帝使用的是一个渐变图作为背景，我们将其拿过来用一下

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="500px" viewBox="0 0 1418 344" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<title>bg新</title>
	<defs>
		<radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="translate(0.500000,0.000000),scale(0.224457,1.000000),rotate(90.000000),scale(1.000000,3.681004),translate(-0.500000,-0.000000)" id="radialGradient-1">
			<stop stop-color="#B4B9C5" offset="0%"></stop>
			<stop stop-color="#F7F8FC" offset="100%"></stop>
		</radialGradient>
		<rect id="path-2" x="0" y="0" width="1388" height="311.545631"></rect>
		<linearGradient x1="44.08867%" y1="43.6422414%" x2="100%" y2="43.6422414%" id="linearGradient-4">
			<stop stop-color="#F7F8FC" offset="0%"></stop>
			<stop stop-color="#F2F4FA" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<rect id="path-5" x="0" y="0" width="1388" height="311.545631"></rect>
		<linearGradient x1="44.08867%" y1="43.6422414%" x2="100%" y2="43.6422414%" id="linearGradient-7">
			<stop stop-color="#F2F4FA" stop-opacity="0" offset="0%"></stop>
			<stop stop-color="#F7F8FC" offset="100%"></stop>
		</linearGradient>
		<radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="translate(0.500000,0.000000),scale(0.024115,1.000000),rotate(90.000000),scale(1.000000,27.956600),translate(-0.500000,-0.000000)" id="radialGradient-8">
			<stop stop-color="#B8BDC9" offset="0%"></stop>
			<stop stop-color="#F7F8FC" offset="100%"></stop>
		</radialGradient>
		<filter x="-1.1%" y="-44.8%" width="102.2%" height="189.6%" filterUnits="objectBoundingBox" id="filter-9">
			<feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
		</filter>
	</defs>
	<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<g id="bg新" transform="translate(15.000000, 0.000000)">
			<g id="椭圆形-+-椭圆形-蒙版">
				<g id="蒙版" transform="translate(694.000000, 155.772816) scale(-1, 1) rotate(-180.000000) translate(-694.000000, -155.772816) translate(0.000000, 0.000001)" fill="url(#radialGradient-1)" fill-rule="nonzero">
					<rect id="path-2" x="0" y="0" width="1388" height="311.545631"></rect>
				</g>
				<g id="椭圆形-Clipped">
					<mask id="mask-3" fill="white">
						<use xlink:href="#path-2"></use>
					</mask>
					<g id="path-2"></g>
					<ellipse id="椭圆形" fill="url(#linearGradient-4)" fill-rule="nonzero" mask="url(#mask-3)" cx="-7.73019802" cy="241.168932" rx="234.482673" ry="234.302913"></ellipse>
				</g>
				<g id="椭圆形-Clipped">
					<mask id="mask-6" fill="white">
						<use xlink:href="#path-5"></use>
					</mask>
					<g id="path-2"></g>
					<ellipse id="椭圆形" fill="url(#linearGradient-7)" fill-rule="nonzero" mask="url(#mask-6)" cx="1177.56683" cy="241.168932" rx="234.482673" ry="234.302913"></ellipse>
				</g>
			</g>
			<path d="M694,328.71068 C1077.28562,328.71068 1388,321.217752 1388,311.974757 C1388,302.731763 1077.28562,295.238835 694,295.238835 C310.714384,295.238835 0,302.731763 0,311.974757 C0,321.217752 310.714384,328.71068 694,328.71068 Z" id="椭圆形" fill="url(#radialGradient-8)" fill-rule="nonzero" opacity="0.960278888" filter="url(#filter-9)"></path>
		</g>
	</g>
</svg>

threejs中加载材质使用的是TextureLoader，加载之后还可以设置一下背景的平铺方式，避免背景重复平铺或者拉伸

const backgoundTexture = new THREE.TextureLoader().load(
	"/src/assets/images/background.svg"
);
backgoundTexture.wrapS = backgoundTexture.wrapT = THREE.RepeatWrapping;
backgoundTexture.repeat.set(1, 1);