Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 135ee5c5 编写于 作者: G Greg Tatum
浏览文件
操作

Documentation material browser

上级 5fe01823
隐藏空白更改
内联 并排
Showing with 360 addition and 713 deletion
docs/api/materials/Material.html
浏览文件 @ 135ee5c5
......@@ -53,14 +53,15 @@
</div>
<div>Default is *false*.</div>
<h3>.[page:Blending blending]</h3>
<h3>.[page:Materials blending]</h3>
<div>
Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending].
Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. See the blending mode [page:Materials constants] for all possible values.
</div>
<h3>.[page:Integer blendSrc]</h3>
<h3>.[page:Materials blendSrc]</h3>
<div>
Blending source. It's one of the blending mode constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation SrcAlphaFactor]
Blending source. It's one of the blending mode constants defined in Three.js. Default is [page:CustomBlendingEquation SrcAlphaFactor]. See the destination factors [page:CustomBlendingEquation constants] for all possible values.
</div>
<h3>.[page:Integer blendDst]</h3>
......
docs/api/materials/MeshBasicMaterial.html
浏览文件 @ 135ee5c5
......@@ -14,6 +14,7 @@
<div class="desc">A material for drawing geometries in a simple shaded (flat or wireframe) way.</div>
<div class="desc">The default will render as flat polygons. To draw the mesh as wireframe, simply set the 'wireframe' property to true.</div>
<iframe src='../../scenes/material-browser.html#MeshBasicMaterial'></iframe>
<h2>Constructor</h2>
......@@ -58,10 +59,10 @@
<div>Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.</div>
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.</div>
<h3>.[page:String shading]</h3>
<div>Define shading type. Default is THREE.SmoothShading.</div>
<h3>.[page:Materials shading]</h3>
<div>Define shading type. Default is THREE.SmoothShading. Possible values are THREE.NoShading, THREE.FlatShading, THREE.SmoothShading.</div>
<h3>.[page:Integer vertexColors]</h3>
<h3>.[page:Materials vertexColors]</h3>
<div>Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.</div>
<div>This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.</div>
......
docs/api/materials/MeshDepthMaterial.html
浏览文件 @ 135ee5c5
......@@ -13,6 +13,8 @@
<div class="desc">A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.</div>
<iframe src='../../scenes/material-browser.html#MeshDepthMaterial'></iframe>
<h2>Constructor</h2>
......
docs/api/materials/MeshFaceMaterial.html
浏览文件 @ 135ee5c5
......@@ -13,7 +13,7 @@
<div class="desc">
A Material to define multiple materials for the same geometry.
The geometry decides which material is used for which faces by the [page:Face3 faces materialindex].
The geometry decides which material is used for which faces by the [page:Face3 faces] materialindex.
The materialindex corresponds with the index of the material in the materials array.
</div>
......
docs/api/materials/MeshLambertMaterial.html
浏览文件 @ 135ee5c5
......@@ -13,6 +13,7 @@
<div class="desc">A material for non-shiny (Lambertian) surfaces, evaluated per vertex.</div>
<iframe src='../../scenes/material-browser.html#MeshLambertMaterial'></iframe>
<h2>Constructor</h2>
......
docs/api/materials/MeshNormalMaterial.html
浏览文件 @ 135ee5c5
......@@ -13,6 +13,7 @@
<div class="desc">A material that maps the normal vectors to RGB colors.</div>
<iframe src='../../scenes/material-browser.html#MeshNormalMaterial'></iframe>
<h2>Constructor</h2>
......@@ -39,7 +40,7 @@
<h3>.[page:number shading]</h3>
<div>
How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.<br/><br/>
Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading]
Options are [page:Materials THREE.SmoothShading], [page:Materials THREE.FlatShading] (default)
</div>
......
docs/api/materials/MeshPhongMaterial.html
浏览文件 @ 135ee5c5
......@@ -13,6 +13,7 @@
<div class="desc">A material for shiny surfaces, evaluated per pixel.</div>
<iframe src='../../scenes/material-browser.html#MeshPhongMaterial'></iframe>
<h2>Constructor</h2>
......
docs/page.css
浏览文件 @ 135ee5c5
......@@ -65,7 +65,11 @@ code {
background-color: #f9f9f9;
overflow: auto;
}
iframe {
width: 100%;
height: 420px;
border:0;
}
strong {
color: #000;
font-weight: normal;
......
docs/scenes/js/material.js 0 → 100644
浏览文件 @ 135ee5c5
var constants = {
side: {
"THREE.FrontSide": THREE.FrontSide,
"THREE.BackSide": THREE.BackSide,
"THREE.DoubleSide": THREE.DoubleSide
},
shading: {
"THREE.NoShading": THREE.NoShading,
"THREE.FlatShading": THREE.FlatShading,
"THREE.SmoothShading": THREE.SmoothShading
},
colors: {
"THREE.NoColors": THREE.NoColors,
"THREE.FaceColors": THREE.FaceColors,
"THREE.VertexColors": THREE.VertexColors
},
blendingMode: {
"THREE.NoBlending": THREE.NoBlending,
"THREE.NormalBlending": THREE.NormalBlending,
"THREE.AdditiveBlending": THREE.AdditiveBlending,
"THREE.SubtractiveBlending": THREE.SubtractiveBlending,
"THREE.MultiplyBlending": THREE.MultiplyBlending,
"THREE.CustomBlending": THREE.CustomBlending
},
equations : {
"THREE.AddEquation" : THREE.AddEquation,
"THREE.SubtractEquation" : THREE.SubtractEquation,
"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
},
destinationFactors : {
"THREE.ZeroFactor" : THREE.ZeroFactor,
"THREE.OneFactor" : THREE.OneFactor,
"THREE.SrcColorFactor" : THREE.SrcColorFactor,
"THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor,
"THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor,
"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
},
sourceFactors : {
"THREE.DstColorFactor" : THREE.DstColorFactor,
"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
}
}
function handleColorChange( color ) {
return function( value ){
if(typeof value === "string") {
value = value.replace('#', '0x');
}
color.setHex( value );
};
}
function guiMaterial( gui, material ) {
var folder = gui.addFolder('THREE.Material');
folder.add( material, 'transparent' );
folder.add( material, 'opacity', 0, 1 );
folder.add( material, 'blending', constants.blendingMode );
folder.add( material, 'blendSrc', constants.destinationFactors );
folder.add( material, 'blendDst', constants.destinationFactors );
folder.add( material, 'blendEquation', constants.equations );
folder.add( material, 'depthTest' );
folder.add( material, 'depthWrite' );
folder.add( material, 'polygonOffset' );
folder.add( material, 'polygonOffsetFactor' );
folder.add( material, 'polygonOffsetUnits' );
folder.add( material, 'alphaTest' );
folder.add( material, 'overdraw' );
folder.add( material, 'visible' );
folder.add( material, 'side', constants.side );
}
function guiMeshBasicMaterial( gui, material ) {
var data = {
color : material.color.getHex()
};
var folder = gui.addFolder('THREE.MeshBasicMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
folder.add( material, 'shading', constants.shading);
folder.add( material, 'vertexColors', constants.colors);
folder.add( material, 'fog' );
//folder.add( material, 'lightMap' );
//folder.add( material, 'specularMap' );
//folder.add( material, 'alphaMap' );
//folder.add( material, 'envMap' );
//folder.add( material, 'skinning' );
//folder.add( material, 'morphTargets' );
//folder.add( material, 'map' );
//folder.add( material, 'combine' );
//folder.add( material, 'relectivity' );
//folder.add( material, 'refractionRatio' );
}
function guiMeshDepthMaterial( gui, material ) {
var folder = gui.addFolder('THREE.MeshDepthMaterial');
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
}
function guiMeshNormalMaterial( gui, material ) {
var folder = gui.addFolder('THREE.MeshNormalMaterial');
folder.add( material, 'morphTargets');
folder.add( material, 'shading', constants.shading);
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
}
function guiLineBasicMaterial( gui, material ) {
var data = {
color : material.color.getHex()
};
var folder = gui.addFolder('THREE.LineBasicMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.add( material, 'linewidth', 0, 10 );
folder.add( material, 'linecap', ["butt", "round", "square"] );
folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
folder.add( material, 'vertexColors', constants.colors);
folder.add( material, 'fog' );
}
function guiMeshLambertMaterial( gui, material ) {
var data = {
color : material.color.getHex(),
ambient : material.ambient.getHex(),
emissive : material.emissive.getHex()
};
var folder = gui.addFolder('THREE.MeshLambertMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
folder.add( material, 'shading', constants.shading);
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
folder.add( material, 'vertexColors', constants.colors);
folder.add( material, 'fog' );
}
function guiMeshPhongMaterial( gui, material ) {
var data = {
color : material.color.getHex(),
ambient : material.ambient.getHex(),
emissive : material.emissive.getHex(),
specular : material.specular.getHex()
};
var folder = gui.addFolder('THREE.MeshPhongMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
folder.add( material, 'shininess', 0, 100);
folder.add( material, 'shading', constants.shading);
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] );
folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] );
folder.add( material, 'vertexColors', constants.colors);
folder.add( material, 'fog' );
}
function chooseFromHash() {
var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
var material;
var gui = new dat.GUI();
switch (selectedMaterial) {
case "MeshBasicMaterial":
material = new THREE.MeshBasicMaterial({color: 0x00ff00});
guiMaterial( gui, material );
guiMeshBasicMaterial( gui, material );
return material;
break;
case "MeshLambertMaterial":
material = new THREE.MeshLambertMaterial({color: 0x00ff00});
guiMaterial( gui, material );
guiMeshLambertMaterial( gui, material );
return material;
break;
case "MeshPhongMaterial":
material = new THREE.MeshPhongMaterial({color: 0x00ff00});
guiMaterial( gui, material );
guiMeshPhongMaterial( gui, material );
return material;
break;
case "MeshDepthMaterial":
material = new THREE.MeshDepthMaterial({color: 0x00ff00});
guiMaterial( gui, material );
guiMeshDepthMaterial( gui, material );
return material;
break;
case "MeshNormalMaterial":
material = new THREE.MeshNormalMaterial();
guiMaterial( gui, material );
guiMeshNormalMaterial( gui, material );
return material;
break;
case "LineBasicMaterial":
material = new THREE.LineBasicMaterial({color: 0x00ff00});
guiMaterial( gui, material );
guiLineBasicMaterial( gui, material );
return material;
break;
}
}
\ No newline at end of file
docs/scenes/material-browser.html 0 → 100644
浏览文件 @ 135ee5c5
<html>
<head>
<title>MeshBasicMaterial</title>
<style>
body {margin:0;}
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="../../build/three.min.js"></script>
<script src='../../examples/js/libs/dat.gui.min.js'></script>
<script src='js/material.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 50);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var material = chooseFromHash();
var torus = new THREE.Mesh(geometry, material);
scene.add(torus);
var lights = [];
lights[0] = new THREE.AmbientLight( 0x555555 );
lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[1].position.set(0, 200, 0);
lights[2].position.set(100, 200, 100);
lights[3].position.set(-100, -200, -100);
//scene.add( lights[0] );
scene.add( lights[1] );
scene.add( lights[2] );
scene.add( lights[3] );
camera.position.z = 30;
var render = function () {
requestAnimationFrame(render);
torus.rotation.x += 0.01;
torus.rotation.y += 0.01;
material.needsUpdate = true;
renderer.render(scene, camera);
};
window.addEventListener( 'resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
render();
</script>
</body>
</html>
\ No newline at end of file
docs/scenes/threejs-example.html 已删除 100755 → 0
浏览文件 @ 5fe01823
<!DOCTYPE html>
<html>
<head>
<title>Simple Example ThreeJS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#material {
bottom:5px;
left:5px;
position:absolute;
}
</style>
<script src="../../build/three.min.js"></script>
<script src='../../examples/js/libs/dat.gui.min.js'></script>
<script>
var ExampleScene = function() {
//The current selected material saved to the hash
var selectedMaterial = window.location.hash.substring(1) || "MeshPhongMaterial";
this.renderer = undefined;
this.controls = undefined;
this.div = document.getElementById( 'clean' );
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(fov, aspect ratio, near, far frustrum)
this.camera.position.z = 50;
this.gui = new dat.GUI();
this.addRenderer();
this.addControls();
this.addLights();
//this.addSpheresBasic();
this.addSpheresWithMaterial( selectedMaterial );
//this.addGeometry();
this.addGrid();
this.addEventListeners();
this.loop();
};
ExampleScene.prototype = {
addLights : function() {
this.lights = [];
this.lights[0] = new THREE.AmbientLight( 0xffffff );
this.lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
this.lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
this.lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
this.lights[1].position.set(0, 200, 0);
this.lights[2].position.set(100, 200, 100);
this.lights[3].position.set(-100, -200, -100);
//this.scene.add( this.lights[0] );
this.scene.add( this.lights[1] );
this.scene.add( this.lights[2] );
this.scene.add( this.lights[3] );
},
addGeometry : function() {
//-------------------------------------------------------------------------------
// Various types of geometry to play with, only un-comment 1 geometry at a time
//var geometry = new THREE.CircleGeometry(10, 20, 0, 2 * Math.PI);
//var geometry = new THREE.CubeGeometry(15, 10, 10, 1, 1, 1); //(width, height, depth, widthSegments, heightSegments, depthSegments)
var geometry = new THREE.CylinderGeometry(10, 12, 20, 32, 2, false); //(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
//var geometry = new THREE.CircleGeometry();
/*
// Extruded Geometry
var extrudeSettings = {
bevelEnabled: true,
bevelSegments: 2,
steps: 100,
extrudePath : new THREE.SplineCurve3([
new THREE.Vector3( 0, -8, 0),
new THREE.Vector3( 3, -1.66, 0),
new THREE.Vector3( -3, 1.66, 0),
new THREE.Vector3( 0, 8, 0)
])
};
var extrudeBend = new THREE.Shape([ //Closed
new THREE.Vector3( 0.05, 0.00, 0.00),
new THREE.Vector3( 0.85, 0.00, 0.00),
new THREE.Vector3( 1.00, 0.05, 0.00),
new THREE.Vector3( 1.00, 0.85, 0.00),
new THREE.Vector3( 0.85, 1.00, 0.00),
new THREE.Vector3( 0.05, 1.00, 0.00),
new THREE.Vector3( 0.00, 0.85, 0.00),
new THREE.Vector3( 0.00, 0.05, 0.00)
]);
var geometry = new THREE.ExtrudeGeometry(extrudeBend, extrudeSettings);
*/
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
new THREE.MeshNormalMaterial( {} ),
new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2, opacity: 0.1, transparent: true } ) ]
);
this.scene.add(mesh);
},
addRenderer : function() {
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.div.appendChild( this.renderer.domElement );
},
addControls : function() {
this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
},
addSpheresBasic : function() {
var sphere = new THREE.SphereGeometry( 5, 16, 8 ); // (radius, widthSegments, heightSegments)
this.spheres = [];
this.spheres[0] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
this.spheres[1] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
this.spheres[2] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
this.spheres[3] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
this.spheres[0].position.set(10, 0, 0);
this.spheres[1].position.set( 0, 10, 0);
this.spheres[2].position.set( 0, 0, 10);
this.spheres[3].position.set(10, 10, 0);
this.scene.add(this.spheres[0]);
this.scene.add(this.spheres[1]);
this.scene.add(this.spheres[2]);
this.scene.add(this.spheres[3]);
},
addGenericGui : function( material ) {
gui.add( material, "opacity", 0, 1 );
gui.add( material, "transparent" );
gui.add( blending, {
"THREE.NoBlending" : THREE.NoBlending,
"THREE.NormalBlending" : THREE.NormalBlending,
"THREE.AdditiveBlending" : THREE.AdditiveBlending,
"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
"THREE.MultiplyBlending" : THREE.MultiplyBlending,
"THREE.CustomBlending" : THREE.CustomBlending
});
gui.add( side, {
"THREE.FrontSide" : THREE.FrontSide,
"THREE.BackSide" : THREE.BackSide,
"THREE.DoubleSide" : THREE.DoubleSide
});
},
addSpheresWithMaterial : function( materialType ) {
var sphere, colors, material;
sphere = new THREE.SphereGeometry( 5, 64 / 2, 32 / 2 ); // (radius, widthSegments, heightSegments)
this.spheres = [];
colors = [
0x9f0040,
0x00409f,
0x809f80,
0x9faa00
];
for(var i=0; i < 4; ++i) {
//Non-shiny material
if(materialType === "MeshLambertMaterial") {
material = new THREE.MeshLambertMaterial( {
color: colors[i],
emissive : new THREE.Color( 0x000510 ),
wireframe : false,
wireframeLinewidth : 3
})
this.spheres.push(
new THREE.Mesh( sphere, material)
);
this.gui.add( material, 'speed', 0, 2 );
} else if(materialType === "MeshPhongMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshPhongMaterial( {
color: colors[i],
specular : new THREE.Color( 0xffffff ),
shininess : Math.pow(10, i),
emissive : new THREE.Color( 0x000510 ),
shading : THREE.NoShading,
wireframe : false,
wireframeLinewidth : 3
}))
);
} else if(materialType === "MeshNormalMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshNormalMaterial( {
}))
);
} else if(materialType === "MeshDepthMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshDepthMaterial( {
shading: THREE.FlatShading,
wireframe: true
}))
);
this.camera.near = 20;
this.camera.far = 100;
} else if(materialType === "MeshFaceMaterial") {
/* Can't get to work
var materials = [],
colorIterator;
//Create 6 materials
for (var j=0; j<6; j++) {
var img = new Image();
img.src = "textures/cube/clean/" + i + '.jpg';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function() {
this.tex.needsUpdate = true;
};
colorIterator = Math.floor(Math.random() * colors.length);
materials[j] = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
blending: THREE.AdditiveBlending,
map: tex
});
}
console.log(materials);
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshFaceMaterial( materials ))
);
*/
} else {
if(materialType !== "MeshBasicMaterial") {
console.log(material + " material not implemented by this script. Using MeshBasicMaterial");
}
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color : colors[i] } ) )
);
}
}
//Set the position
this.spheres[0].position.set( 0, 0, 0);
this.spheres[1].position.set( 10, 0, 0);
this.spheres[2].position.set(-10, 0, 0);
this.spheres[3].position.set( 0, 10, 0);
this.scene.add(this.spheres[0]);
this.scene.add(this.spheres[1]);
this.scene.add(this.spheres[2]);
this.scene.add(this.spheres[3]);
},
addGrid : function() {
var lineMaterial = new THREE.LineBasicMaterial( { color: 0x303030 } ),
geometry = new THREE.Geometry(),
floor = -75, step = 25;
for ( var i = 0; i <= 40; i ++ ) {
geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
geometry.vertices.push( new THREE.Vector3( 500, floor, i * step - 500 ) );
geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, 500 ) );
}
this.grid = new THREE.Line( geometry, lineMaterial, THREE.LinePieces );
this.scene.add( this.grid );
},
addEventListeners : function() {
window.onresize = this.resizeHandler.bind(this);
},
resizeHandler : function() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize( window.innerWidth, window.innerHeight );
},
loop : function() {
requestAnimationFrame( this.loop.bind(this) );
this.render();
},
render : function() {
this.renderer.render( this.scene, this.camera );
}
};
window.onload = function() {
window.exampleScene = new ExampleScene();
};
</script>
</head>
<body>
<div id='clean'></div>
<select id='material'>
<option>MeshBasicMaterial</option>
<option>MeshLambertMaterial</option>
<option>MeshPhongMaterial</option>
<option>MeshNormalMaterial</option>
<option>MeshDepthMaterial</option>
<!-- <option>MeshFaceMaterial</option> -->
</select>
</body>
</html>
\ No newline at end of file
docs/scenes/threejs-example.js 已删除 100755 → 0
浏览文件 @ 5fe01823
var ExampleScene = function() {
//The current selected material saved to the hash
var selectedMaterial = window.location.hash.substring(1) || "MeshPhongMaterial";
this.renderer = undefined;
this.controls = undefined;
this.div = document.getElementById( 'clean' );
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(fov, aspect ratio, near, far frustrum)
this.camera.position.z = 50;
this.addRenderer();
this.addControls();
this.addLights();
//this.addSpheresBasic();
this.addSpheresWithMaterial( selectedMaterial );
//this.addGeometry();
this.addGrid();
this.addEventListeners();
this.loop();
};
ExampleScene.prototype = {
addLights : function() {
this.lights = [];
this.lights[0] = new THREE.AmbientLight( 0xffffff );
this.lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
this.lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
this.lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
this.lights[1].position.set(0, 200, 0);
this.lights[2].position.set(100, 200, 100);
this.lights[3].position.set(-100, -200, -100);
//this.scene.add( this.lights[0] );
this.scene.add( this.lights[1] );
this.scene.add( this.lights[2] );
this.scene.add( this.lights[3] );
},
addGeometry : function() {
//-------------------------------------------------------------------------------
// Various types of geometry to play with, only un-comment 1 geometry at a time
//var geometry = new THREE.CircleGeometry(10, 20, 0, 2 * Math.PI);
//var geometry = new THREE.CubeGeometry(15, 10, 10, 1, 1, 1); //(width, height, depth, widthSegments, heightSegments, depthSegments)
var geometry = new THREE.CylinderGeometry(10, 12, 20, 32, 2, false); //(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
//var geometry = new THREE.CircleGeometry();
/*
// Extruded Geometry
var extrudeSettings = {
bevelEnabled: true,
bevelSegments: 2,
steps: 100,
extrudePath : new THREE.SplineCurve3([
new THREE.Vector3( 0, -8, 0),
new THREE.Vector3( 3, -1.66, 0),
new THREE.Vector3( -3, 1.66, 0),
new THREE.Vector3( 0, 8, 0)
])
};
var extrudeBend = new THREE.Shape([ //Closed
new THREE.Vector3( 0.05, 0.00, 0.00),
new THREE.Vector3( 0.85, 0.00, 0.00),
new THREE.Vector3( 1.00, 0.05, 0.00),
new THREE.Vector3( 1.00, 0.85, 0.00),
new THREE.Vector3( 0.85, 1.00, 0.00),
new THREE.Vector3( 0.05, 1.00, 0.00),
new THREE.Vector3( 0.00, 0.85, 0.00),
new THREE.Vector3( 0.00, 0.05, 0.00)
]);
var geometry = new THREE.ExtrudeGeometry(extrudeBend, extrudeSettings);
*/
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
new THREE.MeshNormalMaterial( {} ),
new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2, opacity: 0.1, transparent: true } ) ]
);
this.scene.add(mesh);
},
addRenderer : function() {
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.div.appendChild( this.renderer.domElement );
},
addControls : function() {
this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
},
addSpheresBasic : function() {
var sphere = new THREE.SphereGeometry( 5, 16, 8 ); // (radius, widthSegments, heightSegments)
this.spheres = [];
this.spheres[0] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
this.spheres[1] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
this.spheres[2] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
this.spheres[3] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
this.spheres[0].position.set(10, 0, 0);
this.spheres[1].position.set( 0, 10, 0);
this.spheres[2].position.set( 0, 0, 10);
this.spheres[3].position.set(10, 10, 0);
this.scene.add(this.spheres[0]);
this.scene.add(this.spheres[1]);
this.scene.add(this.spheres[2]);
this.scene.add(this.spheres[3]);
},
addSpheresWithMaterial : function(material) {
var sphere = new THREE.SphereGeometry( 5, 64 / 2, 32 / 2 ); // (radius, widthSegments, heightSegments)
this.spheres = [];
var colors = [
0x9f0040,
0x00409f,
0x809f80,
0x9faa00
];
for(var i=0; i < 4; ++i) {
//Non-shiny material
if(material === "MeshLambertMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( {
color: colors[i],
emissive : new THREE.Color( 0x000510 ),
wireframe : false,
wireframeLinewidth : 3
}))
);
} else if(material === "MeshPhongMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshPhongMaterial( {
color: colors[i],
specular : new THREE.Color( 0xffffff ),
shininess : Math.pow(10, i),
emissive : new THREE.Color( 0x000510 ),
shading : THREE.NoShading,
wireframe : false,
wireframeLinewidth : 3
}))
);
} else if(material === "MeshNormalMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshNormalMaterial( {
}))
);
} else if(material === "MeshDepthMaterial") {
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshDepthMaterial( {
shading: THREE.FlatShading,
wireframe: true
}))
);
this.camera.near = 20;
this.camera.far = 100;
} else if(material === "MeshFaceMaterial") {
/* Can't get to work
var materials = [],
colorIterator;
//Create 6 materials
for (var j=0; j<6; j++) {
var img = new Image();
img.src = "textures/cube/clean/" + i + '.jpg';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function() {
this.tex.needsUpdate = true;
};
colorIterator = Math.floor(Math.random() * colors.length);
materials[j] = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
blending: THREE.AdditiveBlending,
map: tex
});
}
console.log(materials);
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshFaceMaterial( materials ))
);
*/
} else {
if(material !== "MeshBasicMaterial") {
console.log(material + " material not implemented by this script. Using MeshBasicMaterial");
}
this.spheres.push(
new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color : colors[i] } ) )
);
}
}
//Set the position
this.spheres[0].position.set( 0, 0, 0);
this.spheres[1].position.set( 10, 0, 0);
this.spheres[2].position.set(-10, 0, 0);
this.spheres[3].position.set( 0, 10, 0);
this.scene.add(this.spheres[0]);
this.scene.add(this.spheres[1]);
this.scene.add(this.spheres[2]);
this.scene.add(this.spheres[3]);
},
addGrid : function() {
var lineMaterial = new THREE.LineBasicMaterial( { color: 0x303030 } ),
geometry = new THREE.Geometry(),
floor = -75, step = 25;
for ( var i = 0; i <= 40; i ++ ) {
geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
geometry.vertices.push( new THREE.Vector3( 500, floor, i * step - 500 ) );
geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, 500 ) );
}
this.grid = new THREE.Line( geometry, lineMaterial, THREE.LinePieces );
this.scene.add( this.grid );
},
addEventListeners : function() {
$(window).on('resize', this.resizeHandler.bind(this));
},
resizeHandler : function() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize( window.innerWidth, window.innerHeight );
},
loop : function() {
requestAnimationFrame( this.loop.bind(this) );
this.render();
},
render : function() {
this.controls.update();
this.renderer.render( this.scene, this.camera );
}
};
var MaterialSelector = function() {
this.setSelectedChoiceFromHash();
this.addEventListeners();
}
MaterialSelector.prototype = {
addEventListeners : function() {
$('#material').change(this.loadNewMaterial.bind(this));
},
loadNewMaterial : function() {
window.location.hash = $('#material').val();
window.location.reload()
},
setSelectedChoiceFromHash : function() {
$('#material > option').each(function() {
var $this = $(this),
hash = window.location.hash.substring(1);
if( $this.text() == hash ) {
$this.attr('selected', 'selected');
}
})
},
}
var exampleScene, materialSelector;
$(function() {
materialSelector = new MaterialSelector();
exampleScene = new ExampleScene();
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或