您的位置：首页 > Web前端 > JavaScript
threejs path controls example html

2017-07-04 10:56 274 查看
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - path controls</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 {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;

background-color: #fff;
margin: 0px;
overflow: hidden;
}

#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;

}

a { color: red; }

</style>
</head>

<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - path controls example</br>
mouse look around
</div>

<script src="../build/three.min.js"></script>

<script src="js/controls/PathControls.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;

var camera, controls, scene, renderer;

var cross;

var clock = new THREE.Clock();

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );

controls = new THREE.PathControls( camera );

controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
controls.duration = 28
controls.useConstantSpeed = true;
//controls.createDebugPath = true;
//controls.createDebugDummy = true;
controls.lookSpeed = 0.06;
controls.lookVertical = true;
controls.lookHorizontal = true;
controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
controls.lon = 180;

controls.init();

// world

scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

scene.add( controls.animationParent );

var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );

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

var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( Math.random() - 0.5 ) * 1000;
mesh.position.y = ( Math.random() - 0.5 ) * 1000;
mesh.position.z = ( Math.random() - 0.5 ) * 1000;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add( mesh );

}

// lights

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );

light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.add( light );

light = new THREE.AmbientLight( 0x222222 );
scene.add( light );

// renderer

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );

container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );

// stats

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );

//

window.addEventListener( 'resize', onWindowResize, false );

// start animation

controls.animation.play( true, 0 );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

controls.handleResize();

}

function animate() {

requestAnimationFrame( animate );

render();
stats.update();

}

function render() {

var delta = clock.getDelta();

THREE.AnimationHandler.update( delta );

controls.update( delta );
renderer.render( scene, camera );

}

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航