Three.js开源项目实战|从0-1搭建小米SU7三维汽车效果②创建3D场景，实现三维效果

GIS遥遥

于 2025-08-23 10:15:00 发布

阅读量571

点赞数 17

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 three.js 三维GIS开发

本文链接：https://blog.csdn.net/yaogis888/article/details/150547758

今天继续带着大家零基础搭建一个三维汽车看车效果：《Three.js项目实战：从零搭建小米SU7三维汽车》；通过模块化开发实现SU7汽车模型的动态展示。

适合WebGIS和三维可视化学习者。

学完本系列内容，你将收获：

三维开发核心概念介绍&配置开发环境
创建一个3D场景
轨道控制器，进而方便从不同的角度观察物体
three.js场景搭建
汽车模型加载，SU7登场
SU7汽车颜色切换

今天我们通过three.js创建3D场景，实现三维效果

基本步骤是：

1)创建Scene场景对象；

2)设置PerspectiveCamera透视相机；

3)初始化WebGLRenderer渲染器。

通过Mesh网格对象添加几何体，需包含Geometry几何形状和Material材质。建议开启抗锯齿(antialias)并设置像素比(devicePixelRatio)优化显示效果。添加AxesHelper坐标轴辅助工具可帮助调试，使用OrbitControls可实现交互式视角控制。动画效果可通过修改物体旋转属性并循环调用render()实现。渲染过程类比相机拍照，结果呈现在Canvas画布上。

场景搭建

使用three.js需要这样几步
1. 创建一个三维场景(Scene)
2. 创建一个相机(Camera)
3. 创建渲染器渲染(Renderer)

1) 创建三维场景

const scene = new THREE.Scene()

2) 创建相机

// 2. 创建透视相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
)
camera.position.z = 5

3) 创建渲染器

render这一步需要放在最后面，如果在render后面再去进行scene.add来添加物体，会看不到物体，因为render已经完成了拍照

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 4. 渲染
renderer.render(scene, camera)

如何理解渲染

渲染就是拿相机在场景中拍照, 拍的照片显示在canvas画布上

上述完整示例

// 导入threejs
import * as THREE from 'three'

// 1. 创建场景
const scene = new THREE.Scene()
// 2. 创建透视相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
)
camera.position.z = 5
// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 4. 渲染
renderer.render(scene, camera)

4) 添加物体

创建一个立方体, 添加到场景中
在three.js中, 使用Mesh(网格)表示一个物体, 包括
●几何形状(Geometry)
●表面材质(Material)

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

上述代码
1. 创建了长宽高均为1个单位的立方体BoxGeometry
2. 使用法向量材质MeshNormalMaterial
3. 基于几何形状和材质创建立方体
4. 添加到场景中

效果

5) 添加动画

为了方便观察三维效果, 我们可以使用两种方式
●物体不变, 相机围绕物体旋转, 从不同的位置观察
●相机不变, 物体旋转
这里, 为了便于大家理解, 我们先固定相机, 通过动画旋转物体演示

6) 渲染优化

上述我们会看到明显的锯齿, 显示也不够清晰, 这里我们通过设置两个参数, 改善渲染效果。

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

上述代码

1. 通过设置渲染器的antialias属性为true, 开启抗锯齿
2. 设置DPI, 使用更多的像素点来描述同一个物体

完整示例

// 导入threejs
import * as THREE from 'three'

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

camera.position.z = 5

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

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 4. 渲染
function animation() {
  // 改变角度
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  // 重新渲染
  renderer.render(scene, camera)

  // 下一帧渲染回调
  requestAnimationFrame(animation)
}

animation()

7)开发辅助

// 导入threejs
import * as THREE from 'three'

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

camera.position.z = 100

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

// 4. 渲染
renderer.render(scene, camera)