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-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
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>