总体思路:
1. 创建场景
2. 创建物体(指定几何体、材质)
3. 把物体加入场景
4. 创建相机(指定机位及拍摄对象)
5. 创建渲染器(指定画布大小,渲染场景和相机)
// 1. 创建场景
const scene = new THREE.Scene();
// 2.创建物体(指定几何体、材质)
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({
color: '#f66'
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 10, 0);
// 3. 把物体放入场景
scene.add(mesh);
// --------------------
// 4. 创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.set(200, 200, 200);
camera.lookAt(mesh.position);
// --------------------
// 5. 创建渲染器(指定画布大小, 渲染场景、相机)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
效果图:
几何体:(Geometry)
BoxGeometry 长方体
GylinderGeometry 圆柱体
ConeGeometry 圆锥体
SphereGeometry 球体
PlaneGeometry 矩形平面
CircleGeometry 圆平面
材质:(Material)
MeshBasicMaterial 网格基础材质
MeshLambertMaterial 网格漫反射材质
MeshPhongMaterial 网格高光材质
MeshStandardMaterial 网格物理材质
MeshPhysicalMaterial 网格物理材质
PointMaterial 点材质
LineBasicMaterial 线基础材质
SpriteMaterial 精灵材质
相关库:
three.js:
https://cdn.bootcss.com/three.js/r83/three.js
OrbitControls.js:
https://unpkg.com/three-orbitcontrols@2.110.3/OrbitControls.js