Threejs与Connonjs实现物体碰撞

vitenode

已于 2023-08-26 21:05:38 修改

阅读量564

点赞数

文章标签：前端 Threejs

于 2023-08-26 21:02:01 首次发布

本文链接：https://blog.csdn.net/qq_37312180/article/details/132515947

版权

2023-08-26-20-45-27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <script src="./main/index.js" type="module"></script>
    <div id="ContainerID"></div>
</body>
</html>

import * as THREE from 'three';
window.THREE = THREE
import gsap from "gsap";
import * as CANNON from 'cannon-es'

// ...
/* 
**
*/
let ContainerIDDiv = document.querySelector("#ContainerID")
let width = ContainerIDDiv.getBoundingClientRect().width
let height = ContainerIDDiv.getBoundingClientRect().height
console.log(`width,height`, width, height);

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

//  2.创建并添加相机
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 0, 10) //设置相机位置
scene.add(camera)


/* 
**
*/

//加载管理器
let event = {}
event.onLoad = () => {

}
event.onProgress = (url, num, total) => {
    console.log(`url,num,total`, url, num, total, `${Math.round(num / total * 100)}%`);
}
event.onError = () => {

}
let textureManage = new THREE.LoadingManager(
    event.onLoad,
    event.onProgress,
    event.onError
)

/* 
**
*/
let ambientLight = new THREE.AmbientLight(0x404040, 1)
scene.add(ambientLight)

let spotLight = new THREE.SpotLight(0xffffff, 1)
spotLight.position.set(20, 20, 20)
scene.add(spotLight)

let directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(0, 5, 0)
directionalLight.castShadow = true
//设置阴影边缘模糊度
directionalLight.shadow.radius = 20
//设置阴影分辨率
directionalLight.shadow.mapSize.set(4096, 4096)
scene.add(directionalLight)

/* 
**
*/
// 创建物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.8, 0);
let planeGeometry = new THREE.PlaneGeometry(10,10)
let planMesh = new THREE.Mesh(
    planeGeometry,
    new THREE.MeshStandardMaterial({
        side: THREE.DoubleSide,
        // transparent:true,
        // opacity:0
    })
)
planMesh.position.set(0, -5, 0)
planMesh.rotation.x = -Math.PI / 2
planMesh.receiveShadow = true
scene.add(planMesh)
//创建物理世界地面形状
const floorShape = new CANNON.Plane()
//创建物理世界地面
const floorBody = new CANNON.Body()
floorBody.mass = 0
floorBody.position.set(0, -5, 0)
floorBody.addShape(floorShape)
world.addBody(floorBody)
floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI * 0.5)
//创建用以保存更新网格和刚体对象的数组
let cubeTextureLoader = new THREE.CubeTextureLoader(textureManage)
let envcubeTexture = cubeTextureLoader.load(
    [
        require('../assets/textures/cube/Bridge2/posx.jpg'),
        require('../assets/textures/cube/Bridge2/negx.jpg'),
        require('../assets/textures/cube/Bridge2/posy.jpg'),
        require('../assets/textures/cube/Bridge2/negy.jpg'),
        require('../assets/textures/cube/Bridge2/posz.jpg'),
        require('../assets/textures/cube/Bridge2/negz.jpg'),

    ]
)
envcubeTexture.center.set(0.5, 0.5)

const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const sphereMaterial = new THREE.MeshStandardMaterial({
    metalness: 0.3,
    roughness: 0.4,
    envMap: envcubeTexture
})
scene.background = envcubeTexture
scene.environment = envcubeTexture
//创建默认材质
const defaultMaterial = new CANNON.Material('default')
//创建默认联系材质
const defaultContactMaterial = new CANNON.ContactMaterial(
    defaultMaterial,
    defaultMaterial,
    {
        friction: 0.1,
        restitution: 0.7,
    }
)
//把默认联系材质添加到世界中
world.addContactMaterial(defaultContactMaterial)
world.broadphase = new CANNON.SAPBroadphase(world)
world.allowSleep = true
const hitSound = new Audio(require('../assets/mp3/撞击声_爱给网_aigei_com.mp3'))
//播放音效
const playHitSound = collision => {
    const impactStrength = collision.contact.getImpactVelocityAlongNormal()
    if (impactStrength > 1.5) {
        hitSound.currentTime = 0
        hitSound.play()
    }
}


