本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议
》和
《
阿里云开发者社区知识产权保护指引
》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单
进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
创建场景——>创建相机——>创建物体——>把物体放进场景——>通过渲染器进行渲染
2、实例展示
（1）首先导入进来 three 文件（这里是创建了一个项目，通过 npm install 安装的依赖）
（2）创建场景
（3）创建相机对象（透视相机）
（4）设置相机的位置
（5）在场景里面添加相机
（6）创建几何体和材质
（7）根据几何体和材质创建物体
（8）将几何体添加到场景中
（9）初始化渲染器
（10）设置渲染的尺寸大小
（11）将 webgl 渲染的 canvas 内容添加到 body
（12）使用渲染器，通过相机将场景渲染进来
const scene = new THREE.Scene()
// 创建相机对象（角度，宽高比，近端，远端）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置相机的位置（x，y，z）
camera.position.set(0, 0, 10)
// 场景里面添加相机
scene.add(camera)
// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
// 创建材质
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00})
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 将几何体添加到场景当中
scene.add(cube)
// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer)
// 将 webgl 渲染的 canvas 内容添加到 body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera)
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 使用控制器查看3d物体
......
// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera)
// 创建轨道控制器 （domElement->用于事件监听的 HTML元素）
const controls = new OrbitControls(camera, renderer.domElement)
// 渲染函数
function render() {
renderer.render(scene, camera)
// 请求动画帧-下一帧的时候重新渲染
requestAnimationFrame(render)
render()
