当前位置：首页 > backend >正文

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

backend 2025/6/20 4:09:08

视频版看文末
往期推荐：
Three.js搭建小米SU7三维汽车实战（1）搭建开发环境
Three.js搭建小米SU7三维汽车实战（2）场景搭建
Three.js搭建小米SU7三维汽车实战（3）轨道控制器

场地搭建

// 导入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);
});

汽车模型获取

SU7 - Download Free 3D model by s1657270997

设置展厅

添加地板

我们可以将立方体删掉，换成一个圆形的面，这个面就是我们的展厅地板

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);