Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 52c0de2b 编写于 作者: M Mr.doob
浏览文件
操作

Merging with alteredq's branch.

上级 a7b55e9e
展开全部 隐藏空白更改
内联 并排
Showing with 1155 addition and 726 deletion
build/Three.js
浏览文件 @ 52c0de2b
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ 52c0de2b
此差异已折叠。
build/ThreeExtras.js
浏览文件 @ 52c0de2b
此差异已折叠。
examples/scene_test.html
浏览文件 @ 52c0de2b
......@@ -5,7 +5,8 @@
<meta charset="utf-8">
<style type="text/css">
body {
background:#fff;
background:#000;
color:#fff;
padding:0;
margin:0;
overflow:hidden;
......@@ -16,14 +17,57 @@
#info {
position: absolute;
top: 0px; width: 100%;
color: #000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
}
a { color:skyblue }
#progress {
color:red;
top:7em;
width: 100%;
font-size:3em;
font-variant:small-caps;
font-weight:bold;
position:absolute;
z-index:100;
text-align: center;
text-shadow: #000 0px 0px 10px;
display:none;
}
#start {
color:#fff;
text-shadow: #000 0px 0px 2px;
padding:0.1em 0.3em;
width:3em;
text-align: center;
/*
font-size:0.8em;
-moz-box-shadow: 0px 0px 5px #000;
-webkit-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
*/
display:none;
}
.enabled {
color: lime!important;
cursor:pointer;
}
.enabled:hover {
text-shadow: #0f0 0px 0px 5px !important;
}
.disabled {
background:gray;
cursor:default;
}
a { color:red }
canvas { pointer-events:none; z-index:10; }
#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
</style>
......@@ -34,6 +78,11 @@
<a href="http://github.com/mrdoob/three.js">three.js</a> - scene loader test
</div>
<div id="progress">
<span id="message">Loading ...</span>
<center><div id="start" class="disabled">Start</div></center>
</div>
<pre id="log"></pre>
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
......@@ -46,7 +95,7 @@
var container,stats;
var camera, scene;
var camera, scene, loaded;
var renderer;
var mesh, zmesh, geometry;
......@@ -56,34 +105,70 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
function $( id ) {
return document.getElementById( id );
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
var loadScene = createLoadScene();
scene = loadScene.scene;
camera = loadScene.camera;
renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
$( "start" ).addEventListener( 'click', onStartClick, false );
var callback = function( result ) {
setInterval( loop, 1000/60 );
var callback_sync = function( result ) {
/*
scene = result.scene;
camera = result.currentCamera;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
setInterval(loop, 1000/60);
renderer.setClearColor( result.bgColor.hex, result.bgAlpha );
*/
}
SceneUtils.loadScene( "scenes/test_scene.js", callback );
var callback_async = function( result ) {
renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
loaded = result;
var mat_veyron = result.geometries[ "veyron" ].materials;
mat_veyron[ 0 ][ 0 ] = result.materials[ "interior" ];
mat_veyron[ 1 ][ 0 ] = result.materials[ "chrome" ];
mat_veyron[ 2 ][ 0 ] = result.materials[ "darkerchrome" ];
mat_veyron[ 3 ][ 0 ] = result.materials[ "glass" ];
mat_veyron[ 4 ][ 0 ] = result.materials[ "chrome" ];
mat_veyron[ 5 ][ 0 ] = result.materials[ "chrome" ];
$( "message" ).style.display = "none";
$( "start" ).style.display = "block";
$( "start" ).className = "enabled";
}
$( "progress" ).style.display = "block";
SceneUtils.loadScene( "scenes/test_scene.js", callback_sync, callback_async );
stats = new Stats();
stats.domElement.style.position = 'absolute';
......@@ -93,6 +178,26 @@
}
function setButtonActive( id ) {
$( "start" ).style.backgroundColor = "green";
}
function onStartClick() {
$( "progress" ).style.display = "none";
scene = loaded.scene;
camera = loaded.currentCamera;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setClearColor( loaded.bgColor.hex, loaded.bgAlpha );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
......@@ -100,6 +205,46 @@
}
function createLoadScene() {
var result = {
scene: new THREE.Scene(),
camera: new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
};
result.camera.position.z = 100;
var object, geometry, material, light, count = 100, range = 150;
material = new THREE.MeshLambertMaterial( { color:0xffffff } );
geometry = new Cube( 5, 5, 5 );
for( var i = 0; i < count; i++ ) {
object = new THREE.Mesh( geometry, material );
object.position.x = ( Math.random() - 0.5 ) * range;
object.position.y = ( Math.random() - 0.5 ) * range;
object.position.z = ( Math.random() - 0.5 ) * range;
object.rotation.x = Math.random() * 6;
object.rotation.y = Math.random() * 6;
object.rotation.z = Math.random() * 6;
result.scene.addObject( object );
}
light = new THREE.PointLight( 0xffffff );
result.scene.addLight( light );
light = new THREE.DirectionalLight( 0x111111 );
light.position.x = 1;
result.scene.addLight( light );
return result;
}
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .001;
......@@ -113,7 +258,7 @@
function log( text ) {
var e = document.getElementById("log");
var e = $("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
......
examples/scenes/test_scene.js
浏览文件 @ 52c0de2b
......@@ -13,14 +13,23 @@ var scene = {
"cube2" : {
"geometry" : "cube",
"materials": [ "basic_black" ],
"materials": [ "basic_white" ],
"position" : [ 0, 0, 0 ],
"rotation" : [ 0, -0.3, 0 ],
"scale" : [ 2, 2, 2 ],
"visible" : true
},
"sphere" : {
"cube3" : {
"geometry" : "cube",
"materials": [ "minecraft" ],
"position" : [ -30, -5, 25 ],
"rotation" : [ 0, 0.8, 0 ],
"scale" : [ 1, 1, 1 ],
"visible" : true
},
"sphere_lambert" : {
"geometry" : "sphere",
"materials": [ "lambert_green" ],
"position" : [ -20, -5, 15 ],
......@@ -29,10 +38,29 @@ var scene = {
"visible" : true
},
"sphere_refraction" : {
"geometry" : "sphere",
"materials": [ "basic_refraction" ],
"position" : [ 50, 45, -50 ],
"rotation" : [ 0, 0, 0 ],
"scale" : [ 1, 1, 1 ],
"visible" : true
},
"icosahedron" : {
"geometry" : "icosahedron",
"materials": [ "faceted_white" ],
"position" : [ 20, 10, -60 ],
"rotation" : [ 0, 0, 0 ],
"scale" : [ 20, 20, 20 ],
"visible" : true
},
"torus" : {
"geometry" : "torus",
"materials": [ "phong_orange" ],
"position" : [ 0, 5, -50 ],
"position" : [ -20, 5, -50 ],
"rotation" : [ 0, 0, 0 ],
"scale" : [ 2, 2, 2 ],
"visible" : true
......@@ -67,12 +95,21 @@ var scene = {
"walt" : {
"geometry" : "WaltHead",
"materials": [ "phong_white" ],
"materials": [ "lambert_cube" ],
"position" : [ -45, 10, 0 ],
"rotation" : [ 0, 0, 0 ],
"scale" : [ 0.5, 0.5, 0.5 ],
"visible" : true
},
"quad_bg" : {
"geometry" : "quad",
"materials": [ "textured_bg" ],
"position" : [ 0, 15, -90 ],
"rotation" : [ 0, 0, 0 ],
"scale" : [ 20, 20, 20 ],
"visible" : true
},
"ground" : {
"geometry" : "plane",
......@@ -106,13 +143,26 @@ var scene = {
"segments_height" : 50
},
"quad": {
"type" : "plane",
"width" : 10,
"height" : 10,
"segments_width" : 1,
"segments_height" : 1
},
"sphere": {
"type" : "sphere",
"radius" : 5,
"segments_width" : 32,
"segments_height" : 16
},
"icosahedron": {
"type" : "icosahedron",
"subdivisions" : 2
},
"torus": {
"type" : "torus",
"radius" : 5,
......@@ -149,12 +199,7 @@ var scene = {
"veyron": {
"type": "bin_mesh",
"url" : "obj/veyron/VeyronNoUv_bin.js"
},
"TextureCube": {
"type": "ascii_mesh",
"url" : "obj/textureTest/textureTest_baked.js"
},
}
},
......@@ -180,6 +225,16 @@ var scene = {
"type": "MeshBasicMaterial",
"parameters": { color: 0x000000, wireframe: true }
},
"basic_white": {
"type": "MeshBasicMaterial",
"parameters": { color: 0xffffff, wireframe: true }
},
"faceted_white": {
"type": "MeshLambertMaterial",
"parameters": { color: 0xffffff, shading: "flat" }
},
"basic_blue": {
"type": "MeshBasicMaterial",
......@@ -211,6 +266,46 @@ var scene = {
"parameters": { color:0x000000, specular: 0xaa5500 }
},
"basic_refraction": {
"type": "MeshBasicMaterial",
"parameters": { color: 0xffffff, env_map: "cube_refraction", refraction_ratio: 0.95 }
},
"lambert_cube": {
"type": "MeshLambertMaterial",
"parameters": { color: 0xff6600, env_map: "cube_reflection", combine: "MixOperation", reflectivity: 0.3 }
},
"chrome": {
"type": "MeshLambertMaterial",
"parameters": { color: 0xffffff, env_map: "cube_reflection" }
},
"darkerchrome": {
"type": "MeshLambertMaterial",
"parameters": { color: 0x222222, env_map: "cube_reflection" }
},
"glass": {
"type": "MeshLambertMaterial",
"parameters": { color: 0x101046, env_map: "cube_reflection", opacity: 0.25 }
},
"interior": {
"type": "MeshLambertMaterial",
"parameters": { color: 0x050505 }
},
"textured_bg": {
"type": "MeshBasicMaterial",
"parameters": { color: 0xffffff, map: "texture_bg" }
},
"minecraft": {
"type": "MeshBasicMaterial",
"parameters": { color: 0xffffff, map: "texture_minecraft" }
},
"face": {
"type": "MeshFaceMaterial",
"parameters": {}
......@@ -218,6 +313,42 @@ var scene = {
},
"textures":
{
"cube_reflection": {
"url": [ "textures/cube/SwedishRoyalCastle/px.jpg",
"textures/cube/SwedishRoyalCastle/nx.jpg",
"textures/cube/SwedishRoyalCastle/py.jpg",
"textures/cube/SwedishRoyalCastle/ny.jpg",
"textures/cube/SwedishRoyalCastle/pz.jpg",
"textures/cube/SwedishRoyalCastle/nz.jpg"
]
},
"cube_refraction": {
"url": [ "textures/cube/SwedishRoyalCastle/px.jpg",
"textures/cube/SwedishRoyalCastle/nx.jpg",
"textures/cube/SwedishRoyalCastle/py.jpg",
"textures/cube/SwedishRoyalCastle/ny.jpg",
"textures/cube/SwedishRoyalCastle/nz.jpg",
"textures/cube/SwedishRoyalCastle/pz.jpg"
],
"mapping": "CubeRefractionMapping"
},
"texture_bg": {
"url": "textures/cube/SwedishRoyalCastle/pz.jpg"
},
"texture_minecraft": {
"url": "textures/minecraft/grass.png",
"mag_filter": "NearestFilter",
"min_filter": "LinearMipMapLinearFilter"
}
},
"cameras":
{
"cam1": {
......@@ -249,7 +380,8 @@ var scene = {
"light1": {
"type" : "directional",
"direction" : [0,1,1],
"color" : [1,1,1]
"color" : [1,1,1],
"intensity" : 0.8
},
"light2": {
......@@ -273,13 +405,21 @@ var scene = {
"type" : "exp2",
"color" : [1,1,1],
"density" : 0.005,
},
"black": {
"type" : "exp2",
"color" : [0,0,0],
"density" : 0.005,
}
},
"defaults" :
{
"camera": "cam1",
"fog" : "exponential"
"bgcolor" : [0,0,0],
"bgalpha" : 1,
"camera" : "cam1",
"fog" : "black"
}
};
......
src/extras/ImageUtils.js
浏览文件 @ 52c0de2b
var ImageUtils = {
loadTexture: function ( path, mapping ) {
loadTexture: function ( path, mapping, callback ) {
var image = new Image();
image.onload = function () { this.loaded = true; };
image.onload = function () { this.loaded = true; if( callback ) callback( this ); };
image.src = path;
return new THREE.Texture( image, mapping );
},
loadArray: function ( array ) {
loadArray: function ( array, callback ) {
var i, l, images = [];
......@@ -20,7 +20,7 @@ var ImageUtils = {
images[ i ] = new Image();
images[ i ].loaded = 0;
images[ i ].onload = function () { images.loadCount += 1; this.loaded = true; };
images[ i ].onload = function () { images.loadCount += 1; this.loaded = true; if( callback ) callback( this ); };
images[ i ].src = array[ i ];
}
......
src/extras/SceneUtils.js
浏览文件 @ 52c0de2b
var SceneUtils = {
loadScene : function( url, callback ) {
loadScene : function( url, callback_sync, callback_async ) {
var dg, dm, dd, dl, dc, df, f,
g, o, m, l, p, c, t,
geometry, material, camera, fog, materials,
loader, callback_model,
worker = new Worker( url );
var worker = new Worker( url );
worker.postMessage( 0 );
worker.onmessage = function( event ) {
var dg, dm, dd, dl, dc, df, dt,
g, o, m, l, p, c, t, f, tt, pp,
geometry, material, camera, fog,
texture, images,
materials,
data, loader,
counter_models, counter_textures,
result;
data = event.data;
loader = new THREE.Loader();
counter_models = 0;
counter_textures = 0;
result = {
scene: new THREE.Scene(),
geometries: {},
materials: {},
textures: {},
objects: {},
cameras: {},
lights: {},
fogs: {}
};
function handle_objects() {
for( dd in data.objects ) {
......@@ -48,6 +73,7 @@ var SceneUtils = {
}
}
};
function handle_mesh( geo, id ) {
......@@ -59,27 +85,44 @@ var SceneUtils = {
function create_callback( id ) {
return function( geo ) { handle_mesh( geo, id ); }
return function( geo ) {
handle_mesh( geo, id );
counter_models -= 1;
//console.log( "models to load:", counter_models );
async_callback_gate();
}
}
var data = event.data;
};
var result = {
function async_callback_gate() {
if( counter_models == 0 && counter_textures == 0 ) {
callback_async( result );
}
scene: new THREE.Scene(),
geometries: {},
materials: {},
objects: {},
cameras: {},
lights: {},
fogs: {}
};
loader = new THREE.Loader();
// geometries
// count how many models will be loaded asynchronously
// geometries
for( dg in data.geometries ) {
g = data.geometries[ dg ];
if ( g.type == "bin_mesh" || g.type == "ascii_mesh" ) {
counter_models += 1;
}
}
for( dg in data.geometries ) {
......@@ -109,6 +152,11 @@ var SceneUtils = {
geometry = new Torus( g.radius, g.tube, g.segmentsR, g.segmentsT );
result.geometries[ dg ] = geometry;
} else if ( g.type == "icosahedron" ) {
geometry = new Icosahedron( g.subdivisions );
result.geometries[ dg ] = geometry;
} else if ( g.type == "bin_mesh" ) {
......@@ -126,22 +174,98 @@ var SceneUtils = {
}
// textures
// count how many textures will be loaded asynchronously
for( dt in data.textures ) {
tt = data.textures[ dt ];
if( tt.url instanceof Array ) {
counter_textures += tt.url.length;
} else {
counter_textures += 1;
}
}
var callback_texture = function( images ) {
counter_textures -= 1;
//console.log( "textures to load:", counter_textures );
async_callback_gate();
};
for( dt in data.textures ) {
tt = data.textures[ dt ];
if ( tt.mapping != undefined && THREE[ tt.mapping ] != undefined ) {
tt.mapping = new THREE[ tt.mapping ]();
}
if( tt.url instanceof Array ) {
images = ImageUtils.loadArray( tt.url, callback_texture );
texture = new THREE.Texture( images, tt.mapping );
} else {
texture = ImageUtils.loadTexture( tt.url, tt.mapping, callback_texture );
if ( THREE[ tt.min_filter ] != undefined )
texture.min_filter = THREE[ tt.min_filter ];
if ( THREE[ tt.mag_filter ] != undefined )
texture.mag_filter = THREE[ tt.mag_filter ];
}
result.textures[ dt ] = texture;
}
// materials
for( dm in data.materials ) {
m = data.materials[ dm ];
for( pp in m.parameters ) {
if ( pp == "env_map" || pp == "map" ) {
m.parameters[ pp ] = result.textures[ m.parameters[ pp ] ];
} else if ( pp == "shading" ) {
m.parameters[ pp ] = ( m.parameters[ pp ] == "flat" ) ? THREE.FlatShading : THREE.SmoothShading;
} else if ( pp == "combine" ) {
m.parameters[ pp ] = ( m.parameters[ pp ] == "MixOperation" ) ? THREE.MixOperation : THREE.MultiplyOperation;
}
}
material = new THREE[ m.type ]( m.parameters );
result.materials[ dm ] = material;
}
// objects
// objects ( synchronous init of procedural primitives )
handle_objects();
// lights
for( dl in data.lights ) {
......@@ -166,7 +290,8 @@ var SceneUtils = {
}
c = l.color;
light.color.setRGB( c[0], c[1], c[2] );
i = l.intensity || 1;
light.color.setRGB( c[0] * i, c[1] * i, c[2] * i );
result.scene.addLight( light );
......@@ -223,7 +348,13 @@ var SceneUtils = {
}
result.currentCamera = result.cameras[ data.defaults.camera ];
// defaults
if ( result.cameras && data.defaults.camera ) {
result.currentCamera = result.cameras[ data.defaults.camera ];
}
if ( result.fogs && data.defaults.fog ) {
......@@ -231,11 +362,17 @@ var SceneUtils = {
}
callback( result );
c = data.defaults.bgcolor;
result.bgColor = new THREE.Color();
result.bgColor.setRGB( c[0], c[1], c[2] );
result.bgColorAlpha = data.defaults.bgalpha;
// synchronous callback
callback_sync( result );
};
worker.postMessage( 0 );
},
......
src/extras/primitives/Icosahedron.js
浏览文件 @ 52c0de2b
......@@ -5,7 +5,7 @@
* so it draws the entire texture on the seam-faces, I think...
*/
var Icosahedron = function (subdivisions) {
var Icosahedron = function ( subdivisions ) {
var scope = this;
var tempScope = new THREE.Geometry();
......
utils/build.py
浏览文件 @ 52c0de2b
......@@ -82,6 +82,7 @@ EXTRAS_FILES = [
'extras/primitives/Plane.js',
'extras/primitives/Sphere.js',
'extras/primitives/Torus.js',
'extras/primitives/Icosahedron.js',
'extras/primitives/LathedObject.js',
'extras/io/Loader.js'
]
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或