Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

未验证 提交 b9a03044 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #16851 from Mugen87/dev32 

Docs: Convert browsers to modules.
上级 90e59eec ffd3d263
展开全部 隐藏空白更改
内联 并排
Showing with 2200 addition and 2124 deletion
docs/scenes/bones-browser.html
浏览文件 @ b9a03044
......@@ -21,11 +21,27 @@
<a id='newWindow' href='./bones-browser.html' target='_blank'>Open in New Window</a>
<script src="../../build/three.min.js"></script>
<script src='../../examples/js/libs/dat.gui.min.js'></script>
<script src="../../examples/js/controls/OrbitControls.js"></script>
<script>
<script type="module">
import {
Bone,
Color,
CylinderBufferGeometry,
DoubleSide,
Float32BufferAttribute,
MeshPhongMaterial,
PerspectiveCamera,
PointLight,
Scene,
SkinnedMesh,
Skeleton,
SkeletonHelper,
Vector3,
Uint16BufferAttribute,
WebGLRenderer
} from "../../build/three.module.js";
import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
var gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
......@@ -35,27 +51,27 @@
function initScene() {
gui = new dat.GUI();
gui = new GUI();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x444444 );
scene = new Scene();
scene.background = new Color( 0x444444 );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.z = 30;
camera.position.y = 30;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit = new OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;
lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
......@@ -81,7 +97,7 @@
function createGeometry( sizing ) {
var geometry = new THREE.CylinderBufferGeometry(
var geometry = new CylinderBufferGeometry(
5, // radiusTop
5, // radiusBottom
sizing.height, // height
......@@ -92,7 +108,7 @@
var position = geometry.attributes.position;
var vertex = new THREE.Vector3();
var vertex = new Vector3();
var skinIndices = [];
var skinWeights = [];
......@@ -111,8 +127,8 @@
}
geometry.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
geometry.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
geometry.addAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
geometry.addAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
return geometry;
......@@ -122,13 +138,13 @@
bones = [];
var prevBone = new THREE.Bone();
var prevBone = new Bone();
bones.push( prevBone );
prevBone.position.y = - sizing.halfHeight;
for ( var i = 0; i < sizing.segmentCount; i ++ ) {
var bone = new THREE.Bone();
var bone = new Bone();
bone.position.y = sizing.segmentHeight;
bones.push( bone );
prevBone.add( bone );
......@@ -142,22 +158,22 @@
function createMesh( geometry, bones ) {
var material = new THREE.MeshPhongMaterial( {
var material = new MeshPhongMaterial( {
skinning: true,
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
side: DoubleSide,
flatShading: true
} );
var mesh = new THREE.SkinnedMesh( geometry, material );
var skeleton = new THREE.Skeleton( bones );
var mesh = new SkinnedMesh( geometry, material );
var skeleton = new Skeleton( bones );
mesh.add( bones[ 0 ] );
mesh.bind( skeleton );
skeletonHelper = new THREE.SkeletonHelper( mesh );
skeletonHelper = new SkeletonHelper( mesh );
skeletonHelper.material.linewidth = 2;
scene.add( skeletonHelper );
......
docs/scenes/geometry-browser.html
浏览文件 @ b9a03044
此差异已折叠。
docs/scenes/js/geometry.js 已删除 100644 → 0
浏览文件 @ 90e59eec
此差异已折叠。
docs/scenes/js/material.js 已删除 100644 → 0
浏览文件 @ 90e59eec
/**
* @author TatumCreative (Greg Tatum) / http://gregtatum.com/
*/
var constants = {
combine: {
'THREE.MultiplyOperation': THREE.MultiplyOperation,
'THREE.MixOperation': THREE.MixOperation,
'THREE.AddOperation': THREE.AddOperation
},
side: {
'THREE.FrontSide': THREE.FrontSide,
'THREE.BackSide': THREE.BackSide,
'THREE.DoubleSide': THREE.DoubleSide
},
colors: {
'THREE.NoColors': THREE.NoColors,
'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 getObjectsKeys( obj ) {
var keys = [];
for ( var key in obj ) {
if ( obj.hasOwnProperty( key ) ) {
keys.push( key );
}
}
return keys;
}
var textureLoader = new THREE.TextureLoader();
var cubeTextureLoader = new THREE.CubeTextureLoader();
var envMaps = ( function () {
var path = '../../examples/textures/cube/SwedishRoyalCastle/';
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var reflectionCube = cubeTextureLoader.load( urls );
reflectionCube.format = THREE.RGBFormat;
var refractionCube = cubeTextureLoader.load( urls );
refractionCube.mapping = THREE.CubeRefractionMapping;
refractionCube.format = THREE.RGBFormat;
return {
none: null,
reflection: reflectionCube,
refraction: refractionCube
};
} )();
var diffuseMaps = ( function () {
var bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
bricks.wrapS = THREE.RepeatWrapping;
bricks.wrapT = THREE.RepeatWrapping;
bricks.repeat.set( 9, 1 );
return {
none: null,
bricks: bricks
};
} )();
var roughnessMaps = ( function () {
var bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
bricks.wrapT = THREE.RepeatWrapping;
bricks.wrapS = THREE.RepeatWrapping;
bricks.repeat.set( 9, 1 );
return {
none: null,
bricks: bricks
};
} )();
var matcaps = ( function () {
return {
none: null,
porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
};
} )();
var alphaMaps = ( function () {
var fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
fibers.wrapT = THREE.RepeatWrapping;
fibers.wrapS = THREE.RepeatWrapping;
fibers.repeat.set( 9, 1 );
return {
none: null,
fibers: fibers
};
} )();
var gradientMaps = ( function () {
var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
threeTone.minFilter = THREE.NearestFilter;
threeTone.magFilter = THREE.NearestFilter;
var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
fiveTone.minFilter = THREE.NearestFilter;
fiveTone.magFilter = THREE.NearestFilter;
return {
none: null,
threeTone: threeTone,
fiveTone: fiveTone
};
} )();
var envMapKeys = getObjectsKeys( envMaps );
var diffuseMapKeys = getObjectsKeys( diffuseMaps );
var roughnessMapKeys = getObjectsKeys( roughnessMaps );
var matcapKeys = getObjectsKeys( matcaps );
var alphaMapKeys = getObjectsKeys( alphaMaps );
var gradientMapKeys = getObjectsKeys( gradientMaps );
function generateVertexColors( geometry ) {
var positionAttribute = geometry.attributes.position;
var colors = [];
var color = new THREE.Color();
for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
color.setHSL( i / il * Math.random(), 0.5, 0.5 );
colors.push( color.r, color.g, color.b );
}
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
}
function handleColorChange( color ) {
return function ( value ) {
if ( typeof value === 'string' ) {
value = value.replace( '#', '0x' );
}
color.setHex( value );
};
}
function needsUpdate( material, geometry ) {
return function () {
material.vertexColors = parseInt( material.vertexColors ); //Ensure number
material.side = parseInt( material.side ); //Ensure number
material.needsUpdate = true;
geometry.attributes.position.needsUpdate = true;
geometry.attributes.normal.needsUpdate = true;
geometry.attributes.color.needsUpdate = true;
};
}
function updateTexture( material, materialKey, textures ) {
return function ( key ) {
material[ materialKey ] = textures[ key ];
material.needsUpdate = true;
};
}
function guiScene( gui, scene ) {
var folder = gui.addFolder( 'Scene' );
var data = {
background: '#000000',
'ambient light': ambientLight.color.getHex()
};
var color = new THREE.Color();
var colorConvert = handleColorChange( color );
folder.addColor( data, 'background' ).onChange( function ( value ) {
colorConvert( value );
renderer.setClearColor( color.getHex() );
} );
folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
guiSceneFog( folder, scene );
}
function guiSceneFog( folder, scene ) {
var fogFolder = folder.addFolder( 'scene.fog' );
var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
var data = {
fog: {
'THREE.Fog()': false,
'scene.fog.color': fog.color.getHex()
}
};
fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
if ( useFog ) {
scene.fog = fog;
} else {
scene.fog = null;
}
} );
fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
}
function guiMaterial( gui, mesh, material, geometry ) {
var folder = gui.addFolder( 'THREE.Material' );
folder.add( material, 'transparent' );
folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
// 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', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'visible' );
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
}
function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
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, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
folder.add( material, 'combine', constants.combine );
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'refractionRatio', 0, 1 );
}
function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
var data = {
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
var folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
}
function guiLineBasicMaterial( gui, mesh, material, geometry ) {
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 ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
}
function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
folder.add( material, 'combine', constants.combine );
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'refractionRatio', 0, 1 );
}
function guiMeshMatcapMaterial( gui, mesh, material ) {
var data = {
color: material.color.getHex(),
matcap: matcapKeys[ 1 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
specular: material.specular.getHex(),
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
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, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshToonMaterial( gui, mesh, material ) {
var data = {
color: material.color.getHex(),
map: diffuseMapKeys[ 0 ],
gradientMap: gradientMapKeys[ 1 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
}
function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
roughnessMap: roughnessMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
folder.add( material, 'roughness', 0, 1 );
folder.add( material, 'metalness', 0, 1 );
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
// TODO metalnessMap
}
function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
var data = {
color: material.color.getHex(),
emissive: material.emissive.getHex(),
envMaps: envMapKeys[ 0 ],
map: diffuseMapKeys[ 0 ],
roughnessMap: roughnessMapKeys[ 0 ],
alphaMap: alphaMapKeys[ 0 ]
};
var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
folder.add( material, 'roughness', 0, 1 );
folder.add( material, 'metalness', 0, 1 );
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'clearCoat', 0, 1 ).step( 0.01 );
folder.add( material, 'clearCoatRoughness', 0, 1 ).step( 0.01 );
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
// TODO metalnessMap
}
function chooseFromHash( gui, mesh, geometry ) {
var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
var material;
switch ( selectedMaterial ) {
case 'MeshBasicMaterial' :
material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshBasicMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshLambertMaterial' :
material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshLambertMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshMatcapMaterial' :
material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
guiMaterial( gui, mesh, material, geometry );
guiMeshMatcapMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshPhongMaterial' :
material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshPhongMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshToonMaterial' :
material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
guiMaterial( gui, mesh, material, geometry );
guiMeshToonMaterial( gui, mesh, material, geometry );
// only use a single point light
lights[ 0 ].visible = false;
lights[ 2 ].visible = false;
return material;
break;
case 'MeshStandardMaterial' :
material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshStandardMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshPhysicalMaterial' :
material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshPhysicalMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshDepthMaterial' :
material = new THREE.MeshDepthMaterial();
guiMaterial( gui, mesh, material, geometry );
guiMeshDepthMaterial( gui, mesh, material, geometry );
return material;
break;
case 'MeshNormalMaterial' :
material = new THREE.MeshNormalMaterial();
guiMaterial( gui, mesh, material, geometry );
guiMeshNormalMaterial( gui, mesh, material, geometry );
return material;
break;
case 'LineBasicMaterial' :
material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiLineBasicMaterial( gui, mesh, material, geometry );
return material;
break;
}
}
docs/scenes/material-browser.html
浏览文件 @ b9a03044
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或