Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 4bd448af 编写于 作者: M Mugen87
浏览文件
操作

Water: Added flow map example

上级 053c6dab
隐藏空白更改
内联 并排
Showing with 170 addition and 8 deletion
examples/files.js
浏览文件 @ 4bd448af
......@@ -257,7 +257,8 @@ var files = {
"webgl_tonemapping",
"webgl_trails",
"webgl_video_panorama_equirectangular",
"webgl_water"
"webgl_water",
"webgl_water_flowmap"
],
"webgl / advanced": [
"webgl_buffergeometry",
......
examples/js/objects/Water2.js
浏览文件 @ 4bd448af
......@@ -17,7 +17,7 @@ THREE.Water = function ( width, height, options ) {
options = options || {};
var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0xFFFFFF );
var textureWidth = options.textureWidth || 512;
var textureHeight = options.textureHeight || 512;
var clipBias = options.clipBias || 0;
......
examples/webgl_water.html
浏览文件 @ 4bd448af
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js water</title>
<title>three.js - water</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -42,7 +42,7 @@
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> water
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - water
</div>
<script>
......@@ -72,7 +72,7 @@
// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 10, 7, 15 );
camera.position.set( - 15, 7, 15 );
camera.lookAt( scene.position );
// clock
......@@ -89,14 +89,15 @@
torusKnot.scale.set( 0.5, 0.5, 0.5 );
scene.add( torusKnot );
var textureLoader = new THREE.TextureLoader();
// ground
var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
var groundMaterial = new THREE.MeshStandardMaterial( { roughness: 0.7 } );
var groundMaterial = new THREE.MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
var ground = new THREE.Mesh( groundGeometry, groundMaterial );
ground.rotation.x = Math.PI * - 0.5;
scene.add( ground );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( 'textures/hardwood2_diffuse.jpg', function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
......@@ -150,7 +151,7 @@
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
directionalLight.position.set( 1, 1, - 1 );
directionalLight.position.set( - 1, 1, 1 );
scene.add( directionalLight );
// renderer
......
examples/webgl_water_flowmap.html 0 → 100644
浏览文件 @ 4bd448af
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - water flow map</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:#777;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
}
a {
color: #ffffff;
}
</style>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/objects/Mirror.js"></script>
<script src="js/objects/Refractor.js"></script>
<script src="js/objects/Water2.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - water flow map
</div>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var scene, camera, renderer, water;
init();
animate();
function init() {
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 25, 0 );
camera.lookAt( scene.position );
// ground
var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20, 10, 10 );
var groundMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );
var ground = new THREE.Mesh( groundGeometry, groundMaterial );
ground.rotation.x = Math.PI * - 0.5;
scene.add( ground );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
map.repeat.set( 4, 4 );
groundMaterial.map = map;
groundMaterial.needsUpdate = true;
} );
// water
var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
water = new THREE.Water( 20, 20, {
scale: 2,
textureWidth: 1024,
textureHeight: 1024,
flowMap: flowMap
} );
water.position.y = 1;
water.rotation.x = Math.PI * - 0.5;
scene.add( water );
// flow map helper
var helperGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
var helperMaterial = new THREE.MeshBasicMaterial( { map: flowMap } );
var helper = new THREE.Mesh( helperGeometry, helperMaterial );
helper.position.y = 1.01;
helper.rotation.x = Math.PI * - 0.5;
helper.visible = false;
scene.add( helper );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
//
var gui = new dat.GUI();
gui.add( helper, 'visible' ).name( 'Show Flow Map');
gui.open();
//
controls = new THREE.OrbitControls( camera, renderer.domElement );
//
window.addEventListener( 'resize', onResize, false );
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或