? ?
? ?
? ? ? ? html, body {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ? ? ? var world;
? ? ? ? var fixedTimeStep = 1 / 60;
? ? ? ? var maxSubSteps = 3;
? ? ? ? var massBall = 5, massCan = 10;
? ? ? ? var lastTime;
? ? ? ? var camera, scene, renderer, controls;
? ? ? ? var geometry, material, materialPlane, mesh;
? ? ? ? var container, camera, scene, renderer;
? ? ? ? const ballRad = 2/2
? ? ? ? const canRad = 2/2
? ? ? ? const canHeight = 2*2
? ? ? ? var balls = []
? ? ? ? var ballControls;
? ? ? ? // To be synced
? ? ? ? var physics = new CannonHelper(0,-10,0);? physics.world.allowSleep = true;
? ? ? ? initThree();
? ? ? ? var cannonDebugRenderer = new THREE.CannonDebugRenderer(scene, world);
? ? ? ? initScene();
? ? ? ? initEvent();
? ? ? ? controls = new THREE.OrbitControls( camera, renderer.domElement );
? ? ? ? animate();
? ? ? ? function pileUp(xCnt, yCnt, zPos){
? ? ? ? ? ? var interval = 2*canRad/3;
? ? ? ? ? ? for (var level = 0; level < yCnt; ++level){
? ? ? ? ? ? ? ? var xc = xCnt - level;
? ? ? ? ? ? ? ? var startX = -((xc - 1)*interval + (xc*2*canRad))/2 + canRad;
? ? ? ? ? ? ? ? for (var i = 0; i < xc; ++i){
? ? ? ? ? ? ? ? ? ? var can = new THREE.Mesh(new THREE.CylinderGeometry(canRad,canRad,canHeight,20,20,false), material);
? ? ? ? ? ? ? ? ? ? can.body = physics.addBody( can, massCan );? scene.add(can);
? ? ? ? ? ? ? ? ? ? can.body.position.set(startX + i*(interval + 2*canRad) , canHeight/2 + level*canHeight, zPos);? ?
? ? ? ? ? ? ? ? ? ? ballControls.arrTarget.push(can);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function initScene(){
? ? ? ? ? ? ballControls = new BallControls(camera, renderer.domElement);
? ? ? ? ? ? //far plane
? ? ? ? ? ? var wall = new THREE.Mesh( new THREE.PlaneGeometry( 12, 12, 1, 1 ),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? new THREE.MeshLambertMaterial( { color: 0xf8f8f8 } ) );
? ? ? ? ? ? wall.position.set(0, 6, -15)
? ? ? ? ? ? scene.add(wall);
? ? ? ? ? ? ballControls.arrTarget.push(wall);
? ? ? ? ? ? //ground
? ? ? ? ? ? var ground = new THREE.Mesh( new THREE.PlaneGeometry( 12, 16, 1, 1 ), materialPlane );
? ? ? ? ? ? ground.quaternion.setFromAxisAngle(new THREE.Vector3(1,0,0), -Math.PI / 2);
? ? ? ? ? ? ground.body = physics.addBody( ground, 0 );? scene.add(ground);
? ? ? ? ? ? ground.body.position.set(0,0,0,)
? ? ? ? ? ? pileUp(3,3,-5)
? ? ? ? ? ? pileUp(4,4,-7)
? ? ? ? ? ? var ball = new THREE.Mesh(new THREE.SphereGeometry(ballRad, 20, 20), material);
? ? ? ? ? ? ball.body = physics.addBody( ball, massBall );? scene.add(ball);
? ? ? ? ? ? ball.body.position.set(0, ballRad ,5);
? ? ? ? ? ? ballControls.arrBall.push(ball);
? ? ? ? }
? ? ? ? function initEvent(){
? ? ? ? ? ? ballControls.addEventListener('selectBall', function(e){
? ? ? ? ? ? ? ? controls.enabled = false;
? ? ? ? ? ? })
? ? ? ? ? ? ballControls.addEventListener('throwBall', function(e){
? ? ? ? ? ? ? ? controls.enabled = true;
? ? ? ? ? ? ? ? console.log(e);
? ? ? ? ? ? ? ? var ball_body = e.ball.body;
? ? ? ? ? ? ? ? var to = e.to.sub(e.ball.position).normalize()
? ? ? ? ? ? ? ? to.divideScalar(e.delta).multiplyScalar (100)
? ? ? ? ? ? ? ? ball_body.applyLocalImpulse(to, new CANNON.Vec3(0,0,0));
? ? ? ? ? ? ? ? ball_body.wakeUp();
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? function initThree() {
? ? ? ? ? ? container = document.createElement( 'div' );
? ? ? ? ? ? document.body.appendChild( container );
? ? ? ? ? ? // scene
? ? ? ? ? ? scene = new THREE.Scene();
? ? ? ? ? ? scene.fog = new THREE.Fog( 0xffffff, 500, 10000 );
? ? ? ? ? ? // camera
? ? ? ? ? ? camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
? ? ? ? ? ? camera.position.set(0, 0.72*10, 6.36*10);
? ? ? ? ? ? camera.up.set(0,1,0);
? ? ? ? ? ? camera.lookAt(new THREE.Vector3(0,0,0));
? ? ? ? ? ? scene.add(camera);
? ? ? ? ? ? material = new THREE.MeshLambertMaterial( { color: 0x777777 } );
? ? ? ? ? ? materialPlane = new THREE.MeshLambertMaterial( { color: 0xf0f0f0 } );
? ? ? ? ? ? // lights
? ? ? ? ? ? scene.add( new THREE.AmbientLight( 0x111111 ) );
? ? ? ? ? ? var light = new THREE.DirectionalLight( 0xffffff, 1.75 );
? ? ? ? ? ? var d = 20;
? ? ? ? ? ? light.position.set( 40, 20, 30 );
? ? ? ? ? ? scene.add( light );
? ? ? ? ? ? renderer = new THREE.WebGLRenderer( { antialias: true } );
? ? ? ? ? ? renderer.setSize( window.innerWidth, window.innerHeight );
? ? ? ? ? ? renderer.setClearColor( scene.fog.color );
? ? ? ? ? ? var axesHelper = new THREE.AxesHelper( 5 );? scene.add( axesHelper );
? ? ? ? ? ? container.appendChild( renderer.domElement );
? ? ? ? }
? ? ? ? function animate(time) {
? ? ? ? ? ? requestAnimationFrame( animate );
? ? ? ? ? ? if(time && lastTime){
? ? ? ? ? ? ? ? var dt = time - lastTime;
? ? ? ? ? ? ? ? physics.update(dt / 1000, maxSubSteps);
? ? ? ? ? ? }
? ? ? ? ? ? // cannonDebugRenderer.update();
? ? ? ? ? ? controls.update();
? ? ? ? ? ? renderer.render(scene, camera);
? ? ? ? ? ? lastTime = time;
? ? ? ? }
