three.js学习 函数使用方法散记4

时间:2022-02-20 04:50:56

三十八 合并geometry

THREE.GeometryUtils.merge( geometry, geometry2 );


三十九 三维立体效果  (红蓝眼镜)


<script src="js/effects/AnaglyphEffect.js"></script>
effect = new THREE.AnaglyphEffect( renderer );//穿入renderer为参数
effect.setSize( width, height );
//渲染里 effect.render(scene,camera); 取代renderer.render(scene,camera)


四十 球体纹理效果

var urls = [
					path + 'px' + format, path + 'nx' + format,
					path + 'py' + format, path + 'ny' + format,
					path + 'pz' + format, path + 'nz' + format
				];


折射效果

var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );

金属球体反射效果(无效果)

var textureCube = THREE.ImageUtils.loadTextureCube( urls );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );

oculus效果

effect = new THREE.OculusRiftEffect( renderer, {worldScale: 100} );

裸眼3d效果

effect = new THREE.ParallaxBarrierEffect( renderer );


四十一    一种弯曲的圆柱面geometry 只用传入连串点数组 该类将点连成线  然后绕一条轴旋转成圆柱面 弯曲的

var points = [];

				for ( var i = 0; i < 150; i ++ ) {

					points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );

				}
				//console.log(points);
				object = new THREE.Mesh( new THREE.LatheGeometry( points, 20/*这个参数是圆柱面的slice数*/ ), material );
				object.position.set( -400, 0, -200 );
				scene.add( object );

四十二  设置面的颜色

1可以通过设置geometry.faces[i].vertexColors[j] = three.color (如果faces是face3 则j = 0->2  如果face是face4 则j=0->3)

2通过json描述颜色的变化 然后通过three.jsonloader.load( url, callback/*返回geometry and material*/ );

callback(geomerty , materials)

{ mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );  }

四十三   生成随机点的圆 

points.push( randomPointInSphere( 50 ) );//再把数组传进convexgeometry


四十四  怎么又画颜色又画wireframe?

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.3, transparent: true } ) ] );

返回的应该是一个mesh



<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">三十七 particalsystem</span>


var geometry = new THREE.BufferGeometry();
var material = new THREE.ParticleSystemMaterial( { size: 100, vertexColors: true } );
particleSystem = new THREE.ParticleSystem( geometry, material );

三十八 合并geometry

THREE.GeometryUtils.merge( geometry, geometry2 );


三十九 三维立体效果  (红蓝眼镜)


<script src="js/effects/AnaglyphEffect.js"></script>
effect = new THREE.AnaglyphEffect( renderer );//穿入renderer为参数
effect.setSize( width, height );
//渲染里 effect.render(scene,camera); 取代renderer.render(scene,camera)


四十 球体纹理效果

var urls = [
					path + 'px' + format, path + 'nx' + format,
					path + 'py' + format, path + 'ny' + format,
					path + 'pz' + format, path + 'nz' + format
				];


折射效果

var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );

金属球体反射效果(无效果)

var textureCube = THREE.ImageUtils.loadTextureCube( urls );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );

oculus效果

effect = new THREE.OculusRiftEffect( renderer, {worldScale: 100} );

裸眼3d效果

effect = new THREE.ParallaxBarrierEffect( renderer );


四十一    一种弯曲的圆柱面geometry 只用传入连串点数组 该类将点连成线  然后绕一条轴旋转成圆柱面 弯曲的

var points = [];

				for ( var i = 0; i < 150; i ++ ) {

					points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );

				}
				//console.log(points);
				object = new THREE.Mesh( new THREE.LatheGeometry( points, 20/*这个参数是圆柱面的slice数*/ ), material );
				object.position.set( -400, 0, -200 );
				scene.add( object );

四十二  设置面的颜色

1可以通过设置geometry.faces[i].vertexColors[j] = three.color (如果faces是face3 则j = 0->2  如果face是face4 则j=0->3)

2通过json描述颜色的变化 然后通过three.jsonloader.load( url, callback/*返回geometry and material*/ );

callback(geomerty , materials)

{ mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );  }

四十三   生成随机点的圆 

points.push( randomPointInSphere( 50 ) );//再把数组传进convexgeometry


四十四  怎么又画颜色又画wireframe?

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.3, transparent: true } ) ] );

返回的应该是一个mesh