three.js 物体、路径与移动，3D效果
在二维实现的基础上，替换路径数组，生成3维曲线，设置潜艇的3维坐标延路径移动
import * as THREE from 'three'; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { DragControls } from "three/examples/jsm/controls/DragControls"; import { Pieces } from "../@share/pieces"; /** * 3d 动画测试，路径与移动 - 空间中 * https://threejs.org/docs/index.html#api/zh/extras/curves/CatmullRomCurve3 - 三维样条曲线 * https://threejs.org/docs/index.html#api/zh/extras/core/Curve - 核心 */ export class ThreePathAndMove3d { constructor(canvasId) { this.work(canvasId); } work(canvasId) { // 创建 3d 场景 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x9e9e9e); // 渲染器 const renderer = this.addRenderer(); // 创建相机 const camera = this.makeCamera(); // .multiplyScalar() 矩阵的每个元素乘以参数。 camera.position.set(-60, 20, 150).multiplyScalar(3); // 朝向 camera.lookAt(0, 0, 0); // 控制相机 const controls = new OrbitControls(camera, renderer.domElement); controls.update(); // 初始化灯光 // 方向光 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 20, 0) scene.add(light); // 方向光 const light2 = new THREE.DirectionalLight(0xffffff, 1); light2.position.set(1, 2, 4); scene.add(light2); // 添加物体 const boat = this.makeObject(scene); // 绘制路径 const len = 300; const curve = this.addPath(scene, len / 2); console.log(curve); const boatPosition = new THREE.Vector3(); const boatTarget = new THREE.Vector3(); function render(time) { time *= 0.0005; const boatTime = time * 0.05; curve.getPointAt(boatTime % 1, boatPosition); // 获取路径前一点坐标，用于头部向前 curve.getPointAt((boatTime + 0.01) % 1, boatTarget); // 位移 boat.position.set(boatPosition.x, boatPosition.y, boatPosition.z); boat.lookAt(boatTarget.x, boatTarget.y, boatTarget.z); // 加载渲染器 renderer.render(scene, camera) // 开始动画 requestAnimationFrame(render) } // 开始渲染 requestAnimationFrame(render); } /** * 创建相机公用方法 * */ makeCamera(fov = 40) { const aspect = 2 // the canvas default const zNear = 0.1 const zFar = 1000 return new THREE.PerspectiveCamera(fov, aspect, zNear, zFar) } /** * 添加平面 */ addArea(scene, len) { const groundGeometry = new THREE.PlaneGeometry(len, len); const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x23ADE5 }); const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial); groundMesh.rotation.x = Math.PI * -0.5; scene.add(groundMesh); } /** * 添加渲染器 */ addRenderer() { let renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); // 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。 document.body.appendChild(renderer.domElement); return renderer; } /** * 添加船只 */ makeObject(scene) { const boat = new THREE.Object3D(); boat.position.y = -1; scene.add(boat); const bodyRadius = 2; const bodyLength = 10; // 舰体 const bodyGeometry = new THREE.CapsuleGeometry(bodyRadius, bodyLength, 4, 32); const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x6688aa }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.rotation.x = Math.PI * 0.5; boat.add(bodyMesh); const doorRadius = bodyRadius / 7 * 5; const doorHeight = 2; // 舰桥 const doorGeometry = new THREE.CylinderGeometry(doorRadius, doorRadius, doorHeight, 36); const doorMesh = new THREE.Mesh(doorGeometry, bodyMaterial); doorMesh.position.set(0, 2, -2); boat.add(doorMesh); const glassRadius = doorRadius / 7; const glassHeight = bodyLength / 2; // 潜望镜 const glassGeometry = new THREE.CylinderGeometry(glassRadius, glassRadius, glassHeight, 36); const glassMesh = new THREE.Mesh(glassGeometry, bodyMaterial); glassMesh.position.set(0, 2, -2.9); boat.add(glassMesh); const swingWidth = 5; const swingHeight = doorHeight / 20; // 舰桥翼 const swingGeometry = new THREE.BoxGeometry(swingWidth, swingHeight, 1, 36); const swingMesh = new THREE.Mesh(swingGeometry, bodyMaterial); swingMesh.position.set(0, 2.5, -2); boat.add(swingMesh); const swingTailHeight = doorHeight / 8; const swingTailWidth = 4; // 尾翼 const swingTail1Geometry = new THREE.BoxGeometry(swingTailWidth, swingTailHeight, 2, 36); const swingT1Mesh = new THREE.Mesh(swingTail1Geometry, bodyMaterial); swingT1Mesh.position.set(0, 0, -6); boat.add(swingT1Mesh); const swingTail2Geometry = new THREE.BoxGeometry(swingTailHeight, swingTailWidth, 2, 36); const swingT2Mesh = new THREE.Mesh(swingTail2Geometry, bodyMaterial); swingT2Mesh.position.set(0, 0, -6); boat.add(swingT2Mesh); return boat; } /** * 添加路径 */ addPath(scene, num) { let max = num; let min = -num; let pointArr = []; // 随机点 for (let i = 0; i < 10; i++) { let point = Pieces.getRandomNumberByCount(3, max, 0, min); pointArr.push(new THREE.Vector3(point[0], point[1], point[2])); } /** * CatmullRomCurve3 * 使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线。 * CatmullRomCurve3( points : Array, closed : Boolean, curveType : String, tension : Float ) * points – Vector3点数组 * closed – 该曲线是否闭合，默认值为false。 * curveType – 曲线的类型，默认值为centripetal。 * tension – 曲线的张力，默认为0.5。 * @type {CatmullRomCurve3} */ const curve = new THREE.CatmullRomCurve3(pointArr, true); const points = curve.getPoints(50); const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color: 0xffffff }); const splineObject = new THREE.Line(geometry, material); scene.add(splineObject); const boxHelper = new THREE.BoxHelper(splineObject); scene.add(boxHelper); return curve; } }
