我已经在javascript中构建了一段代码。 现在我的屏幕上有一个对象。
这是我的javascript代码：
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_HEIGHT = window.innerHeight;
var SCREEN_WIDTH = window.innerWidth;
var container;
var camera, scene, renderer, mesh, directionalLight;
var parent, meshes = [], clonemeshes = [];
var p;
var aloader;
var composer, effectFocus;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 50000 );
camera.position.set( 0, 700, 7000 );
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );
camera.lookAt( scene.position );
var material = new THREE.MeshFaceMaterial( [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, opacity: 0.95 } ),
new THREE.MeshLambertMaterial( { color: 0xffffff } )
] );
//
aloader = new THREE.JSONLoader( );
//bloader = new THREE.BinaryLoader( true );
aloader.load( "obj/txtS.json", function( geometry ) {
createMesh( geometry, scene, 40.05, -400, -450, 440, 0xf00165, true );
} );
aloader.load( "obj/txtS.json", function( geometry ) {
createMesh( geometry, scene, 40.05, -400, -450, 440, 0x2a6208, true );
} );
aloader.load( "obj/txtS.json", function( geometry ) {
createMesh( geometry, scene, 40.05, -400, -450, 440, 0x2a6208, true );
} );
aloader.load( "obj/txtS.json", function( geometry ) {
createMesh( geometry, scene, 40.05, -400, -450, 440, 0x8968CD, true );
} );
aloader.load( "obj/txtS.json", function( geometry ) {
createMesh( geometry, scene, 40.05, -400, -450, 440, 0x0e4875, true );
} );
aloader.load( "obj/txtS.json", function( geometry ) {
createMesh( geometry, scene, 40.05, -400, -450, 440, 0x1cae8a, true );
});
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
parent = new THREE.Object3D();
scene.add( parent );
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.5 );
var effectFilm = new THREE.FilmPass( 0.75,0.75, 0, false );
effectFocus = new THREE.ShaderPass( THREE.FocusShader );
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
effectFocus.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
composer.addPass( effectFocus );
//
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
camera.lookAt( scene.position );
composer.reset();
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
}
//
function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
var i, c;
var vertices = originalGeometry.vertices;
var vl = vertices.length;
var geometry = new THREE.Geometry();
var vertices_tmp = [];
for ( i = 0; i < vl; i ++ ) {
p = vertices[ i ];
geometry.vertices[ i ] = p.clone();
vertices_tmp[ i ] = [ p.x, p.y, p.z, 0, 0 ];
}
var clones = [
[ 6000, 0, -4000 ],
[ 5000, 0, 0 ],
[ 1000, 0, 5000 ],
[ 1000, 0, -5000 ],
[ 4000, 0, 2000 ],
[ -4000, 0, 1000 ],
[ -5000, 0, -5000 ],
[ 0, 0, 0 ]
];
mesh = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { size:50, color: color } ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
parent.add( mesh );
//bloader.statusDomElement.style.display = "none";
// mesh break
meshes.push( {
mesh: mesh, vertices: geometry.vertices, vertices_tmp: vertices_tmp, vl: vl,
down: 0, up: 0, direction: 0, speed: 40, delay: Math.floor( 00 - 00 * Math.random() ),
//started: false, start: Math.floor( 100 + 200 * Math.random() ),
dynamic: dynamic
} );
}
var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt;
function animate () {
requestAnimationFrame( animate );
render();
}
function render () {
delta = 10 * clock.getDelta();
delta = delta < 2 ? delta : 2;
for( j = 0, jl = meshes.length; j < jl; j ++ ) {
data = meshes[ j ];
mesh = data.mesh;
vertices = data.vertices;
vertices_tmp = data.vertices_tmp;
vl = data.vl;
if ( ! data.dynamic ) continue;
if ( data.start > 0 ) {
data.start -= 1;
} else {
if ( !data.started ) {
data.direction = -1;
data.started = true;
}
}
for ( i = 0; i < vl; i ++ ) {
p = vertices[ i ];
vt = vertices_tmp[ i ];
// falling down
if ( data.direction < 0 ) {
if ( p.y > 0 ) {
p.x += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;
p.y += 3.0 * ( 0.25 - Math.random() ) * data.speed * delta;
p.z += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;
} else {
if ( ! vt[ 3 ] ) {
vt[ 3 ] = 1;
data.down += 1;
}
}
}
// rising up
if ( data.direction > 0 ) {
d = Math.abs( p.x - vt[ 0 ] ) + Math.abs( p.y - vt[ 1 ] ) + Math.abs( p.z - vt[ 2 ] );
if ( d > 1 ) {
p.x += - ( p.x - vt[ 0 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
p.y += - ( p.y - vt[ 1 ] ) / d * data.speed * delta * ( 1 + Math.random() );
p.z += - ( p.z - vt[ 2 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
} else {
if ( ! vt[ 4 ] ) {
vt[ 4 ] = 1;
data.up += 1;
}
}
}
}
// all down
if ( data.down === vl ) {
if ( data.delay === 0 ) {
data.direction = 1;
data.speed = 10;
data.down = 0;
data.delay = 10;
for ( i = 0; i < vl; i ++ ) {
vertices_tmp[ i ][ 3 ] = 0;
}
} else {
data.delay -= 1;
}
}
mesh.geometry.verticesNeedUpdate = true;
}
renderer.clear();
composer.render( 0.01 );
}
我想使用鼠标旋转我在脚本中导入的对象（即 - txtS.json）。 我怎样才能做到这一点 ？请帮帮我。
答案 0 :(得分：1)
为什么不使用three.js给你的控制器之一？
例如集成非常简单，您需要包含控制器文件
<script src="js/controls/OrbitControls.js"></script>
在init
中实例化它controls = new THREE.OrbitControls( camera );
在你的动画函数中更新（在调用渲染之前）
controls.update();