Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Added MeshStandardMaterial example.

上级 a455e248
展开全部 隐藏空白更改
内联 并排
Showing with 70500 addition and 0 deletion
examples/files.js
浏览文件 @ ebd36999
......@@ -126,6 +126,7 @@ var files = {
"webgl_materials_parallaxmap",
"webgl_materials_shaders_fresnel",
"webgl_materials_skin",
"webgl_materials_standard",
"webgl_materials_texture_anisotropy",
"webgl_materials_texture_compressed",
"webgl_materials_texture_filters",
......
examples/models/obj/cerberus/Cerberus.obj 0 → 100644
浏览文件 @ ebd36999
此差异已折叠。
examples/webgl_materials_standard.html 0 → 100644
浏览文件 @ ebd36999
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - pyhsical</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#000;
color:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
a { color: #ffffff; }
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
z-index:1000;
}
#oldie {
background:rgb(200,100,0) !important;
color:#fff;
}
#vt { display:none }
#vt, #vt a { color:orange; }
#stats { position: absolute; top:0; left: 0 }
#stats #fps { background: transparent !important }
#stats #fps #fpsText { color: #aaa !important }
#stats #fps #fpsGraph { display: none }
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - webgl physically based material - <a href="http://www.polycount.com/forum/showthread.php?t=130641" target="_blank">Cerberus(FFVII Gun) model</a> by Andrew Maximov.
</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var statsEnabled = true;
var container, stats, loader;
var camera, scene, renderer;
var cameraCube, sceneCube;
var controls;
var mesh;
var spotLight;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
//
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 2;
controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
sceneCube.add( cameraCube );
// LIGHTS
scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );
// scene.add( new THREE.AmbientLight( 0xffffff ) );
//
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );
var textureCube = loader.load( [
"px.png", "nx.png",
"py.png", "ny.png",
"pz.png", "nz.png"
] );
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
sceneCube.add( mesh );
//
var path = 'models/obj/cerberus/';
var loader = new THREE.OBJLoader();
loader.load( path + 'Cerberus.obj', function ( group ) {
// var material = new THREE.MeshBasicMaterial( { wireframe: true } );
var material = new THREE.MeshStandardMaterial();
var loader = new THREE.TextureLoader();
material.roughness = 1;
material.metalness = 1;
material.map = loader.load( path + 'Cerberus_A.jpg' );
material.roughnessMap = loader.load( path + 'Cerberus_R.jpg' );
material.metalnessMap = loader.load( path + 'Cerberus_M.jpg' );
material.normalMap = loader.load( path + 'Cerberus_N.jpg' );
material.envMap = textureCube;
material.map.wrapS = THREE.RepeatWrapping;
material.roughnessMap.wrapS = THREE.RepeatWrapping;
material.metalnessMap.wrapS = THREE.RepeatWrapping;
material.normalMap.wrapS = THREE.RepeatWrapping;
group.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
} );
group.position.x = - 0.45;
group.rotation.y = - Math.PI / 2;
scene.add( group );
} );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x202020 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.autoClear = false;
renderer.gammaInput = true;
renderer.gammaOutput = true;
//
if ( statsEnabled ) {
stats = new Stats();
container.appendChild( stats.domElement );
}
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
//
function animate() {
requestAnimationFrame( animate );
controls.update();
cameraCube.quaternion.copy( camera.quaternion );
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
if ( statsEnabled ) stats.update();
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或