Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

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

Docs: Simplified imports in material browser.

上级 412b99a7
隐藏空白更改
内联 并排
Showing with 68 addition and 100 deletion
docs/scenes/material-browser.html
浏览文件 @ 5a51f73e
......@@ -26,97 +26,65 @@
<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
<script type="module">
import {
AdditiveBlending, CustomBlending, MultiplyBlending, NormalBlending, NoBlending, SubtractiveBlending,
AddEquation, ReverseSubtractEquation, SubtractEquation,
AddOperation, MixOperation, MultiplyOperation,
AmbientLight,
Color,
CubeTextureLoader,
CubeRefractionMapping,
DoubleSide, FrontSide, BackSide,
DstAlphaFactor, DstColorFactor, OneFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, ZeroFactor,
Float32BufferAttribute,
Fog,
LineBasicMaterial,
Mesh,
MeshBasicMaterial,
MeshDepthMaterial,
MeshLambertMaterial,
MeshMatcapMaterial,
MeshNormalMaterial,
MeshPhongMaterial,
MeshPhysicalMaterial,
MeshStandardMaterial,
MeshToonMaterial,
NearestFilter,
PerspectiveCamera,
PointLight,
RepeatWrapping,
RGBFormat,
Scene,
TextureLoader,
TorusKnotGeometry,
WebGLRenderer
} from "../../build/three.module.js";
import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
import * as THREE from '../../build/three.module.js';
import * as DAT from '../../examples/jsm/libs/dat.gui.module.js';
const constants = {
combine: {
'THREE.MultiplyOperation': MultiplyOperation,
'THREE.MixOperation': MixOperation,
'THREE.AddOperation': AddOperation
'THREE.MultiplyOperation': THREE.MultiplyOperation,
'THREE.MixOperation': THREE.MixOperation,
'THREE.AddOperation': THREE.AddOperation
},
side: {
'THREE.FrontSide': FrontSide,
'THREE.BackSide': BackSide,
'THREE.DoubleSide': DoubleSide
'THREE.FrontSide': THREE.FrontSide,
'THREE.BackSide': THREE.BackSide,
'THREE.DoubleSide': THREE.DoubleSide
},
blendingMode: {
'THREE.NoBlending': NoBlending,
'THREE.NormalBlending': NormalBlending,
'THREE.AdditiveBlending': AdditiveBlending,
'THREE.SubtractiveBlending': SubtractiveBlending,
'THREE.MultiplyBlending': MultiplyBlending,
'THREE.CustomBlending': CustomBlending
'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': AddEquation,
'THREE.SubtractEquation': SubtractEquation,
'THREE.ReverseSubtractEquation': ReverseSubtractEquation
'THREE.AddEquation': THREE.AddEquation,
'THREE.SubtractEquation': THREE.SubtractEquation,
'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation
},
destinationFactors: {
'THREE.ZeroFactor': ZeroFactor,
'THREE.OneFactor': OneFactor,
'THREE.SrcColorFactor': SrcColorFactor,
'THREE.OneMinusSrcColorFactor': OneMinusSrcColorFactor,
'THREE.SrcAlphaFactor': SrcAlphaFactor,
'THREE.OneMinusSrcAlphaFactor': OneMinusSrcAlphaFactor,
'THREE.DstAlphaFactor': DstAlphaFactor,
'THREE.OneMinusDstAlphaFactor': OneMinusDstAlphaFactor
'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': DstColorFactor,
'THREE.OneMinusDstColorFactor': OneMinusDstColorFactor,
'THREE.SrcAlphaSaturateFactor': SrcAlphaSaturateFactor
'THREE.DstColorFactor': THREE.DstColorFactor,
'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
}
......@@ -140,8 +108,8 @@
}
const textureLoader = new TextureLoader();
const cubeTextureLoader = new CubeTextureLoader();
const textureLoader = new THREE.TextureLoader();
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMaps = ( function () {
......@@ -154,11 +122,11 @@
];
const reflectionCube = cubeTextureLoader.load( urls );
reflectionCube.format = RGBFormat;
reflectionCube.format = THREE.RGBFormat;
const refractionCube = cubeTextureLoader.load( urls );
refractionCube.mapping = CubeRefractionMapping;
refractionCube.format = RGBFormat;
refractionCube.mapping = THREE.CubeRefractionMapping;
refractionCube.format = THREE.RGBFormat;
return {
none: null,
......@@ -171,8 +139,8 @@
const diffuseMaps = ( function () {
const bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
bricks.wrapS = RepeatWrapping;
bricks.wrapT = RepeatWrapping;
bricks.wrapS = THREE.RepeatWrapping;
bricks.wrapT = THREE.RepeatWrapping;
bricks.repeat.set( 9, 1 );
return {
......@@ -185,8 +153,8 @@
const roughnessMaps = ( function () {
const bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
bricks.wrapT = RepeatWrapping;
bricks.wrapS = RepeatWrapping;
bricks.wrapT = THREE.RepeatWrapping;
bricks.wrapS = THREE.RepeatWrapping;
bricks.repeat.set( 9, 1 );
return {
......@@ -208,8 +176,8 @@
const alphaMaps = ( function () {
const fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
fibers.wrapT = RepeatWrapping;
fibers.wrapS = RepeatWrapping;
fibers.wrapT = THREE.RepeatWrapping;
fibers.wrapS = THREE.RepeatWrapping;
fibers.repeat.set( 9, 1 );
return {
......@@ -222,12 +190,12 @@
const gradientMaps = ( function () {
const threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
threeTone.minFilter = NearestFilter;
threeTone.magFilter = NearestFilter;
threeTone.minFilter = THREE.NearestFilter;
threeTone.magFilter = THREE.NearestFilter;
const fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
fiveTone.minFilter = NearestFilter;
fiveTone.magFilter = NearestFilter;
fiveTone.minFilter = THREE.NearestFilter;
fiveTone.magFilter = THREE.NearestFilter;
return {
none: null,
......@@ -249,7 +217,7 @@
const positionAttribute = geometry.attributes.position;
const colors = [];
const color = new Color();
const color = new THREE.Color();
for ( let i = 0, il = positionAttribute.count; i < il; i ++ ) {
......@@ -258,7 +226,7 @@
}
geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
}
......@@ -334,7 +302,7 @@
const fogFolder = folder.addFolder( 'scene.fog' );
const fog = new Fog( 0x3f7b9d, 0, 60 );
const fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
const data = {
fog: {
......@@ -623,7 +591,7 @@
case 'MeshBasicMaterial' :
material = new MeshBasicMaterial( { color: 0x2194CE } );
material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshBasicMaterial( gui, mesh, material, geometry );
......@@ -633,7 +601,7 @@
case 'MeshLambertMaterial' :
material = new MeshLambertMaterial( { color: 0x2194CE } );
material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshLambertMaterial( gui, mesh, material, geometry );
......@@ -643,7 +611,7 @@
case 'MeshMatcapMaterial' :
material = new MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
guiMaterial( gui, mesh, material, geometry );
guiMeshMatcapMaterial( gui, mesh, material, geometry );
......@@ -653,7 +621,7 @@
case 'MeshPhongMaterial' :
material = new MeshPhongMaterial( { color: 0x2194CE } );
material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshPhongMaterial( gui, mesh, material, geometry );
......@@ -663,7 +631,7 @@
case 'MeshToonMaterial' :
material = new MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
guiMaterial( gui, mesh, material, geometry );
guiMeshToonMaterial( gui, mesh, material, geometry );
......@@ -678,7 +646,7 @@
case 'MeshStandardMaterial' :
material = new MeshStandardMaterial( { color: 0x2194CE } );
material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshStandardMaterial( gui, mesh, material, geometry );
......@@ -688,7 +656,7 @@
case 'MeshPhysicalMaterial' :
material = new MeshPhysicalMaterial( { color: 0x2194CE } );
material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiMeshPhysicalMaterial( gui, mesh, material, geometry );
......@@ -698,7 +666,7 @@
case 'MeshDepthMaterial' :
material = new MeshDepthMaterial();
material = new THREE.MeshDepthMaterial();
guiMaterial( gui, mesh, material, geometry );
guiMeshDepthMaterial( gui, mesh, material, geometry );
......@@ -708,7 +676,7 @@
case 'MeshNormalMaterial' :
material = new MeshNormalMaterial();
material = new THREE.MeshNormalMaterial();
guiMaterial( gui, mesh, material, geometry );
guiMeshNormalMaterial( gui, mesh, material, geometry );
......@@ -718,7 +686,7 @@
case 'LineBasicMaterial' :
material = new LineBasicMaterial( { color: 0x2194CE } );
material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
guiMaterial( gui, mesh, material, geometry );
guiLineBasicMaterial( gui, mesh, material, geometry );
......@@ -734,26 +702,26 @@
document.getElementById( 'newWindow' ).href += window.location.hash;
const gui = new GUI();
const gui = new DAT.GUI();
const scene = new Scene();
scene.background = new Color( 0x444444 );
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x444444 );
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
camera.position.z = 30;
const renderer = new WebGLRenderer( { antialias: true } );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const ambientLight = new AmbientLight( 0x000000 );
const ambientLight = new THREE.AmbientLight( 0x000000 );
scene.add( ambientLight );
const lights = [];
lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
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 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
......@@ -765,12 +733,12 @@
guiScene( gui, scene, camera );
let geometry = new TorusKnotGeometry( 10, 3, 100, 16 );
let geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
geometry = geometry.toNonIndexed();
generateVertexColors( geometry );
const mesh = new Mesh( geometry );
const mesh = new THREE.Mesh( geometry );
mesh.material = chooseFromHash( gui, mesh, geometry );
scene.add( mesh );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或