My Blog

ThreeJS: Creare un solido e modficare il punto di vista con il mouse

by lupok on mercoledì 20 novembre 2013 10:09
Come creare un cubo mediante ThreeJS, e modificare il punto di vista attrevrso movimenti del mouse:


   

 

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

DOCTYPE html>
<html lang="en">
<head>
   <title>My Example 4title>
   <meta charset="utf-8">
   <style>
      body
      {
         font-familyMonospace;
         background-color#f0f0f0;
         margin0px;
         overflowhidden;
      }
   style>
head>
<body>
   <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js">script>
   <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js">script>
   <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/renderers/SoftwareRenderer.js">script>
   <script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/libs/stats.min.js">script>
   <script>
      var container;
      var camera, controls, scene, renderer;
      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 - software renderer
drag to change the point of view'
</a href="http:></a href="http:>
;          container.appendChild(info);          camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);          camera.position.z = 600;          controls = new THREE.TrackballControls(camera);          scene = new THREE.Scene();          var geometry = new THREE.CubeGeometry(200, 200, 200);          for (var i = 0; i < geometry.faces.length; i += 2) {             var hex = Math.random() * 0xffffff;             geometry.faces[i].color.setHex(hex);             geometry.faces[i + 1].color.setHex(hex);          }          cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors }));          scene.add(cube);          if (window.WebGLRenderingContext)             renderer = new THREE.WebGLRenderer({ antialias: true });          else             renderer = new THREE.SoftwareRenderer();          renderer.setClearColor(0xffffff, 1);          renderer.setSize(window.innerWidth, window.innerHeight);          container.appendChild(renderer.domElement);          window.addEventListener('resize', onWindowResize, false);       }       function onWindowResize() {          camera.aspect = window.innerWidth / window.innerHeight;          camera.updateProjectionMatrix();          renderer.setSize(window.innerWidth, window.innerHeight);       }       function animate() {          requestAnimationFrame(animate);          render();       }       function render() {          controls.update();          renderer.render(scene, camera);       }    script> body> html>

Blogs Parent Separator My Blog
Author
lupok

My Blog

Tags