three.js cannon.js 物理效果演示实例

import CannonPhysics for three.js

webgl, three, cannon, physics

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2601
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div id="info">
  <a href="#" target="_blank" rel="noopener">three.js</a> physics - cannon.js instancing
</div>

import * as THREE from '//techbrood.com/threejs/build/three.module.js';
  import { OrbitControls } from '//techbrood.com/threejs/examples/jsm/controls/OrbitControls.js';
  import { CannonPhysics } from '//techbrood.com/threejs/examples/jsm/physics/CannonPhysics.js';
  import Stats from '//techbrood.com/threejs/examples/jsm/libs/stats.module.js';

var camera, scene, renderer, stats;
  var physics, position;

init();
  animate();

function init() {

physics = new CannonPhysics();
      position = new THREE.Vector3();

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
      camera.position.set( - 1, 1, 2 );
      camera.lookAt( 0, 0, 0 );

scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x666666 );

var light = new THREE.HemisphereLight();
      light.intensity = 0.35;
      scene.add( light );

var light = new THREE.DirectionalLight();
      light.position.set( 5, 5, 5 );
      light.castShadow = true;
      light.shadow.camera.zoom = 2;
      scene.add( light );

var plane = new THREE.Mesh(
          new THREE.PlaneBufferGeometry( 5, 5 ),
          new THREE.ShadowMaterial( { color: 0x111111 } )
      );
      plane.rotation.x = - Math.PI / 2;
      plane.receiveShadow = true;
      scene.add( plane );
      physics.addMesh( plane );

/*
      function getSize() {
          return Math.random() * 0.1 + 0.05;
      }
      */

var geometry = new THREE.BoxBufferGeometry( 0.1, 0.1, 0.1 );
      var material = new THREE.MeshLambertMaterial( /*{ vertexColors: true }*/ );
      var mesh = new THREE.InstancedMesh( geometry, material, 200 );
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      scene.add( mesh );

var matrix = new THREE.Matrix4();

for ( var i = 0; i < mesh.count; i ++ ) {

matrix.setPosition( Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5 );
          mesh.setMatrixAt( i, matrix );

}

/*
      var instanceColors = [];
      for ( var i = 0; i < mesh.count; i ++ ) {
          instanceColors.push( Math.random(), Math.random(), Math.random() );
      }
      mesh.geometry.setAttribute( 'instanceColor', new THREE.InstancedBufferAttribute( new Float32Array( instanceColors ), 3 ) );
      */

physics.addMesh( mesh, 1 );

renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.shadowMap.enabled = true;
      renderer.outputEncoding = THREE.sRGBEncoding;
      document.body.appendChild( renderer.domElement );

stats = new Stats();
      document.body.appendChild( stats.dom );

new OrbitControls( camera, renderer.domElement );

}

function animate() {

requestAnimationFrame( animate );

var mesh = scene.children[ 3 ];
      var index = Math.floor( Math.random() * mesh.count );

position.set( 0, Math.random() * 2, 0 );
      physics.setMeshPosition( mesh, position, index );

renderer.render( scene, camera );

stats.update();

}
</script>

import CannonPhysics for three.js

webgl, three, cannon, physics

编辑器支持Emmet

快捷键

import CannonPhysics for three.js

webgl, three, cannon, physics

three.js实例化几何体（InstancedBufferGeometry）代码示例

three.js使用havok物理引擎代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：