threeJS-机器人展示案例

• 按基础步骤添加场景、相机、控制器、渲染函数
• 加载环境纹理，
• 加载模型
• 添加直线光

视频纹理(底部的圈用mp4的形式)

创建视频

let video = document.createElement("video")
video.src = "" /*视频路径*/
video.loop = true /*视频循环播放*/
video.muted = true /*视频静音*/
video.play() /*播放*/

创建视频纹理

let videoTexture = new THREE>VideoTexture(video)
const videoPlane = new THREE.PlaneBufferGeometry(8, 4.5)
const videoMaterial = new THREE.MeshBasicMaterial({
	map: videoTexture,
	transparent: true,
	side: THREE.DoubleSide,
	alphaMap:videoTexture, // 让黑色背景透明
})

创建物体

const videoMesh = new THREE.Mesh(videoPlane,videoMaterial)
videoMesh.position.set(0,0.2,0)
videoMesh.rotation.set(-Math.PI / 2,0,0)
scene.add(videoMesh)

镜面反射

导入库

• import { Relfector } from “three/examples/jsm/objects/Reflector”

添加反射平面

const reflectorGeometry = new THREE.PlaneBufferGeometry(100,100)
const reflectorPlane.rotation = new Reflector(reflectorGeometry, {
	textureWidth: window.innerWidth,
	textureHeight: window.innerHeight,
	color: 0xffffff,
})
reflectorPlane.rotation.x = -Math.PI / 2
scene.add(reflectorPlane)