Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript" src="js/three.js"></script>
- <script type="text/javascript" src="js/TrackballControls.js"></script>
- <script type="text/javascript" src="js/physi.js"></script>
- <script>
- 'use strict';
- window.onload = function() {
- var renderer, scene, camera, ground, box, sphere, ambient_light, sun_light, controls;
- var angle = 0;
- var clock = new THREE.Clock();
- Physijs.scripts.worker = 'js/physijs_worker.js';
- Physijs.scripts.ammo = 'ammo.js';
- init();
- render();
- function init(){
- // Create renderer and add it to the page
- renderer = new THREE.WebGLRenderer({ antialias: true });
- renderer.setSize( window.innerWidth, window.innerHeight );
- renderer.setClearColor( 0xffffff );
- renderer.shadowMapEnabled = true;
- document.body.appendChild( renderer.domElement );
- // Create a scene to hold our awesome 3D world
- scene = new Physijs.Scene();
- /*** 3D WORLD ***/
- // Objects
- ground = new Physijs.BoxMesh(
- new THREE.BoxGeometry(50, 1, 50),
- new THREE.MeshLambertMaterial({ color: 0x33CC33 }),
- 0 // mass
- );
- ground.receiveShadow = true;
- scene.add( ground );
- box = new Physijs.BoxMesh(
- new THREE.BoxGeometry( 10, 10, 10 ),
- new THREE.MeshLambertMaterial({ color: 0xDD3344 })
- );
- box.position.y = 25;
- box.castShadow = true;
- scene.add( box );
- sphere = new THREE.Mesh(
- new THREE.SphereGeometry( 3, 32, 32 ),
- new THREE.MeshBasicMaterial({ color: 0xFFBB00 })
- );
- sphere.position.set( 1, 15.5, 5 );
- scene.add( sphere );
- // Light
- ambient_light = new THREE.AmbientLight( 0x333333 );
- scene.add( ambient_light );
- sun_light = new THREE.DirectionalLight( 0xBBBBBB );
- sun_light.position.set( 1, 15.5, 5 );
- sun_light.castShadow = true;
- sun_light.shadowCameraNear = 1;
- sun_light.shadowCameraFar = 100;
- sun_light.shadowCameraLeft = -50;
- sun_light.shadowCameraRight = 50;
- sun_light.shadowCameraTop = -50;
- sun_light.shadowCameraBottom = 50;
- sun_light.shadowBias = -.01;
- scene.add( sun_light );
- // Create a camera
- camera = new THREE.PerspectiveCamera(
- 45, // FOV
- window.innerWidth / window.innerHeight, // Aspect Ratio
- 1, // Near plane
- 1000 // Far plane
- );
- camera.position.set( 30, 30, 30 ); // Position camera
- camera.lookAt( box.position ); // Look at the scene origin
- /* This didn't work :(
- var cameraMesh = new Physijs.BoxMesh(
- new THREE.BoxGeometry( 2, 2, 2 ),
- new THREE.MeshLambertMaterial({ color: 0xFF0000 })
- )
- cameraMesh.mass = 0;
- cameraMesh.add( camera ); */
- window.addEventListener( 'resize', onWindowResize, false );
- controls = new THREE.TrackballControls( camera );
- controls.rotateSpeed = 4.0;
- controls.panSpeed = 0.5;
- //controls.addEventListener('change', render);
- }
- function render() {
- // use requestAnimationFrame to create a render loop
- angle += .007;
- var oscillateZ = Math.sin(angle * (Math.PI*4));
- var oscillateX = -Math.cos(angle * (Math.PI*4));
- //console.log(oscillateZ);
- sphere.position.setZ( sphere.position.z + oscillateZ );
- sphere.position.setX( sphere.position.x + oscillateX );
- sun_light.position.setZ( sun_light.position.z + oscillateZ );
- sun_light.position.setX( sun_light.position.x + oscillateX );
- //camera.position.x = box.position.x + 60 * Math.cos( (Math.PI*4) * angle );
- //camera.position.z = box.position.z + 60 * Math.sin( (Math.PI*4) * angle );
- //camera.lookAt( box.position );
- scene.simulate();
- requestAnimationFrame( render );
- controls.update();
- renderer.render( scene, camera );
- }
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- }
- };
- </script>
- </head>
- <body></body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement