物体绘制三要素

• 几何体
• 材质
• 网格模型

创建示例

// 结构
const geometry = new THREE.CylinderGeometry(1, 1, 1, 3);
// 材质
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 组合
const cylinder = new THREE.Mesh(geometry, material);
// 位置
cylinder.position.set(-2,0,2)
// 加入场景
scene.add(cylinder);

自定义几何体

如果需要复杂的几何体，可以使用BufferGeometry进行绘制

材质

Material

贴图操作

// 结构
const geometry = new THREE.BoxGeometry(1, 1, 1, 3);
// 材质
const loader = new THREE.TextureLoader()
const texture = loader.load('../img/01.jpg')
const material = new THREE.MeshBasicMaterial({
  map: texture
});
// 组合
const cylinder = new THREE.Mesh(geometry, material);
// 位置
// 加入场景
scene.add(cylinder);

高光

有些材质不支持

// 结构
const geometry = new THREE.SphereGeometry(3, 30, 30);
// 材质
const loader = new THREE.TextureLoader()
const texture = loader.load('../img/01.jpg')
const material = new THREE.MeshStandardMaterial({
  // color: 0xffffff,
  map: texture,
  roughness: 0.5,
  metalness: 0.5
});
// 组合
const cylinder = new THREE.Mesh(geometry, material);
// 加入场景
scene.add(cylinder);

阴影

需要渲染器，物体，关照开启阴影支持

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 创建场景
const scene = new THREE.Scene()

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(2, 9, 10)
camera.lookAt(0, 0, 0) // 观察方向

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
// 开启阴影
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

// 平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2
// 被投射物体阴影
plane.receiveShadow = true
scene.add(plane);

// 物体
const geometry = new THREE.SphereGeometry(1, 30, 30);
const loader = new THREE.TextureLoader()
const texture = loader.load('../img/01.jpg')
const material = new THREE.MeshStandardMaterial({
  // color: 0xffffff,
  map: texture,
  roughness: 0.5,
  metalness: 0.5
});
const cylinder = new THREE.Mesh(geometry, material);
cylinder.position.set(0, 2, 0)
// 开启阴影
cylinder.castShadow = true
// 加入场景
scene.add(cylinder);


// 日光照
const light = new THREE.PointLight(0xffffff, 20);
light.position.set(4, 4, 4);
// 开启阴影
light.castShadow = true
scene.add(light);
// 光源辅助
const pointLightHelper = new THREE.PointLightHelper(light, 1);
scene.add(pointLightHelper);

// 平行光
// const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
// directionalLight.position.set(2, 3, 2)
// // 阴影抗锯齿
// directionalLight.shadow.mapSize.width = 2048
// directionalLight.shadow.mapSize.height = 2048
// // 开启阴影
// directionalLight.castShadow = true
// scene.add(directionalLight);
// // 光源辅助
// const helper = new THREE.DirectionalLightHelper(directionalLight, 1);
// scene.add(helper);

const lightNor = new THREE.AmbientLight(0xffffff, 0.2); // 柔和的白光
scene.add(lightNor);


// 网格辅助
const gridHelper = new THREE.GridHelper(10, 10, 0xff0000);
scene.add(gridHelper);

const controls = new OrbitControls(camera, renderer.domElement)
// 是否开启惯性
controls.enableDamping = true
// 阻尼惯性有多大
controls.dampingFactor = 0.05
// 是否自动旋转
controls.autoRotate = false
// 围绕目标旋转的速度
controls.autoRotateSpeed = 1


let angle = 0
function animate() {
  angle += 0.005
  light.position.x = 4 * Math.cos(angle)
  light.position.z = 4 * Math.sin(angle)
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
  controls.update()
}

animate()

加载3D模型

const gLTFLoader = new GLTFLoader()
gLTFLoader.load('../img/Lantern.gltf', function (su) {
  su.scene.position.set(3,2,3)
  scene.add(su.scene)
})