Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Merge pull request #13563 from XanderLuciano/dev 

EXAMPLES: Combine WebGL Lines Colors and Splines
上级 84bdd96e 6310a6a7
隐藏空白更改
内联 并排
Showing with 89 addition and 321 deletion
examples/webgl_lines_colors.html
浏览文件 @ d702c8f0
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lines - cubes - colors</title>
<title>three.js webgl - lines - colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -40,7 +40,7 @@
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - color lines WebGL demo
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - colors WebGL demo
[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
</div>
......@@ -48,31 +48,18 @@
<script src="js/geometries/hilbert3D.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var effectFXAA;
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer, material, composer;
camera, scene, renderer, material;
init();
animate();
......@@ -85,56 +72,109 @@
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 700;
camera.position.z = 1000;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
var geometry = new THREE.Geometry(),
var hilbertPoints = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
// Colors with BufferGeometry
var buffGeometry0 = new THREE.BufferGeometry(),
buffGeometry1 = new THREE.BufferGeometry(),
buffGeometry2 = new THREE.BufferGeometry();
var subdivisions = 6;
var position = [],
colorArray0 = [],
colorArray1 = [],
colorArray2 = [];
var point = new THREE.Vector3();
var color = new THREE.Color();
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
for ( i = 0; i < hilbertPoints.length * subdivisions; i++ ) {
var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );
position.push( point.x, point.y, point.z );
color.setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
colorArray0.push( color.r, color.g, color.b );
color.setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
colorArray1.push( color.r, color.g, color.b );
color.setHSL( i / ( hilbertPoints.length * subdivisions ), 1.0, 0.5 );
colorArray2.push( color.r, color.g, color.b );
}
buffGeometry0.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
buffGeometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
buffGeometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
buffGeometry0.addAttribute( 'color', new THREE.Float32BufferAttribute( colorArray0, 3 ) );
buffGeometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colorArray1, 3 ) );
buffGeometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colorArray2, 3 ) );
// Colors with Geometry
var geometry0 = new THREE.Geometry(),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry(),
points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
colors = [], colors2 = [], colors3 = [];
geometry3 = new THREE.Geometry();
for ( i = 0; i < points.length; i ++ ) {
var colors0 = [],
colors1 = [],
colors2 = [];
geometry.vertices.push( points[ i ] );
for ( i = 0; i < hilbertPoints.length; i++ ) {
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSL( 0.6, 1.0, Math.max( 0, ( 200 - points[ i ].x ) / 400 ) * 0.5 + 0.5 );
geometry0.vertices.push( hilbertPoints[ i ] );
colors2[ i ] = new THREE.Color( 0xffffff );
colors2[ i ].setHSL( 0.3, 1.0, Math.max( 0, ( 200 + points[ i ].x ) / 400 ) * 0.5 );
colors0[ i ] = new THREE.Color( 0xffffff );
colors0[ i ].setHSL( 0.6, 1.0, Math.max( 0, ( 200 - hilbertPoints[ i ].x ) / 400 ) * 0.5 + 0.5 );
colors3[ i ] = new THREE.Color( 0xffffff );
colors3[ i ].setHSL( i / points.length, 1.0, 0.5 );
colors1[ i ] = new THREE.Color( 0xffffff );
colors1[ i ].setHSL( 0.3, 1.0, Math.max( 0, ( 200 + hilbertPoints[ i ].x ) / 400 ) * 0.5 );
colors2[ i ] = new THREE.Color( 0xffffff );
colors2[ i ].setHSL( i / hilbertPoints.length, 1.0, 0.5 );
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
geometry2.vertices = geometry3.vertices = geometry0.vertices;
geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
geometry0.colors = colors0;
geometry2.colors = colors1;
geometry3.colors = colors2;
// lines
// Create lines and add to scene
material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line, p, scale = 0.3, d = 225;
var parameters = [
[ material, scale*1.5, [-d,0,0], geometry ],
[ material, scale*1.5, [0,0,0], geometry2 ],
[ material, scale*1.5, [d,0,0], geometry3 ]
[ material, scale * 1.5, [ - d, - d / 2, 0 ], buffGeometry0 ],
[ material, scale * 1.5, [ 0, - d / 2, 0 ], buffGeometry1 ],
[ material, scale * 1.5, [ d, - d / 2, 0 ], buffGeometry2 ],
[ material, scale * 1.5, [ - d, d / 2, 0 ], geometry0 ],
[ material, scale * 1.5, [ 0, d / 2, 0 ], geometry2 ],
[ material, scale * 1.5, [ d, d / 2, 0 ], geometry3 ],
];
for ( i = 0; i < parameters.length; ++i ) {
for ( i = 0; i < parameters.length; i++ ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
......@@ -146,40 +186,13 @@
}
//
stats = new Stats();
//container.appendChild( stats.dom );
//
// Input Event Listeners
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.3 );
var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
effectCopy.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectFXAA );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
// Resize Event Listener
window.addEventListener( 'resize', onWindowResize, false );
......@@ -195,10 +208,6 @@
renderer.setSize( window.innerWidth, window.innerHeight );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
composer.reset();
}
//
......@@ -207,7 +216,6 @@
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
......@@ -218,9 +226,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
......@@ -242,8 +248,6 @@
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
......@@ -258,12 +262,16 @@
for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.Line ) object.rotation.y = time * ( i % 2 ? 1 : -1 );
if ( object instanceof THREE.Line ) {
object.rotation.y = time * ( i % 2 ? 1 : -1 );
}
}
renderer.clear();
composer.render();
renderer.render( scene, camera );
}
......
examples/webgl_lines_splines.html 已删除 100644 → 0
浏览文件 @ 84bdd96e
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lines - splines</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-color: #000000;
margin: 0px;
overflow: hidden;
}
a {
color:#0078ff;
}
#info {
position: absolute;
top: 10px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
}
a {
color: orange;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - splines WebGL demo
[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
</div>
<script src="../build/three.js"></script>
<script src="js/geometries/hilbert3D.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer, material;
init();
animate();
function init() {
var i, container;
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 700;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var geometry0 = new THREE.BufferGeometry(),
geometry1 = new THREE.BufferGeometry(),
geometry2 = new THREE.BufferGeometry(),
points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var subdivisions = 6;
var position = [];
var color0 = [];
var color1 = [];
var color2 = [];
var point = new THREE.Vector3();
var color = new THREE.Color();
var spline = new THREE.CatmullRomCurve3( points );
for ( i = 0; i < points.length * subdivisions; i ++ ) {
var t = i / ( points.length * subdivisions );
spline.getPoint( t, point );
position.push( point.x, point.y, point.z );
color.setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
color0.push( color.r, color.g, color.b );
color.setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
color1.push( color.r, color.g, color.b );
color.setHSL( i / ( points.length * subdivisions ), 1.0, 0.5 );
color2.push( color.r, color.g, color.b );
}
geometry0.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
geometry0.addAttribute( 'color', new THREE.Float32BufferAttribute( color0, 3 ) );
geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( color1, 3 ) );
geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( color2, 3 ) );
// lines
material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line, p, scale = 0.3, d = 225;
var parameters = [
[ material, scale * 1.5, [ - d, 0, 0 ], geometry0 ],
[ material, scale * 1.5, [ 0, 0, 0 ], geometry1 ],
[ material, scale * 1.5, [ d, 0, 0 ], geometry2 ]
];
for ( i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
line.position.x = p[ 2 ][ 0 ];
line.position.y = p[ 2 ][ 1 ];
line.position.z = p[ 2 ][ 2 ];
scene.add( line );
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length > 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.lookAt( scene.position );
var time = Date.now() * 0.0005;
for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.Line ) {
object.rotation.y = time * ( i % 2 ? 1 : -1 );
}
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或