mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-24 20:36:00 +10:00
alteredq
b6904f3d72
In Chrome it looks more or less ok, but it has some problem in Firefox 4 (with some camera angles there are black areas around edges). Also updated Python builder scripts and examples to include this new material.
253 lines
9.0 KiB
HTML
253 lines
9.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - geometry - canvas polyfield</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #ffffff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
|
|
|
|
<script type="text/javascript" src="../src/Three.js"></script>
|
|
<script type="text/javascript" src="../src/core/Color.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector2.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector4.js"></script>
|
|
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
|
|
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vertex.js"></script>
|
|
<script type="text/javascript" src="../src/core/Face3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Face4.js"></script>
|
|
<script type="text/javascript" src="../src/core/UV.js"></script>
|
|
<script type="text/javascript" src="../src/core/Geometry.js"></script>
|
|
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
|
|
<script type="text/javascript" src="../src/lights/Light.js"></script>
|
|
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
|
|
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
|
|
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Particle.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Line.js"></script>
|
|
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
|
|
|
|
<script type="text/javascript" src="geometry/Qrcode.js"></script>
|
|
<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
|
|
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
|
|
<script type="text/javascript" src="geometry/primitives/Cylinder.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var SCREEN_WIDTH = window.innerWidth / 3;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
var AMOUNT = 100;
|
|
|
|
var container;
|
|
var stats;
|
|
|
|
var camera;
|
|
var scene;
|
|
var canvasRenderer, svgRenderer, webglRenderer;
|
|
|
|
var mesh, qrcode;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth >> 1;
|
|
var windowHalfY = window.innerHeight >> 1;
|
|
|
|
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
init();
|
|
// loop();
|
|
setInterval(loop, 1000/60);
|
|
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
// camera.position.x = - 5000;
|
|
// camera.position.y = 50000;
|
|
camera.position.z = 500
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// QRCODE
|
|
|
|
qrcode = mesh = new THREE.Mesh(new Qrcode(), new THREE.MeshFaceColorFillMaterial());
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
mesh.updateMatrix();
|
|
scene.add(mesh);
|
|
|
|
// CUBES
|
|
|
|
var cube = new Cube(100, 100, 100);
|
|
|
|
mesh = new THREE.Mesh( cube, new THREE.MeshColorFillMaterial( 0x0000ff, 0.5 ) );
|
|
mesh.position.x = 500;
|
|
mesh.rotation.x = Math.random();
|
|
mesh.rotation.y = Math.random();
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
mesh.updateMatrix();
|
|
scene.add(mesh);
|
|
|
|
mesh = new THREE.Mesh( cube, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
|
|
mesh.position.x = 500;
|
|
mesh.position.y = 500;
|
|
mesh.rotation.x = Math.random();
|
|
mesh.rotation.y = Math.random();
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
mesh.updateMatrix();
|
|
scene.add(mesh);
|
|
|
|
// PLANE
|
|
|
|
mesh = new THREE.Mesh( new Plane( 100, 100 ), new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
|
|
mesh.position.y = -500;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
mesh.doubleSided = true;
|
|
mesh.updateMatrix();
|
|
scene.add(mesh);
|
|
|
|
// CYLINDER
|
|
|
|
mesh = new THREE.Mesh( new Cylinder( 10, 20, 100, 200, - 50, - 20 ), new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
|
|
mesh.position.x = -500;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
mesh.updateMatrix();
|
|
scene.add(mesh);
|
|
|
|
// POLYFIELD
|
|
|
|
var geometry = new THREE.Geometry();
|
|
|
|
for (var i = 0; i < 100; i ++) {
|
|
|
|
var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
|
|
|
|
var v0 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
|
|
var v1 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
|
|
var v2 = new THREE.Vertex( new THREE.Vector3(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
|
|
|
|
v0.position.addSelf( v );
|
|
v1.position.addSelf( v );
|
|
v2.position.addSelf( v );
|
|
|
|
var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1 );
|
|
face.color.setRGBA( Math.random(), Math.random(), Math.random(), 1 );
|
|
geometry.faces.push( face );
|
|
}
|
|
|
|
geometry.computeNormals();
|
|
|
|
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceColorFillMaterial() );
|
|
mesh.doubleSided = true;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
scene.add(mesh);
|
|
|
|
// PARTICLES
|
|
|
|
for (var i = 0; i < 100; i ++) {
|
|
|
|
particle = new THREE.Particle( new THREE.ParticleCircleMaterial( Math.random() * 0xffffff ) );
|
|
particle.position.x = Math.random() * 1000 - 500;
|
|
particle.position.y = Math.random() * 1000 - 500;
|
|
particle.position.z = Math.random() * 1000 - 500;
|
|
particle.scale.x = particle.scale.y = 10;
|
|
scene.add(particle);
|
|
|
|
}
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x80ffff );
|
|
scene.addLight( ambient );
|
|
|
|
var directional = new THREE.DirectionalLight( 0xffff00 );
|
|
scene.addLight( directional );
|
|
|
|
canvasRenderer = new THREE.CanvasRenderer();
|
|
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( canvasRenderer.domElement );
|
|
|
|
svgRenderer = new THREE.SVGRenderer();
|
|
svgRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
svgRenderer.setQuality( 'low' );
|
|
container.appendChild( svgRenderer.domElement );
|
|
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( webglRenderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
function loop() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
camera.updateMatrix();
|
|
|
|
mesh.rotation.y += 0.01;
|
|
mesh.updateMatrix();
|
|
|
|
/*
|
|
qrcode.rotation.x += 0.01;
|
|
qrcode.rotation.z += 0.02;
|
|
*/
|
|
|
|
canvasRenderer.render( scene, camera );
|
|
svgRenderer.render( scene, camera );
|
|
webglRenderer.render( scene, camera );
|
|
|
|
stats.update();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|