threecanvas实现3d三维立方体像素堆积木建造效果代码
代码语言：html
所属分类：三维
代码描述：threecanvas实现3d三维立方体像素堆积木建造效果代码，点击就可以增加立方体。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
font-size: 12px;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ThreeCanvas.28.js"></script>
<script type="text/javascript">
/**
* @author mr.doob / http://mrdoob.com/
*/
var Cube = function (width, height, depth) {
THREE.Geometry.call(this);
var scope = this,
width_half = width / 2,
height_half = height / 2,
depth_half = depth / 2;
v( width_half, height_half, -depth_half );
v( width_half, -height_half, -depth_half );
v( -width_half, -height_half, -depth_half );
v( -width_half, height_half, -depth_half );
v( width_half, height_half, depth_half );
v( width_half, -height_half, depth_half );
v( -width_half, -height_half, depth_half );
v( -width_half, height_half, depth_half );
f4( 0, 1, 2, 3 );
f4( 4, 7, 6, 5 );
f4( 0, 4, 5, 1 );
f4( 1, 5, 6, 2 );
f4( 2, 6, 7, 3 );
f4( 4, 0, 3, 7 );
function v(x, y, z) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f4(a, b, c, d) {
scope.faces.push( new THREE.Face4( a, b, c, d ) );
}
this.computeCentroids();
this.computeNormals();
}
Cube.prototype = new THREE.Geometry();
Cube.prototype.constructor = Cube;
</script>
<script type="text/javascript">
/**
* @author mr.doob / http://mrdoob.com/
* based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
*/
var Plane = function ( width, height, segments_width, segments_height ) {
THREE.Geometry.call( this );
var ix, iy,
width_half = width / 2,
height_half = height / 2,
gridX = segments_width || 1,
gridY = segments_height || 1,
gridX1 = gridX + 1,
gridY1 = gridY + 1,
segment_width = width / gridX,
segment_height = height / gridY;
for( iy = 0; iy < gridY1; iy++ ) {
for( ix = 0; ix < gridX1; ix++ ) {
var x = ix * segment_width - width_half;
var y = iy * segment_height - height_half;
this.vertices.push( new THREE.Vertex( new THREE.Vector3( x, - y, 0 ) ) );
}
}
for( iy = 0; iy < gridY; iy++ ) {
for( ix = 0; ix < gridX; ix++ ) {
var a = ix + gridX1 * iy;
var b = ix + gridX1 * ( iy + 1 );
var c = ( ix + 1 ) + gridX1 * ( iy + 1 );
var d = ( ix + 1 ) + gridX1 * iy;
this.faces.push( new THREE.Face4( a, b, c, d ) );
this.uvs.push( [
new THREE.UV( ix / gridX, iy / gridY ),
new THREE.UV( ix / gridX, ( iy + 1 ) / gridY ),
new THREE.UV( ( ix + 1 ) / gridX, ( iy + 1 ) / gridY ),
new THREE.UV( ( ix + 1 ) / gridX, iy / gridY )
] );
}
}
this.computeCentroids();
this.computeNormals();
}
Plane.prototype = new THREE.Geometry();
Plane.prototype.constructor = Plane;
</script>
<script type="text/javascript">
var container, interval,
camera, scene, renderer,
projector, plane, cube, linesMaterial,
color = 0,colors = [ 0xDF1F1F, 0xDFAF1F, 0x80DF1F, 0x1FDF50, 0x1FDFDF, 0x1F4FDF, 0x7F1FDF, 0xDF1FAF, 0xEFEFEF, 0x303030 ],
ray, brush, objectHovered,
mouse3D, isMouseDown = false, onMouseDownPosition,
radious = 1600, theta = 45, onMouseDownTheta = 45, phi = 60, onMouseDownPhi = 60,
isShiftDown = false;
init();
render();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '5px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<span style="color: #444; background-color: #fff; border-bottom: 1px solid #ddd; padding: 8px 10px; text-transform: uppercase;"><strong>0 - 9</strong>: colors, <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <strong>drag</strong>: rotate | <a id="link" href="" target="_blank">share</a> <a href="javascript:save();">save</a> <a href="javascript:clear();">clear</a></span>';
container.appendChild( info );
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = radious * Math.sin( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
camera.position.y = radious * Math.sin( phi * Math.PI / 360 );
camera.position.z = radious * Math.cos( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
camera.target.position.y = 200;
scene = new THREE.Scene();
// Grid
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
linesMaterial = new THREE.LineColorMaterial( 0x000000, 0.2 );
for ( var i = 0; i <= 20; i ++ ) {
var line = new THREE.Line( geometry, linesMaterial );
line.position.z = ( i * 50 ) - 500;
scene.addObject( line );
var line = new THREE.Line( geometry, linesMaterial );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.addObject( line );
}
projector = new THREE.Projector();
plane = new THREE.Mesh( new Plane( 1000, 1000 ) );
plane.rotation.x = - 90 * Math.PI / 180;
scene.addObject( plane );
cube = new Cube( 50, 50, 50 );
ray = new THREE.Ray( camera.position, null );
brush = new THREE.Mesh( cube, new THREE.MeshColorFillMaterial( colors[ color ], 0.4 ) );
brush.position.y = 2000;
brush.overdraw = true;
scene.addObject( brush );
onMouseDownPosition = new THREE.Vector2();
// Lights
var ambientLight = new THREE.AmbientLight( 0x404040 );
scene.addLight( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 0.75;
directionalLight.position.normalize();
scene.addLight( directionalLight );
var directionalLight = new THREE.DirectionalLight( 0x808080 );
directionalLight.position.x = - 1;
directionalLight.position.y = 1;
directionalLight.position.z = - 0.75;
directionalLight.position.normalize();
scene.addLight( directionalLight );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
document.addEventListener( 'keydown', onDocumentKeyDown, false );
document.addEventListener( 'keyup', onDocumentKeyUp, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
if ( window.location.hash ) {
buildFromHash();
}
}
function onDocumentKeyDown( event ) {
switch( event.keyCode ) {
case 49: setBrushColor( 0 ); break;
case 50: setBrushColor( 1 ); break;
case 51: setBrushColor( 2 ); break;
case 52: setBrushColor( 3 ); break;
case 53: setBrushColor( 4 ); break;
case 54: setBrushColor( 5 ); break;
case 55: setBrushColor( 6 ); break;
case 56: setBrushColor( 7 ); break;
case 57: setBrushColor( 8 ); break;
case 48: setBrushColor( 9 ); break;
case 16: isShiftDown = true; interact(); render(); break;
case 37: offsetScene( - 1, 0 ); break;
case 38: offsetScene( 0, - 1 ); break;
case 39: offsetScene( 1, 0 ); break;
case 40: offsetScene( 0, 1 ); break;
}
}
function onDocumentKeyUp( event ) {
switch( event.keyCode ) {
case 16: isShiftDown = false; interact(); render(); break;
}
}
function onDocumentMouseDown( event .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0