本文目录

本篇将基于Threejs之模拟小球反弹基础上以及Threejs这个专栏学习过的知识点上进行小球更加真实的物理运动轨迹并且还会与鼠标进行交互的操作。

由于知识点都在上篇均有涉及本篇就不过多赘述了。

一、效果预览

可以看到我们完成鼠标点击生成小球并且小球带有阴影以及贴合现实世界的物理行为下落旋转碰撞。

二、代码实现及解析

initial-scale1.0titleDocument/titlestylehtml,body

{margin:

three/examples/jsm/controls/OrbitControls;import

THREE

远平面相机最远能看到物体);camera.position.set(0,

20);//

THREE.WebGLRenderer({antialias:

true,

设置渲染器宽高renderer.setSize(window.innerWidth,

renderer渲染器的dom元素添加到我们的HTML文档中document.body.appendChild(renderer.domElement);//

加入灯光const

);light.position.set(0,20,0);const

pointLightHelper

THREE.MeshStandardMaterial({color:

-Math.PI/2;//

添加到场景中scene.add(plane);renderer.shadowMap.enabled

true;//

设置y轴重力physicsWorld.gravity.set(0,

-9.82,

CANNON.Material(groundMaterial);const

sphereMaterial

CANNON.Material(sphereMaterial);const

contactMaterial

CANNON.ContactMaterial(groundMaterial,

sphereMaterial,

弹性});physicsWorld.addContactMaterial(contactMaterial);//

创建物理地面const

groundMaterial,});groundBody.quaternion.setFromEuler(-Math.PI

0);

将地面绕着x轴旋转90度成为真正的地面physicsWorld.addBody(groundBody);//

加载贴图const

loader.load(../images/rabbit.png)//

多个小球创建小球数组let

position小球生成的位置direction小球超哪发射位置const

radius

true;geometry.position.copy(position);scene.add(geometry);//

创建物理小球刚体const

CANNON.Sphere(radius);sphereBody.position.copy(position);sphereBody.addShape(sphereShape);

刚体添加形状也可这种写法sphereBody.applyLocalForce(direction.scale(600),

CANNON.Vec3(0,

在刚体的局部坐标系中的指定点上施加一个力physicsWorld.addBody(sphereBody);spheresArr.push({geometry,sphereBody})}renderer.domElement.addEventListener(mouseup,

(event)

THREE.Raycaster();raycaster.setFromCamera(mouse,camera);const

pos

THREE.Vector3();pos.copy(raycaster.ray.direction);

鼠标点击的射线方向pos.add(raycaster.ray.origin);

射线原点const

CANNON.Vec3(raycaster.ray.direction.x,raycaster.ray.direction.y,raycaster.ray.direction.z,)createSphere({x:pos.x,

y:pos.y,

因为这是实时更新的所以需要放到渲染循环动画animate函数中physicsWorld.step(1/60);spheresArr.forEach(({geometry,sphereBody})

{geometry.position.copy(sphereBody.position);

将物理刚体小球的位置赋值给threejs的小球geometry.quaternion.copy(sphereBody.quaternion);

控制器const

开启阻尼惯性默认值为0.05control.enableDamping

true;//

在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环在大多数屏幕上刷新率一般是60次/秒requestAnimationFrame(animate);updatePhysic();//

更新控制器。

如果没在动画里加上那必须在摄像机的变换发生任何手动改变后调用control.update();renderer.render(scene,

camera);};//

THREE.MeshStandardMaterial({color:

texture})。

并且打开阴影开光renderer.shadowMap.enabled

true;

true;动态交互事件renderer.domElement.addEventListener(mouseup,

callback)这是鼠标交互的关键。

每次点击都动态生成可视小球及刚体小球并且都放到数组里

spheresArr.push({geometry,sphereBody})获取鼠标点击时的二维向量

const

THREE.Raycaster();raycaster.setFromCamera(mouse,camera);const

pos

THREE.Vector3();pos.copy(raycaster.ray.direction);

鼠标点击的射线方向pos.add(raycaster.ray.origin);

射线原点const

CANNON.Vec3(raycaster.ray.direction.x,raycaster.ray.direction.y,raycaster.ray.direction.z,)

在学习的路上如果你觉得本文对你有所帮助的话那就请关注点赞评论三连吧谢谢你的肯定是我写博的另一个支持。