我无法加入三个例子中的两个。我正在尝试使用粒子随机示例加入WebGL_animation_skinning_blending。
我找到了两个帮助网站，在渲染Chrome开发工具时，不显示错误（仅警告）。
渲染失败，但显示警告。
[违规]为滚动阻止“wheel”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。
感谢任何帮助。谢谢。
<body><div id="info">test3b</div>
<div id="container"></div>
<script src="three.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>
<script src="js/Detector.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
//notes: https://stackoverflow.com/questions/26362816/three-js-renderer-autoclear-property-not-working
//helpers: https://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs/12666937#12666937
var container;
var camera, scene, renderer, group, particle;
//renderer.autoClear = false;
renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
scene = new THREE.Scene(); //scene2
scene.background = new THREE.Color( 0x333333 );
scene.add( new THREE.AmbientLight( 0xffffff ) );
scene = new THREE.Scene();
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container = document.getElementById( 'container' );//container2
var controls;
var mesh, skeleton, mixer;
var crossFadeControls = [];
var idleAction, walkAction, runAction;
var idleWeight, walkWeight, runWeight;
var actions;
var settings;
var clock = new THREE.Clock();
var singleStepMode = false;
var sizeOfNextStep = 0;
var url = 'models/skinned/marine/marine_anims_core.json';
// Initialize scene, light and renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement ); //container2
// Load skinned mesh
new THREE.ObjectLoader().load( url, function ( loadedObject ) {
loadedObject.traverse( function ( child ) {
if ( child instanceof THREE.SkinnedMesh ) {
mesh = child;
}
} );
if ( mesh === undefined ) {
alert( 'Unable to find a SkinnedMesh in this place:\n\n' + url + '\n\n' );
return;
}
// Add mesh and skeleton helper to scene
mesh.rotation.y = - 135 * Math.PI / 180;
scene.add( mesh );//scene2
skeleton = new THREE.SkeletonHelper( mesh );
skeleton.visible = false;
scene.add( skeleton );//scene2
// Initialize camera and camera controls
var radius = mesh.geometry.boundingSphere.radius;
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.PerspectiveCamera( 45, aspect, 1, 10000 );
camera.position.set( 0.0, radius, radius * 3.5 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, radius, 0 );
controls.update();
// Create the control panel
createPanel();
//callsoldier();
// Initialize mixer and clip actions
mixer = new THREE.AnimationMixer( mesh );
idleAction = mixer.clipAction( 'idle' );
walkAction = mixer.clipAction( 'walk' );
runAction = mixer.clipAction( 'run' );
actions = [ idleAction, walkAction, runAction ];
activateAllActions();
// Listen on window resizing and start the render loop
window.addEventListener( 'resize', onWindowResize, false );
//init();
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1000;
var PI2 = Math.PI * 2;
var program = function ( context ) {
context.beginPath();
context.arc( 0, 0, 0.5, 0, PI2, true );
context.fill();
};
group = new THREE.Group();
scene.add( group );
for ( var i = 0; i < 1000; i++ ) {
var material = new THREE.SpriteCanvasMaterial( {
color: Math.random() * 0x808008 + 0x808080,
program: program
} );
particle = new THREE.Sprite( material );
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = Math.random() * 20 + 10;
group.add( particle );
}
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//container.appendChild( renderer2.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
animate();
} );
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 createPanel() {
var panel = new dat.GUI( { width: 310 } );
// var folder1 = panel.addFolder( 'Visibility' );
// var folder2 = panel.addFolder( 'Activation/Deactivation' );
// var folder3 = panel.addFolder( 'Pausing/Stepping' );
var folder4 = panel.addFolder( 'Crossfading' );
//var folder5 = panel.addFolder( 'Blend Weights' );
var folder6 = panel.addFolder( 'General Speed' );
settings = {
'show model': true,
'show skeleton': false,
'deactivate all': deactivateAllActions,
'activate all': activateAllActions,
'pause/continue': pauseContinue,
'make single step': toSingleStepMode,
'modify step size': 0.05,
'from walk to idle': function () { prepareCrossFade( walkAction, idleAction, 1.0 ) },
'from idle to walk': function () { prepareCrossFade( idleAction, walkAction, 0.5 ) },
'from walk to run': function () { prepareCrossFade( walkAction, runAction, 2.5 ) },
'from run to walk': function () { prepareCrossFade( runAction, walkAction, 5.0 ) },
'use default duration': true,
'set custom duration': 3.5,
'modify idle weight': 0.0,
'modify walk weight': 1.0,
'modify run weight': 0.0,
'modify time scale': 1.0
};
crossFadeControls.push( folder4.add( settings, 'from walk to idle' ) );
crossFadeControls.push( folder4.add( settings, 'from idle to walk' ) );
crossFadeControls.push( folder4.add( settings, 'from walk to run' ) );
crossFadeControls.push( folder4.add( settings, 'from run to walk' ) );
folder4.add( settings, 'set custom duration', 0, 10, 0.01 );
folder6.add( settings, 'modify time scale', 0.0, 1.5, 0.01 ).onChange( modifyTimeScale );
//folder1.open();
//folder2.open();
//folder3.open();
folder4.open();
//folder5.open();
folder6.open();
crossFadeControls.forEach( function ( control ) {
control.classList1 = control.domElement.parentElement.parentElement.classList;
control.classList2 = control.domElement.previousElementSibling.classList;
control.setDisabled = function () {
control.classList1.add( 'no-pointer-events' );
control.classList2.add( 'control-disabled' );
};
control.setEnabled = function () {
control.classList1.remove( 'no-pointer-events' );
control.classList2.remove( 'control-disabled' );
};
} );
}
function showModel( visibility ) {
mesh.visible = visibility;
}
function showSkeleton( visibility ) {
skeleton.visible = visibility;
}
function modifyTimeScale( speed ) {
mixer.timeScale = speed;
}
function deactivateAllActions() {
actions.forEach( function ( action ) {
action.stop();
} );
}
function activateAllActions() {
setWeight( idleAction, settings[ 'modify idle weight' ] );
setWeight( walkAction, settings[ 'modify walk weight' ] );
setWeight( runAction, settings[ 'modify run weight' ] );
actions.forEach( function ( action ) {
action.play();
} );
}
function pauseContinue() {
if ( singleStepMode ) {
singleStepMode = false;
unPauseAllActions();
} else {
if ( idleAction.paused ) {
unPauseAllActions();
} else {
pauseAllActions();
}
}
}
function pauseAllActions() {
actions.forEach( function ( action ) {
action.paused = true;
} );
}
function unPauseAllActions() {
actions.forEach( function ( action ) {
action.paused = false;
} );
}
function toSingleStepMode() {
unPauseAllActions();
singleStepMode = true;
sizeOfNextStep = settings[ 'modify step size' ];
}
function prepareCrossFade( startAction, endAction, defaultDuration ) {
// Switch default / custom crossfade duration (according to the user's choice)
var duration = setCrossFadeDuration( defaultDuration );
// Make sure that we don't go on in singleStepMode, and that all actions are unpaused
singleStepMode = false;
unPauseAllActions();
// If the current action is 'idle' (duration 4 sec), execute the crossfade immediately;
// else wait until the current action has finished its current loop
if ( startAction === idleAction ) {
executeCrossFade( startAction, endAction, duration );
} else {
synchronizeCrossFade( startAction, endAction, duration );
}
}
function setCrossFadeDuration( defaultDuration ) {
// Switch default crossfade duration <-> custom crossfade duration
if ( settings[ 'use default duration' ] ) {
return defaultDuration;
} else {
return settings[ 'set custom duration' ];
}
}
function synchronizeCrossFade( startAction, endAction, duration ) {
mixer.addEventListener( 'loop', onLoopFinished );
function onLoopFinished( event ) {
if ( event.action === startAction ) {
mixer.removeEventListener( 'loop', onLoopFinished );
executeCrossFade( startAction, endAction, duration );
}
}
}
function executeCrossFade( startAction, endAction, duration ) {
// Not only the start action, but also the end action must get a weight of 1 before fading
// (concerning the start action this is already guaranteed in this place)
setWeight( endAction, 1 );
endAction.time = 0;
// Crossfade with warping - you can also try without warping by setting the third parameter to false
startAction.crossFadeTo( endAction, duration, true );
}
// This function is needed, since animationAction.crossFadeTo() disables its start action and sets
// the start action's timeScale to ((start animation's duration) / (end animation's duration))
function setWeight( action, weight ) {
action.enabled = true;
action.setEffectiveTimeScale( 1 );
action.setEffectiveWeight( weight );
}
// Called by the render loop
function updateWeightSliders() {
settings[ 'modify idle weight' ] = idleWeight;
settings[ 'modify walk weight' ] = walkWeight;
settings[ 'modify run weight' ] = runWeight;
}
// Called by the render loop
function updateCrossFadeControls() {
crossFadeControls.forEach( function ( control ) {
control.setDisabled();
} );
if ( idleWeight === 1 && walkWeight === 0 && runWeight === 0 ) {
crossFadeControls[ 1 ].setEnabled();
}
if ( idleWeight === 0 && walkWeight === 1 && runWeight === 0 ) {
crossFadeControls[ 0 ].setEnabled();
crossFadeControls[ 2 ].setEnabled();
}
if ( idleWeight === 0 && walkWeight === 0 && runWeight === 1 ) {
crossFadeControls[ 3 ].setEnabled();
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//renderer.autoClear = false; // important!
function animate() {
// Render loop
requestAnimationFrame( animate );
idleWeight = idleAction.getEffectiveWeight();
walkWeight = walkAction.getEffectiveWeight();
runWeight = runAction.getEffectiveWeight();
// Update the panel values if weights are modified from "outside" (by crossfadings)
updateWeightSliders();
// Enable/disable crossfade controls according to current weight values
updateCrossFadeControls();
// Get the time elapsed since the last frame, used for mixer update (if not in single step mode)
var mixerUpdateDelta = clock.getDelta();
// If in single step mode, make one step and then do nothing (until the user clicks again)
if ( singleStepMode ) {
mixerUpdateDelta = sizeOfNextStep;
sizeOfNextStep = 0;
}
// Update the animation mixer, the stats panel, and render this frame
mixer.update( mixerUpdateDelta );
//stats.update();
//renderer.clear();
//renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
//renderer.render( scene, camera );
//renderer.clearDepth();
//renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );
//camera.position.x += ( mouseX - camera.position.x ) * 0.01;
//camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
//camera.lookAt( scene.position );
//
//group.rotation.x += 0.0001;
//group.rotation.y += 0.0002;
//renderer.render( scene2, camera );//render();
mesh.renderOrder = 999;
mesh.onBeforeRender = function( renderer ) { renderer.clearDepth(); };
}
</script>
</body>