threejs

1.threejs-简易卡车

<template>
  <!-- car -->
  <div>运动的车子</div>
</template>

<script setup>
import * as THREE from "three";
import Stat from "three/examples/jsm/libs/stats.module";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { color } from "three/examples/jsm/nodes/Nodes.js";

const w = window.innerWidth;
const h = window.innerHeight;

const stat = new Stat();

// scene
const scene = new THREE.Scene();

// objects
// 整个汽车car - group
const car = new THREE.Group();
// 车身body- group
const body = new THREE.Group();
// 车底下的靶子
// const g = new THREE.BoxGeometry(1,2,0.5);
// const m = new THREE.MeshNormalMaterial();
// const bodyCube1 = new THREE.Mesh(g,m);
// 使用的材质-m
const m = new THREE.MeshNormalMaterial();
const bodyCube1 = new THREE.Mesh(new THREE.BoxGeometry(1, 2, 0.5), m);
// 代表一个人
const bodyCube2 = new THREE.Mesh(
  new THREE.BoxGeometry(0.5, 0.5, 0.5),
  new THREE.MeshBasicMaterial()
);
bodyCube2.position.z = 0.5;
// 因为他是车子的一部分,将其添加到车子中
body.add(bodyCube1);
body.add(bodyCube2);
car.add(body);

// 轮子1 - group
const wheelGroup1 = new THREE.Group();
const wheel1 = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.7, 0.7), m);
wheelGroup1.position.set(-0.7, 0.6, 0);
wheelGroup1.add(wheel1);
car.add(wheelGroup1);
// 轮子2 - group
const wheelGroup2 = new THREE.Group();
const wheel2 = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.7, 0.7), m);
wheelGroup2.position.set(0.7, 0.6, 0);
wheelGroup2.add(wheel2);
car.add(wheelGroup2);

// 轮子3 - group - clone()直接clone过来使用
const wheelGroup3 = wheelGroup1.clone()
wheelGroup3.position.set(-0.7, -0.6, 0)
car.add(wheelGroup3);
// 轮子4 - group - clone()直接clone过来使用
const wheelGroup4 = wheelGroup1.clone()
wheelGroup4.position.set(0.7, -0.6, 0)
car.add(wheelGroup4);

// 定义轮胎 - group
const circle = new THREE.Group();

let n =25;
for(let i = 0; i<n; i++){
  let r = 0.5;
  const geometry = new THREE.BoxGeometry(0.1,0.1,0.2)
  const mesh = new THREE.Mesh(geometry, m )
  mesh.position.x = r * Math.cos(Math.PI * 2 / n + i) //π的平方除以n再加上i
  mesh.position.y = r * Math.sin(Math.PI * 2 / n + i) //π的平方除以n再加上i
  circle.add(mesh)
}
// 给轮胎立起来
circle.rotation.y = -0.5 * Math.PI;
// 将轮胎添加到轮子上,并随着轮子动起来
wheelGroup1.add(circle);
wheelGroup2.add(circle.clone());
wheelGroup3.add(circle.clone());
wheelGroup4.add(circle.clone());



scene.add(car);

// camera
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100);
camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);

// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.append(renderer.domElement);
document.body.append(stat.dom);

const orbitControls = new OrbitControls(camera, renderer.domElement);

// 定时刷新
const clock = new THREE.Clock();
animate();
function animate() {
  const time = clock.getElapsedTime();
  // 车子动起来
  // car.position.y = Math.sin(time);  //不能解决轮子方向
  car.position.y = time % 4 - 2;
  // 轮子沿着x轴旋转
  wheelGroup1.rotation.x = -time;
  wheelGroup2.rotation.x = -time;
  wheelGroup3.rotation.x = -time;
  wheelGroup4.rotation.x = -time;

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  stat.update();
  orbitControls.update();
}
</script>

<style></style>