如何改变这三张.js脸的颜色
How to change the color of these three.js faces?
我正在使用飞鸟对象的示例脚本。但是我如何改变鸟的颜色呢?我尝试在实例化鸟类的这一行上更改它:
bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:/*Math.random() *0xffffff*/ 0x54A1D8, side: THREE.DoubleSide } ) );
但它没有改变...
鸟.js
var Bird = function () {
var scope = this;
THREE.Geometry.call( this );
v( 5, 0, 0 );
v( - 5, - 2, 1 );
v( - 5, 0, 0 );
v( - 5, - 2, - 1 );
v( 0, 2, - 6 );
v( 0, 2, 6 );
v( 2, 0, 0 );
v( - 3, 0, 0 );
f3( 0, 2, 1 );
// f3( 0, 3, 2 );
f3( 4, 7, 6 );
f3( 5, 6, 7 );
this.computeCentroids();
this.computeFaceNormals();
function v( x, y, z ) {
scope.vertices.push( new THREE.Vector3( x, y, z ) );
}
function f3( a, b, c ) {
scope.faces.push( new THREE.Face3( a, b, c ) );
}
}
Bird.prototype = Object.create( THREE.Geometry.prototype );
主脚本
<script>
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2,
SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;
var camera, scene, renderer,
birds, bird;
var boid, boids;
var stats;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 450;
scene = new THREE.Scene();
birds = [];
boids = [];
for ( var i = 0; i < 200; i ++ ) {
boid = boids[ i ] = new Boid();
boid.position.x = Math.random() * 400 - 200;
boid.position.y = Math.random() * 400 - 200;
boid.position.z = Math.random() * 400 - 200;
boid.velocity.x = Math.random() * 2 - 1;
boid.velocity.y = Math.random() * 2 - 1;
boid.velocity.z = Math.random() * 2 - 1;
boid.setAvoidWalls( true );
boid.setWorldSize( 500, 500, 400 );
bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color:/*Math.random() *0xffffff*/ 0x54A1D8, side: THREE.DoubleSide } ) );
bird.phase = Math.floor( Math.random() * 62.83 );
bird.position = boids[ i ].position;
scene.add( bird );
}
renderer = new THREE.CanvasRenderer();
// renderer.autoClear = false;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.addEventListener('click', triggerPlay, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.body.appendChild( renderer.domElement );
/*stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById( 'container' ).appendChild(stats.domElement);
//
window.addEventListener( 'resize', onWindowResize, false );
*/
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );
for ( var i = 0, il = boids.length; i < il; i++ ) {
boid = boids[ i ];
vector.z = boid.position.z;
boid.repulse( vector );
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
//stats.update();
}
function render() {
for ( var i = 0, il = birds.length; i < il; i++ ) {
boid = boids[ i ];
boid.run( boids );
bird = birds[ i ];
color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );
bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 ) ) % 62.83;
bird.geometry.vertices[ 5 ].y = bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;
}
renderer.render( scene, camera );
}
</script>
在渲染循环中设置颜色以模拟雾。
color = bird.material.color;
color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
相关文章:
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 三js黑色材质,透明
- 三js浏览器兼容性
- 在数组JS中查找三个重复项
- 如何在three.js中加载指定文件内容而非路径的三维模型
- 如何从三张图片中选择一张?其余的必须是看不见的
- 三个js键盘旋转
- 三.js - 自 r69 以来如何链接/添加相机灯
- 如何改变这三张.js脸的颜色
- 三.js:在立方体贴图中仅更改一张脸的图像
- 三.js 三的错误.对象加载器
- JS语法问题还是使用三个.js三个.循环中的图像加载器
- 三张图片的jquery组合
- 我想创建一个视差滚动网站的三张图片,但只有两个卷轴工作
- Bookshelf.js渴望装载第三张桌子
- 猫头鹰旋转木马,带三张同步幻灯片
- flexslider的WP选项卡不会播放接下来的第二和第三张幻灯片