const objectToUpdate = []
const createSphere = (radius, position) => {
    //Three.js 网格
    const mesh = new THREE.Mesh(
        sphereGeometry,
        sphereMaterial
    )
    mesh.scale.set(radius, radius, radius)
    mesh.castShadow = true
    mesh.position.copy(position)
    scene.add(mesh)

    //Cannon.js 刚体
    const shape = new CANNON.Sphere(radius)
    const body = new CANNON.Body({
        mass: 1,
        position: new CANNON.Vec3(0, 3, 0),
        shape,
        material: defaultMaterial,
    })
    body.position.copy(position)
    body.addEventListener('collide', playHitSound)
    world.addBody(body)

    //保存对象更新数组中
    objectToUpdate.push({
        mesh: mesh,
        body: body,
    })
}


const createBox = (width, height, depth, position) => {
    //Three.js 网格
    let boxGeometry = new THREE.BoxGeometry(1, 1, 1)
    let boxMaterial = new THREE.MeshStandardMaterial()

    const mesh = new THREE.Mesh(boxGeometry, boxMaterial)
    mesh.scale.set(width, height, depth)
    mesh.castShadow = true
    mesh.position.copy(position)
    scene.add(mesh)

    //Cannon.js 刚体
    const shape = new CANNON.Box(new CANNON.Vec3(width * 0.5, height * 0.5, depth * 0.5))
    const body = new CANNON.Body({
        mass: 1,
        position: new CANNON.Vec3(0, 3, 0),
        shape,
        material: defaultMaterial,
    })
    body.position.copy(position)
    body.addEventListener('collide', playHitSound)
    world.addBody(body)

    //保存对象更新数组中
    objectToUpdate.push({
        mesh: mesh,
        body: body,
    })
}

/* 
**
*/

/* 
**
*/



/* 
**
*/

//  4.设置渲染器并渲染场景
const renderer = new THREE.WebGL1Renderer() //初始化渲染器
renderer.shadowMap.enabled = true
renderer.setSize(width, height)  //设置渲染的尺寸大小
ContainerIDDiv.appendChild(renderer.domElement);// 将webgl渲染的内容添加到body
/* 
**
*/

// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 5.添加控制器-轨道控制器 可以使得相机围绕目标进行轨道运动  通过不断地重新渲染来实现移动视角的效果
const controls = new OrbitControls(camera, renderer.domElement);
// 10.设置控制器阻尼 更真实  需要在每一帧重新生成时调用controls.update();
controls.enableDamping = true;

/* 
**
*/
let clock = new THREE.Clock()
let oldElapsedTime = 0

function render() {//递归实现每一帧的重新渲染
    const elapsedTime = clock.getElapsedTime()
    const deltaTime = elapsedTime - oldElapsedTime
    oldElapsedTime = elapsedTime

    //Update physics world
    world.step(1 / 60, deltaTime, 3)

    // for (const object of objectToUpdate) {
    //     object.mesh.position.copy(object.body.position)
    // }
    for (const object of objectToUpdate) {
        object.mesh.position.copy(object.body.position)
        object.mesh.quaternion.copy(object.body.quaternion)
    }

    /
    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(render);


}
render();

/* 
**
*/

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

/* 
**
*/
window.addEventListener("resize", () => {
    width = ContainerIDDiv.getBoundingClientRect().width
    height = ContainerIDDiv.getBoundingClientRect().height
    camera.aspect = width / height
    camera.updateProjectionMatrix()
    renderer.setSize(width, height)
    renderer.setPixelRatio(window.devicePixelRatio)

})

/* 
**
*/

window.addEventListener("dblclick", () => {
    let fullscreen = document.fullscreenElement
    if (!fullscreen) {
        renderer.domElement.requestFullscreen()
    } else {
        document.exitFullscreen()
    }
})


/*
**
*/

//先创建对象来存储createSphere函数
//因为gui.add()第一个参数必须是一个对象，第二个参数是对象的一个属性
import * as dat from 'dat.gui';
const gui = new dat.GUI();
const debugObject = {}
debugObject.createSphere = () => {
    createSphere(
        Math.random() * 0.5,
        {
            x: (Math.random() - 0.5) * 3,
            y: 3,
            z: (Math.random() - 0.5) * 3,
        })
}
gui.add(debugObject, 'createSphere')


debugObject.createBox = () => {
    createBox(
        Math.random(),
        Math.random(),
        Math.random(),
        {
            x: (Math.random() - 0.5) * 3,
            y: 3,
            z: (Math.random() - 0.5) * 3,
        })
}

gui.add(debugObject, 'createBox')

//重置场景
debugObject.reset = () => {
    for (const object of objectToUpdate) {
        //移除刚体body
        object.body.removeEventListener('collide', playHitSound)
        world.removeBody(object.body)
        // 移除网格mesh
        scene.remove(object.mesh)
    }
}

gui.add(debugObject, 'reset')

/*
**
 */
//console.log(`CANNON`, CANNON);