欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ThreeJS + CannonJS

程序员文章站 2022-06-10 23:49:49
...

ThreeJS + CannonJS


更多有趣示例 尽在小红砖社区

示例

ThreeJS + CannonJS

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();