Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 eb1f42ed 编写于 作者: L Lewy Blue
浏览文件
操作

Refactor cubemap example

上级 38162cc2
展开全部 隐藏空白更改
内联 并排
Showing with 61 addition and 32653 deletion
examples/obj/walt/.htaccess 已删除 100644 → 0
浏览文件 @ 38162cc2
<Files *.js>
SetOutputFilter DEFLATE
</Files>
<Files *.bin>
SetOutputFilter DEFLATE
</Files>
examples/obj/walt/WaltHead.mtl 已删除 100644 → 0
浏览文件 @ 38162cc2
# Material Count: 1
newmtl lambert2SG.001
Ns 92.156863
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.250000 0.250000 0.250000
Ni 1.000000
d 1.000000
illum 2
examples/obj/walt/WaltHead.obj 已删除 100644 → 0
浏览文件 @ 38162cc2
此差异已折叠。
examples/obj/walt/WaltHead_bin.js 已删除 100644 → 0
浏览文件 @ 38162cc2
{
"metadata" :
{
"formatVersion" : 3.1,
"sourceFile" : "WaltHead.obj",
"generatedBy" : "OBJConverter",
"vertices" : 8146,
"faces" : 16160,
"normals" : 8146,
"uvs" : 0,
"materials" : 1
},
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "lambert2SG.001",
"colorDiffuse" : [0.64, 0.64, 0.64],
"colorSpecular" : [0.25, 0.25, 0.25],
"illumination" : 2,
"opticalDensity" : 1.0,
"specularCoef" : 92.156863,
"opacity" : 1.0
}],
"buffers": "WaltHead_bin.bin"
}
examples/obj/walt/WaltHead_slim.js 已删除 100644 → 0
浏览文件 @ 38162cc2
此差异已折叠。
examples/webgl_materials_cubemap.html
浏览文件 @ eb1f42ed
...@@ -6,38 +6,39 @@ ...@@ -6,38 +6,39 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style> <style>
body { body {
background:#000; font-family: Monospace;
color:#fff; margin: 0px;
padding:0; overflow: hidden;
margin:0; }
overflow:hidden; #info {
font-family:georgia; color: #fff;
text-align:center; position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a {
color: #ff0080;
font-weight: bold;
} }
a { color: #ff0080; text-decoration: none; }
a:hover { color: #0080ff; }
canvas { pointer-events:none; z-index:10; }
#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
#oldie { margin-top:11em !important }
</style> </style>
</head> </head>
<body> <body>
<div id="d">
<p><a href="http://threejs.org">Three.js</a> cube mapping demo
<p>Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a> <div id="container"></div>
<p>Texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> <div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - cube mapping demo.<br />
Texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
</div> </div>
<script src="../build/three.js"></script> <script src="../build/three.js"></script>
<script src="js/loaders/BinaryLoader.js"></script> <script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/Detector.js"></script> <script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script> <script src="js/libs/stats.min.js"></script>
...@@ -52,18 +53,8 @@ ...@@ -52,18 +53,8 @@
var mesh, geometry; var mesh, geometry;
var loader;
var pointLight; var pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener('mousemove', onDocumentMouseMove, false);
init(); init();
animate(); animate();
...@@ -75,8 +66,14 @@ ...@@ -75,8 +66,14 @@
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 ); camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 2000; camera.position.z = 2000;
// //controls
var controls = new THREE.OrbitControls( camera );
controls.enableZoom = false;
controls.enablePan = false;
controls.minPolarAngle = Math.PI / 4;
controls.maxPolarAngle = Math.PI / 1.5;
//cubemap
var path = "textures/cube/SwedishRoyalCastle/"; var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg'; var format = '.jpg';
var urls = [ var urls = [
...@@ -88,62 +85,65 @@ ...@@ -88,62 +85,65 @@
var reflectionCube = new THREE.CubeTextureLoader().load( urls ); var reflectionCube = new THREE.CubeTextureLoader().load( urls );
reflectionCube.format = THREE.RGBFormat; reflectionCube.format = THREE.RGBFormat;
var refractionCube = new THREE.CubeTextureLoader().load( urls );
refractionCube.mapping = THREE.CubeRefractionMapping;
refractionCube.format = THREE.RGBFormat;
scene = new THREE.Scene(); scene = new THREE.Scene();
scene.background = reflectionCube; scene.background = reflectionCube;
// LIGHTS //lights
var ambient = new THREE.AmbientLight( 0xffffff ); var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient ); scene.add( ambient );
pointLight = new THREE.PointLight( 0xffffff, 2 ); pointLight = new THREE.PointLight( 0xffffff, 2 );
scene.add( pointLight ); scene.add( pointLight );
// light representation //materials
var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
var sphere = new THREE.SphereGeometry( 100, 16, 8 ); //models
var objLoader = new THREE.OBJLoader();
var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ); objLoader.setPath( 'models/obj/walt/' );
mesh.scale.set( 0.05, 0.05, 0.05 ); objLoader.load( 'WaltHead.obj', function ( object ) {
pointLight.add( mesh );
var refractionCube = new THREE.CubeTextureLoader().load( urls ); var head = object.children[0];
refractionCube.mapping = THREE.CubeRefractionMapping;
refractionCube.format = THREE.RGBFormat;
//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.25 } ); head.scale.multiplyScalar( 15 );
var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } ); head.position.y = -500;
var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } ); head.material = cubeMaterial1;
var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
var head2 = head.clone();
head2.position.x = - 900;
head2.material = cubeMaterial2;
var head3 = head.clone();
head3.position.x = 900;
head3.material = cubeMaterial3;
// scene.add( head, head2, head3 )
} );
//renderer
renderer = new THREE.WebGLRenderer(); renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio ); renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement ); container.appendChild( renderer.domElement );
// //stats
stats = new Stats(); stats = new Stats();
container.appendChild( stats.dom ); container.appendChild( stats.dom );
//
loader = new THREE.BinaryLoader();
loader.load( "obj/walt/WaltHead_bin.js", function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } );
//
window.addEventListener( 'resize', onWindowResize, false ); window.addEventListener( 'resize', onWindowResize, false );
} }
function onWindowResize() { function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
...@@ -151,60 +151,16 @@ ...@@ -151,60 +151,16 @@
} }
function createScene( geometry, m1, m2, m3 ) {
var s = 15;
var mesh = new THREE.Mesh( geometry, m1 );
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry, m2 );
mesh.position.x = - 900;
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry, m3 );
mesh.position.x = 900;
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 4;
mouseY = ( event.clientY - windowHalfY ) * 4;
}
//
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
render(); render();
stats.update();
} }
function render() { function render() {
var timer = -0.0002 * Date.now();
pointLight.position.x = 1500 * Math.cos( timer );
pointLight.position.z = 1500 * Math.sin( timer );
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera ); renderer.render( scene, camera );
stats.update();
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或