ThreeJS + CannonJS
程序员文章站
2022-06-10 23:49:49
...
更多有趣示例 尽在小红砖社区
示例
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ThreeJS + CannonJS Physics Test</title>
<style>
body {
background-color: #87CEEB;
margin: 0;
padding: 0;
overflow: hidden:
}
</style>
</head>
<body>
</body>
</html>
JS
/**
* @author bwiltysch / http://bojanwilytsch.com/
*/
var renderer, scene, camera;
var mesh;
// Cannon JS + Three JS
var world, sphereBody;
var init = function(){
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0,50, 120);
camera.rotation.x = -0.2;
var geometry = new THREE.SphereGeometry( 1 );
var material = new THREE.MeshLambertMaterial({ color: 0x87CEEB });
mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
world = new CANNON.World();
world.broadphase = new CANNON.NaiveBroadphase();
world.gravity.set( 0, -20, 0);
var plane = new THREE.PlaneGeometry(200, 200, 32, 32 );
for ( i = 0; i < plane.vertices.length; i++){
plane.vertices[i].z = Math.random() * 4 + 2;
}
// Reworking for THREEJS r72+
var vertices = []
var indices = [];
// Restructure vertices
for (var j = 0; j < plane.vertices.length; ++j)
{
vertices.push(plane.vertices[j].x, plane.vertices[j].y, plane.vertices[j].z);
}
// Get get indices over faces
for (j = 0; j < plane.faces.length; ++j)
{
indices.push(plane.faces[j].a, plane.faces[j].b, plane.faces[j].c);
}
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0xf2f2f2 });
var planeMesh = new THREE.Mesh( plane, planeMaterial );
planeMesh.castShadow = true;
planeMesh.receiveShadow = true;
planeMesh.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
scene.add( planeMesh );
var planeShape = new CANNON.Trimesh(vertices, indices);
var planeBody = new CANNON.Body({ mass:0 , shape: planeShape});
planeBody.position.copy(planeMesh.position);
planeBody.quaternion.copy(planeMesh.quaternion);
world.add( planeBody );
var sphereShape = new CANNON.Sphere( 1 );
var sphereBody = new CANNON.Body({ mass: 0.2, shape: sphereShape });
sphereBody.position.set(0, 20, 0);
world.add( sphereBody );
body = sphereBody;
var spotLight = new THREE.SpotLight({color: 0xF3F3F3});
spotLight.intensity = 0.8;
spotLight.target.position.set(0,0,0);
spotLight.position.set(20,120,0);
if (true) {
spotLight.castShadow = true;
spotLight.shadowCameraNear = 1;
spotLight.shadowCameraFar = 200;
spotLight.shadowCameraFov = 75;
spotLight.shadowMapDarkness = 0.4;
spotLight.shadowMapWidth = 2 * 512;
spotLight.shadowMapHeight = 2 * 512;
}
scene.add(spotLight);
var ambientLight = new THREE.AmbientLight( 0x010101 );
scene.add(ambientLight);
};
var animate = function(){
var time = Date.now();
requestAnimationFrame( animate );
world.step( 1 / 60 );
mesh.position.copy( body.position );
mesh.quaternion.copy ( body.quaternion);
body.velocity.x += 0.05;
renderer.render( scene, camera );
};
init();
animate();