My Blog

ThreeJS: Application 1

by lupok on mercoledì 20 novembre 2013 17:43
Come creare un cubo ed piano con una texture in cui visualizzare l'ombra in funzione della luce presente nella scena mediante ThreeJS.

doctype html>
<html lang="en">
<head>
   <title>My Example 6title>
   <meta charset="utf-8">
   <style>
      body
      {
         font-familyMonospace;
         background-color#f0f0f0;
         margin0px;
         overflowhidden;
      }
   style>
head>
<body>
   <script src="./mrdoob-three.js-a3ba076/build/three.min.js">script>
   <script src="./mrdoob-three.js-a3ba076//examples/js/controls/OrbitControls.js">script>
   <script src="./mrdoob-three.js-a3ba076//examples/js/renderers/SoftwareRenderer.js">script>
   <script>
      var container, scene, camera, renderer, controls;
      var cube;
      init();
      animate();
      function init() {
         container = document.createElement('div');
         document.body.appendChild(container);
         var info = document.createElement('div');
         info.style.position = 'absolute';
         info.style.top = '10px';
         info.style.width = '100%';
         info.style.textAlign = 'center';
         info.innerHTML = 'three.js
drag to change the point of view'
</a href="http:></a href="http:>
;          container.appendChild(info);          scene = new THREE.Scene();          camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 4000);          scene.add(camera);                    camera.position.set(-300, 415, -600);          camera.lookAt(scene.position);          if (window.WebGLRenderingContext) {             renderer = new THREE.WebGLRenderer({ antialias: true });             renderer.shadowMapEnabled = true;             renderer.shadowMapSoft = true;          } else             renderer = new THREE.CanvasRenderer();          renderer.setClearColor(0xffffff, 1);          renderer.setSize(window.innerWidth, window.innerHeight);          container.appendChild(renderer.domElement);          controls = new THREE.OrbitControls(camera, renderer.domElement);          var cubeMaterialArray = [];          cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0xff3333, transparent: true, opacity: 0.8 }));          cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0xff8800, transparent: true, opacity: 0.8 }));          cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0xffff33, transparent: true, opacity: 0.8 }));          cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0x33ff33, transparent: true, opacity: 0.8 }));          cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0x3333ff, transparent: true, opacity: 0.8 }));          cubeMaterialArray.push(new THREE.MeshBasicMaterial({ color: 0x8833ff, transparent: true, opacity: 0.8 }));          var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);                   var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);          cube = new THREE.Mesh(cubeGeometry, cubeMaterials);          cube.position.set(-100, 150, -50);          cube.castShadow = true;          scene.add(cube);          var axes = new THREE.AxisHelper(200);          scene.add(axes);          var floorTexture = new THREE.ImageUtils.loadTexture('images/desert.jpg');          var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });          var floorGeometry = new THREE.PlaneGeometry(600, 600);                    var floor = new THREE.Mesh(floorGeometry, floorMaterial);          floor.position.y = -0.5;          floor.rotation.x = Math.PI / 2;          floor.receiveShadow = true;          scene.add(floor);          var light = new THREE.DirectionalLight(0xdfebff, 1.75);          light.position.set(300, 400, 50);          light.position.multiplyScalar(1.3);          light.castShadow = true;          //light.shadowCameraVisible = true;          light.shadowMapWidth = 512;          light.shadowMapHeight = 512;          var d = 200;          light.shadowCameraLeft = -d;          light.shadowCameraRight = d;          light.shadowCameraTop = d;          light.shadowCameraBottom = -d;          light.shadowCameraFar = 1000;          light.shadowDarkness = 0.5;          scene.add(light);          scene.add(new THREE.AmbientLight(0x666666));          var skyBoxGeometry = new THREE.CubeGeometry(600, 600, 600);          var skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x9999ff, side: THREE.BackSide });          var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);          //scene.add(skyBox);          scene.fog = new THREE.FogExp2(0x9999ff, 0.00025);          window.addEventListener('resize', onWindowResize, false);       }       function animate() {          requestAnimationFrame(animate);          render();          update();       }       function update() {          controls.update();       }       function render() {          renderer.render(scene, camera);       }       function onWindowResize() {          camera.aspect = window.innerWidth / window.innerHeight;          camera.updateProjectionMatrix();          renderer.setSize(window.innerWidth, window.innerHeight);       } script> body> html>


   

 

Per modificare il punto di vista tenere premuto il tasto sinistro e muovere il mouse.

Blogs Parent Separator My Blog
Author
lupok

My Blog

Tags